/* ==========================================================
   BestCloudHosting India — Global Styles
   Fonts  : Sora (headings) | Plus Jakarta Sans (content)
   ========================================================== */

:root {
    --font-heading: 'Sora', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    --color-primary: #001bb7;
    --color-primary-dark: #2333ab;
    --color-dark: #0e1230;
    --color-accent: #f97316;

    --hero-bg-start: #0a1140;
    --hero-bg-mid: #16226b;
    --hero-bg-end: #2743b8;
    --hero-text-muted: #c3cdf2;
}

body {
    font-family: var(--font-body);
    color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

.pt-70{
    padding-top: 70px;
}

.pb-70{
    padding-bottom: 70px;
}

.para{
      color: rgb(71, 85, 105);
    font-size: 1rem;
    line-height: 1.78;
    margin: 0px 0px 1.1rem;  
}
/* ==========================================================
   Header / Navbar
   ========================================================== */

.site-header .navbar {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #e7ebf4;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-dark);
}

.brand-accent {
    color: var(--color-accent);
}

.btn-top10 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 10px;
    padding: 0.55rem 1.15rem;
}

.btn-top10:hover,
.btn-top10:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-top10 .arrow {
    margin-left: 0.25rem;
}

/* ==========================================================
   Hero Section
   ========================================================== */

.hero {
    background: radial-gradient(900px 520px at 82% -12%, rgba(255, 122, 48, 0.2), transparent 60%), linear-gradient(160deg, rgb(6, 19, 63) 0%, rgb(0, 27, 183) 100%);
    padding: 5.5rem 0 6rem;
}

/* Badge pill: "India edition · 2026 rankings" */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.06);
    color: #e4e9fb;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
}

.badge-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Main heading */
.hero-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

/* Sub text */
.hero-subtitle {
    color: var(--hero-text-muted);
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 44rem;
    margin-bottom: 2.5rem;
}

/* Bottom feature pills */
.hero-pill {
    display: inline-block;
    padding: 0.6rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #dde4fa;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ==========================================================
   Section: shared
   ========================================================== */

.section-title {
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.01em;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

/* ==========================================================
   Section: Price Expectations (stat cards)
   ========================================================== */

.stat-card {
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
}

.stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--color-primary);
    margin-bottom: 0.55rem;
}

.stat-text {
    color: rgb(71, 85, 105);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ==========================================================
   Section: Cloud Classification (classify cards)
   ========================================================== */

.classify-card {
    background: #f6f7fb;
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
}

.classify-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-dark);
    margin-bottom: 0.7rem;
}

.classify-text {
    color: rgb(71, 85, 105);
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ==========================================================
   Section: Trust Guide Accordion
   ========================================================== */

.trust-item {
    border: 1px solid #e7eaf3;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.trust-toggle {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-dark);
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    box-shadow: none;
}

.trust-toggle:not(.collapsed) {
    color: var(--color-dark);
    background: #ffffff;
    box-shadow: none;
}

.trust-toggle:focus {
    box-shadow: none;
    border-color: transparent;
}

/* smaller, grey caret like the mock */
.trust-toggle::after {
    width: 0.85rem;
    height: 0.85rem;
    background-size: 0.85rem;
    opacity: 0.45;
}

.trust-body {
    background: #f7f8fb;
    border-top: 1px solid #eef0f6;
    padding: 1.5rem;
}

.trust-text {
    color: rgb(71, 85, 105);
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 40rem;
    margin-bottom: 1.5rem;
}

.trust-text strong {
    color: var(--color-dark);
}

.trust-list {
    gap: 0.9rem 2.5rem;
}

.trust-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--color-dark);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
    /* max-width: 16.5rem; */
}

.trust-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ==========================================================
   Section: Summary Card
   ========================================================== */

.summary-card {
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-left: 5px solid #1b2a8f;
    border-radius: 16px;
    padding: 2rem 2rem 1.75rem;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.summary-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-bottom: 1.1rem;
}

.summary-text {
    color: #44507e;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.summary-text strong {
    color: var(--color-dark);
}

.summary-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: #eef4ff;
    border: 1px solid rgb(207, 224, 255);
    border-radius: 12px;
    padding: 0.9rem 1.25rem;
    margin-top: 1.4rem;
    font-size: 0.95rem;
}

.summary-cta-label {
    font-weight: 700;
    color: var(--color-dark);
}

.summary-cta-link {
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

.summary-cta-link:hover {
    color: #ea6a0c;
    text-decoration: underline;
}

/* ==========================================================
   Section: Quick Comparison (top 10 table)
   ========================================================== */

.compare-wrap {
    border: 1px solid #e7eaf3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(14, 18, 48, 0.06);
    background: #ffffff;
}

/* Dark blue banner header */
.compare-head {
    background: linear-gradient(135deg, #0a1140 0%, var(--color-primary) 100%);
    padding: 1.5rem 1.75rem;
}

.compare-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.compare-sub {
    color: #c3cdf2;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.compare-table-scroll {
    /* allow horizontal scroll on tablets before the mobile card layout kicks in */
    border-radius: 0;
}

/* Table base */
.compare-table {
    margin-bottom: 0;
    vertical-align: middle;
}

.compare-table thead th {
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.25rem;
    border: 0;
    white-space: nowrap;
}

.compare-table tbody td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #eef0f6;
    border-top: 0;
    font-size: 0.9rem;
    color: var(--color-dark);
    vertical-align: middle;
}

.compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-table tbody tr:hover {
    background: #f9faff;
}

/* Rank badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

.rank-badge--top {
    background: var(--color-accent);
}

/* Provider cell */
.provider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.provider-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* width: 46px;
    height: 46px; */
    /* border-radius: 10px; */
    /* color: #ffffff;
    font-family: var(--font-heading); */
    /* font-weight: 700;
    font-size: 1.2rem; */
}

/* Real-logo variant: white tile with contained image */
.provider-logo--img {
    background: #ffffff;
    /* border: 1px solid #e7eaf3; */
    padding: 0px;
}

.provider-logo--img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 160px;
}

.provider-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.provider-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-dark);
}

.provider-tag {
    margin-top: 0.15rem;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Rating cell */
.cell-rating .stars {
    display: block;
    letter-spacing: 0.05em;
    line-height: 1;
}

.star {
    font-size: 0.85rem;
    color: var(--color-accent);
}

.star.empty {
    color: #d7dbe8;
}

.star.half {
    position: relative;
    color: #d7dbe8;
}

.star.half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: var(--color-accent);
}

.rating-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: rgb(100, 116, 139);
}

/* Price cell */
.cell-price {
    min-width: 200px;
}

.price-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-primary);
}

.price-note {
    display: block;
    /* margin-top: 0.3rem; */
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgb(100, 116, 139);
}

/* Coverage cell */
.cell-coverage {
    font-size: 0.88rem;
    color: rgb(71, 85, 105);
    white-space: nowrap;
}

/* Visit button */
.btn-visit {
    display: inline-block;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-visit:hover {
    background: #ea6a0c;
    color: #ffffff;
}

/* --- Mobile card layout: stack each row into a labelled card --- */
@media (max-width: 767.98px) {
    .compare-table thead {
        display: none;
    }

    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table td {
        display: block;
        width: 100%;
    }

    .compare-table tbody tr {
        position: relative;
        padding: 1rem 1rem 1rem;
        border-bottom: 8px solid #f0f2f8;
    }

    .compare-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.75rem 0;
        border: 0;
        border-bottom: 1px solid #eef0f6;
        text-align: right;
    }

    /* No divider after the last field in each card */
    .compare-table tbody td:last-child {
        border-bottom: 0;
    }

    .compare-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.8rem;
        color: rgb(100, 116, 139);
        text-align: left;
        flex-shrink: 0;
    }

    /* Provider + rank share the top of the card */
    .cell-provider .provider {
        justify-content: flex-end;
    }

    .cell-rating .stars,
    .cell-price .price-value,
    .cell-price .price-note,
    .rating-note {
        text-align: right;
    }

    .cell-action {
        justify-content: flex-end;
    }

    .cell-action .btn-visit {
        width: 100%;
        text-align: center;
        margin-top: 0.35rem;
    }
}

/* ==========================================================
   Section: Detailed Provider Reviews
   ========================================================== */

.reviews-heading {
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.01em;
    color: var(--color-dark);
    margin-bottom: 1.75rem;
}

.review-card {
    background: #ffffff;
    border: 1px solid #e7eaf3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(14, 18, 48, 0.06);
    margin-bottom: 2.5rem;
}

/* --- Editor's Choice banner --- */
.review-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #0a1140 0%, var(--color-primary) 100%);
    padding: 1rem 1.75rem;
}

.review-banner-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-banner-icon {
    font-size: 1.35rem;
}

.review-banner-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.review-banner-eyebrow {
    color: #c3cdf2;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.review-banner-title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.review-banner-right {
    text-align: right;
    line-height: 1.2;
}

.review-banner-score {
    display: block;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
}

.review-banner-note {
    color: #c3cdf2;
    font-size: 0.75rem;
}

/* --- Card top: main + rating box --- */
.review-top {
    display: flex;
    gap: 1.75rem;
    padding: 1.75rem;
}

.review-main {
    flex: 1 1 auto;
    min-width: 0;
}

.review-headrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.review-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
}

/* Real-logo variant: white tile with contained image */
.review-logo--img {
    background: #ffffff;
    /* border: 1px solid #e7eaf3;
    padding: 6px; */
}

.review-logo--img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.review-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-dark);
    margin: 0;
}

.review-rank {
    color: rgb(100, 116, 139);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Tag pills */
.review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.review-tag {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 50rem;
    background: #eef2ff;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Specs (price / coverage) */
.review-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin-bottom: 1.1rem;
}

.review-spec {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.review-spec-label {
    color: rgb(100, 116, 139);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.review-spec-value {
    color: var(--color-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

.review-spec-price {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
}

.review-bestfor {
    color: rgb(71, 85, 105);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.review-bestfor strong {
    color: var(--color-dark);
}

.review-quote {
    color: rgb(148, 163, 184);
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.review-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.review-trust-item {
    color: rgb(100, 116, 139);
    font-size: 0.82rem;
    font-weight: 500;
}

/* --- Rating box (right) --- */
/* Right column holds the rating card + optional coupon box */
.review-side {
    flex: 0 0 220px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-rating-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1rem;
}

/* --- Coupon / offer box --- */
.review-coupon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff7ef;
    border: 1px dashed var(--color-accent);
    border-radius: 14px;
    padding: 12px;
}

.coupon-eyebrow {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.6rem;
}

.coupon-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
}

.coupon-code {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.6rem;
    border: 1px dashed #d9a566;
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.coupon-copy {
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.coupon-copy:hover {
    background: #ea6a0c;
}

.coupon-copy.is-copied {
    background: #16a34a;
}

.coupon-label {
    margin-top: 0.6rem;
    color: rgb(100, 116, 139);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Offer variant (no copyable code) */
.review-coupon--offer .coupon-offer-text {
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px dashed #d9a566;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

.review-rating-label {
    color: rgb(100, 116, 139);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.review-rating-score {
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0.15rem 0;
}

.review-rating-stars {
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.review-visit {
    width: 100%;
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}

/* --- Review accordions --- */
.review-accordion {
    border-top: 1px solid #eef0f6;
}

.review-acc-item {
    border: 0;
    border-bottom: 1px solid #eef0f6;
    border-radius: 0 !important;
    background: transparent;
}

.review-acc-item:last-child {
    border-bottom: 0;
}

.review-acc-btn {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--color-dark);
    background: #f7f8fb;
    padding: 1rem 1.75rem;
    box-shadow: none;
}

.review-acc-btn:not(.collapsed) {
    color: var(--color-dark);
    background: #f7f8fb;
    box-shadow: none;
}

.review-acc-btn:focus {
    box-shadow: none;
    border-color: transparent;
}

.review-acc-btn::after {
    width: 0.85rem;
    height: 0.85rem;
    background-size: 0.85rem;
    opacity: 0.45;
}

.review-acc-body {
    padding: 1.5rem 1.75rem;
    background: #ffffff;
}

.review-para {
    color: rgb(71, 85, 105);
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.review-para:last-child {
    margin-bottom: 0;
}

/* Pricing list */
.review-price-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
    color: rgb(71, 85, 105);
    font-size: 0.92rem;
    line-height: 1.9;
}

.review-price-list strong {
    color: var(--color-dark);
}

/* Pros & cons */
.procon-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.procon-pros {
    color: #16a34a;
}

.procon-cons {
    color: #dc2626;
}

.procon-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
    color: rgb(71, 85, 105);
    font-size: 0.9rem;
    line-height: 1.85;
}

/* Stack the rating box under the main content on tablets/phones */
@media (max-width: 767.98px) {
    .review-top {
        flex-direction: column;
        padding: 1.25rem;
    }

    .review-side {
        flex-basis: auto;
        width: 100%;
    }

    .review-name {
        font-size: 1.25rem;
    }

    .review-banner {
        padding: 0.85rem 1.25rem;
    }

    .review-acc-btn,
    .review-acc-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ==========================================================
   Section: Spotlight Banner
   ========================================================== */

.spotlight-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, #eaf0ff 0%, #f2f5ff 100%);
    border: 1px solid #dce4fb;
    border-radius: 18px;
    padding: 1.75rem 2rem;
}

.spotlight-logo {
    flex-shrink: 0;
}

.spotlight-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: #1e293b;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

.spotlight-body {
    flex: 1 1 auto;
    min-width: 0;
}

.spotlight-eyebrow {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}

.spotlight-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

.spotlight-text {
    color: rgb(71, 85, 105);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.spotlight-action {
    flex-shrink: 0;
}

.btn-spotlight {
    display: inline-block;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.7rem 1.35rem;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-spotlight:hover {
    background: var(--color-primary-dark);
    color: #ffffff;
}

/* Stack on tablets/phones */
@media (max-width: 767.98px) {
    .spotlight-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 1.5rem;
    }

    .spotlight-action {
        width: 100%;
    }

    .btn-spotlight {
        display: block;
        text-align: center;
    }
}

/* ==========================================================
   Section: India-specific Factors Table
   ========================================================== */

.factors-scroll {
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.factors-table {
    margin-bottom: 0;
    vertical-align: middle;
}

.factors-table thead th {
    background: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.95rem 1.25rem;
    border: 0;
    white-space: nowrap;
}

.factors-table tbody td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef0f6;
    border-top: 0;
    font-size: 0.9rem;
    color: rgb(71, 85, 105);
    vertical-align: middle;
}

.factors-table tbody tr:last-child td {
    border-bottom: 0;
}

.factors-table tbody tr:hover {
    background: #f9faff;
}

.factors-provider {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark) !important;
    white-space: nowrap;
}

.factors-billing {
    white-space: nowrap;
}

.factors-notes {
    min-width: 240px;
    line-height: 1.55;
}

/* Colour-coded India DC status */
.dc-status {
    font-weight: 600;
}

.dc-yes {
    color: #16a34a;
}

.dc-partial {
    color: #ea8a0c;
}

.dc-no {
    color: #dc2626;
}

/* Mobile: transform rows into stacked labelled cards */
@media (max-width: 767.98px) {
    .factors-table thead {
        display: none;
    }

    .factors-table,
    .factors-table tbody,
    .factors-table tr,
    .factors-table td {
        display: block;
        width: 100%;
    }

    .factors-table tbody tr {
        padding: 0.75rem 1rem;
        border-bottom: 8px solid #f0f2f8;
    }

    .factors-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.4rem 0;
        border: 0;
        text-align: right;
    }

    .factors-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.8rem;
        color: rgb(100, 116, 139);
        text-align: left;
        flex-shrink: 0;
    }

    .factors-notes {
        min-width: 0;
    }
}

/* ==========================================================
   Section: Intro vs Renewal Price Table
   ========================================================== */

.renewal-scroll {
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.renewal-table {
    margin-bottom: 0;
    vertical-align: middle;
}

.renewal-table thead th {
    background: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.95rem 1.25rem;
    border: 0;
    white-space: nowrap;
}

.renewal-table tbody td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef0f6;
    border-top: 0;
    font-size: 0.9rem;
    vertical-align: middle;
    white-space: nowrap;
}

.renewal-table tbody tr:last-child td {
    border-bottom: 0;
}

.renewal-table tbody tr:hover {
    background: #f9faff;
}

.renewal-provider {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark);
}

.renewal-intro {
    color: var(--color-primary);
    font-weight: 600;
}

.renewal-renew {
    color: rgb(100, 116, 139);
    font-weight: 500;
}

.renewal-period {
    color: rgb(148, 163, 184);
    font-size: 0.8rem;
    margin-left: 0.1rem;
}

/* Colour-coded hike */
.hike {
    font-weight: 700;
}

.hike-flat {
    color: #16a34a;
}

.hike-warn {
    color: #ea8a0c;
}

.hike-bad {
    color: #dc2626;
}

/* Mobile: transform rows into stacked labelled cards */
@media (max-width: 767.98px) {
    .renewal-table thead {
        display: none;
    }

    .renewal-table,
    .renewal-table tbody,
    .renewal-table tr,
    .renewal-table td {
        display: block;
        width: 100%;
    }

    .renewal-table tbody tr {
        padding: 0.75rem 1rem;
        border-bottom: 8px solid #f0f2f8;
    }

    .renewal-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.4rem 0;
        border: 0;
        text-align: right;
    }

    .renewal-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.8rem;
        color: rgb(100, 116, 139);
        text-align: left;
        flex-shrink: 0;
    }
}

/* ==========================================================
   Section: Head-to-head Comparisons
   ========================================================== */

.h2h-card {
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
}

.h2h-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
}

.h2h-vs {
    color: rgb(148, 163, 184);
    font-weight: 500;
    font-size: 0.82rem;
    margin: 0 0.15rem;
}

.h2h-text {
    color: rgb(71, 85, 105);
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 0.9rem;
}

.h2h-winner {
    color: #16a34a;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0;
}

.h2h-winner-label {
    font-weight: 700;
}

/* ==========================================================
   Section: Best By Use Case
   ========================================================== */

.usecase-wrap {
    border: 1px solid #e7eaf3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(14, 18, 48, 0.06);
    background: #ffffff;
}

.usecase-head {
    background: var(--color-primary);
    padding: 1.5rem 1.75rem;
}

.usecase-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.usecase-sub {
    color: #c3cdf2;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.usecase-table {
    margin-bottom: 0;
    vertical-align: middle;
}

.usecase-table thead th {
    background: #f2f4fa;
    color: rgb(100, 116, 139);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-bottom: 1px solid #e7eaf3;
    white-space: nowrap;
}

.usecase-table tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eef0f6;
    border-top: 0;
    font-size: 0.9rem;
    vertical-align: middle;
}

.usecase-table tbody tr:last-child td {
    border-bottom: 0;
}

.usecase-table tbody tr:hover {
    background: #f9faff;
}

.usecase-need {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-dark);
    min-width: 180px;
}

.usecase-pill {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 50rem;
    background: #eef2ff;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.usecase-why {
    color: rgb(100, 116, 139);
    line-height: 1.55;
    min-width: 260px;
}

/* Mobile: transform rows into stacked labelled cards */
@media (max-width: 767.98px) {
    .usecase-table thead {
        display: none;
    }

    .usecase-table,
    .usecase-table tbody,
    .usecase-table tr,
    .usecase-table td {
        display: block;
        width: 100%;
    }

    .usecase-table tbody tr {
        padding: 0.75rem 1rem;
        border-bottom: 8px solid #f0f2f8;
    }

    .usecase-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.45rem 0;
        border: 0;
        text-align: right;
    }

    .usecase-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        color: rgb(100, 116, 139);
        text-align: left;
        flex-shrink: 0;
    }

    .usecase-need,
    .usecase-why {
        min-width: 0;
    }
}

/* ==========================================================
   Section: Migration CTA Banner
   ========================================================== */

.migrate-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--color-dark);
    border-radius: 16px;
    padding: 1.75rem 2rem;
}

.migrate-body {
    flex: 1 1 auto;
    min-width: 0;
}

.migrate-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.migrate-text {
    color: #aeb7d6;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 0;
    max-width: 40rem;
}

.migrate-action {
    flex-shrink: 0;
}

.btn-migrate {
    display: inline-block;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.75rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-migrate:hover {
    background: #ea6a0c;
    color: #ffffff;
}

/* ==========================================================
   Section: Scorecard (top 3)
   ========================================================== */

.score-card {
    background: #ffffff;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.score-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.35rem;
}

.score-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Full-logo variant: complete wordmark, sized by height */
.score-logo--full {
    display: inline-flex;
    align-items: center;
}

.score-logo--full img {
    height: 34px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.score-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-dark);
    margin: 0;
}

.score-metric {
    margin-bottom: 1rem;
}

.score-metric:last-child {
    margin-bottom: 0;
}

.score-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.score-label {
    color: rgb(100, 116, 139);
    font-size: 0.85rem;
}

.score-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-dark);
}

.score-track {
    height: 7px;
    border-radius: 50rem;
    background: #eceef5;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    border-radius: 50rem;
}

/* Migration banner stacks on phones */
@media (max-width: 767.98px) {
    .migrate-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 1.5rem;
    }

    .migrate-action {
        width: 100%;
    }

    .btn-migrate {
        display: block;
        text-align: center;
    }
}

/* ==========================================================
   Section: Money-back & Migration Glance
   ========================================================== */

.risk-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 12px;
    padding: 1rem 1.15rem;
}

.risk-provider {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.risk-meta {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.35;
}

.risk-refund {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.risk-migration {
    color: rgb(148, 163, 184);
    font-size: 0.78rem;
}

/* ==========================================================
   Section: Best By Use Case (icon cards)
   ========================================================== */

.usecard {
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.4rem 1.5rem 1.5rem;
}

.usecard-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.85rem;
}

.usecard-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

.usecard-text {
    color: rgb(100, 116, 139);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

.usecard-pick {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0;
}

.usecard-pick-label {
    font-weight: 700;
}

/* ==========================================================
   Section: How to Choose Checklist
   ========================================================== */

.checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checklist-item {
    display: flex;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #e7eaf3;
    border-radius: 12px;
    padding: 1.15rem 1.4rem;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.checklist-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #eef2ff;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
}

.checklist-content {
    min-width: 0;
}

.checklist-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-dark);
    margin-bottom: 0.4rem;
}

.checklist-text {
    color: rgb(100, 116, 139);
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .checklist-item {
        padding: 1rem 1.1rem;
    }
}

/* ==========================================================
   Section: Hosting Types Comparison
   ========================================================== */

.types-scroll {
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.types-table {
    margin-bottom: 0;
    vertical-align: middle;
}

.types-table thead th {
    background: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.95rem 1.5rem;
    border: 0;
    white-space: nowrap;
}

.types-table tbody td {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #eef0f6;
    border-top: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    vertical-align: middle;
}

.types-table tbody tr:last-child td {
    border-bottom: 0;
}

.types-name {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark);
}

.types-perf {
    color: rgb(100, 116, 139);
}

.types-bestfor {
    color: #b45309;
}

.types-price {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* Mobile: transform rows into stacked labelled cards */
@media(max-width: 1200px) and (min-width: 767px) {
    .compare-table tbody td {
    padding: 10px 8px;
}
.provider-logo--img img {
    width: 90px;
}
}


@media (max-width: 767.98px) {
    .types-table thead {
        display: none;
    }

    .types-table,
    .types-table tbody,
    .types-table tr,
    .types-table td {
        display: block;
        width: 100%;
    }

    .types-table tbody tr {
        padding: 0.75rem 1rem;
        border-bottom: 8px solid #f0f2f8;
    }

    .types-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.45rem 0;
        border: 0;
        text-align: right;
    }

    .types-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.8rem;
        color: rgb(100, 116, 139);
        text-align: left;
        flex-shrink: 0;
    }
}

/* ==========================================================
   Section: Key Cloud Hosting Terms
   ========================================================== */

.term-card {
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
}

.term-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.term-list {
    list-style: disc;
    padding-left: 1.15rem;
    margin: 0;
    color: rgb(100, 116, 139);
    font-size: 0.85rem;
    line-height: 1.6;
}

.term-list li {
    margin-bottom: 0.5rem;
}

.term-list li:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   Section: How We Test & Rank
   ========================================================== */

.method-card {
    background: var(--color-dark);
    border-radius: 18px;
    padding: 2.25rem 2.25rem 2.5rem;
}

.method-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.method-sub {
    color: #aeb7d6;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.method-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1.35rem;
}

.method-item-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.method-item-text {
    color: #c3cad9;
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ==========================================================
   Section: Closing Callout
   ========================================================== */

.callout-box {
    background: #f4f6fb;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.4rem 1.75rem;
}

.callout-text {
    color: rgb(100, 116, 139);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0;
}

.callout-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.callout-link:hover {
    text-decoration: underline;
}

/* ==========================================================
   Section: FAQ
   ========================================================== */

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border: 1px solid #e7eaf3;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 18, 48, 0.04);
}

.faq-btn {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-dark);
    background: #ffffff;
    padding: 1.15rem 1.5rem;
    box-shadow: none;
}

.faq-btn:not(.collapsed) {
    color: var(--color-dark);
    background: #ffffff;
    box-shadow: none;
}

.faq-btn:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-btn::after {
    width: 0.85rem;
    height: 0.85rem;
    background-size: 0.85rem;
    opacity: 0.45;
}

.faq-body {
    background: #ffffff;
    border-top: 1px solid #eef0f6;
    padding: 1.35rem 1.5rem;
}

.faq-intro {
    color: rgb(100, 116, 139);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.faq-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.9rem 0 0;
    color: rgb(100, 116, 139);
    font-size: 0.9rem;
    line-height: 1.7;
}

.faq-list li {
    margin-bottom: 0.35rem;
}

.faq-list li:last-child {
    margin-bottom: 0;
}

.faq-list strong {
    color: var(--color-dark);
}

/* ==========================================================
   Section: Conclusion
   ========================================================== */

.conclusion-card {
    background: #f7f8fb;
    border: 1px solid #e7eaf3;
    border-radius: 16px;
    padding: 2rem 2rem 1.75rem;
}

.conclusion-text {
    color: rgb(100, 116, 139);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.conclusion-text strong {
    color: var(--color-dark);
}

.conclusion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.btn-pick {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-pick-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #ffffff;
}

.btn-pick-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

.btn-pick-outline {
    background: #ffffff;
    border: 1px solid #cdd6ee;
    color: var(--color-primary);
}

.btn-pick-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 575.98px) {
    .btn-pick {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
    background: var(--color-dark);
    padding: 3rem 0;
    text-align: center;
}

.footer-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.footer-tagline {
    color: #9fb0e6;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.footer-note {
    color: #6b779e;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 46rem;
    margin: 0 auto 1rem;
}

.footer-copy {
    color: #6b779e;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* ==========================================================
   Responsive tweaks
   ========================================================== */

   @media (max-width: 1440px) {
    .hero {
        padding: 3.5rem 0 4rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn-top10 {
        font-size: 0.8rem;
        padding: 0.45rem 0.9rem;
    }
}


@media (max-width: 767px) {
  .hero-pill {
    padding: 0.6rem .8rem;
    font-size: 12px;
}

p{
    font-size: 14px;
}

.para {
    font-size: 14px;
}

.hero-title {
    font-size: 28px;
}
}


@media (max-width: 575.98px) {
    .hero {
        padding: 3.5rem 0 4rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn-top10 {
        font-size: 0.8rem;
        padding: 0.45rem 0.9rem;
    }

    .brand-text {
    font-size: 16px;
}
}

/* ==========================================================
   Head-to-Head Comparison Page (Contabo vs Verpex)
   ========================================================== */

.pb-80 {
    padding-bottom: 80px;
}

/* ---- Hero ---- */
.vs-hero {
    background: radial-gradient(900px 520px at 82% -12%, rgba(255, 122, 48, 0.2), transparent 60%), linear-gradient(160deg, rgb(6, 19, 63) 0%, rgb(0, 27, 183) 100%);
    padding: 4.5rem 0 5rem;
}

.vs-hero-badge {
    display: inline-block;
    padding: 0.45rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.06);
    color: #e4e9fb;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
}

.vs-hero-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 60rem;
    margin-bottom: 1.5rem;
}

.vs-hero-subtitle {
    color: var(--hero-text-muted);
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 44rem;
    margin-bottom: 0;
}

/* ---- Contender cards ---- */
.contender-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.contender-card--contabo {
    border: 2px solid #fbbf24;
}

.contender-card--verpex {
    border: 2px solid #16a34a;
}

.contender-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.contender-logo--contabo {
    background: #f5a623;
}

.contender-logo--verpex {
    background: #16a34a;
}

.contender-name {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.contender-tagline {
    color: rgb(100, 116, 139);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.contender-price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* ---- Quick verdict ---- */
.verdict-box {
    background: #f4f5fa;
    border-left: 4px solid var(--color-primary);
    border-radius: 6px;
    padding: 1.6rem 1.8rem;
}

.verdict-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-bottom: 0.7rem;
}

.verdict-text {
    color: rgb(71, 85, 105);
    font-size: 1rem;
    line-height: 1.78;
    margin-bottom: 0;
}

.verdict-text strong {
    color: var(--color-dark);
}

/* ---- Feature-by-feature table ---- */
.vs-table-scroll {
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    overflow: hidden;
}

.vs-table thead th {
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 1rem 1.5rem;
    border: 0;
    white-space: nowrap;
}

.vs-table thead th:first-child {
    width: 20%;
}

.vs-table tbody td {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #eef0f6;
    border-top: 0;
    font-size: 0.92rem;
    color: rgb(71, 85, 105);
    vertical-align: middle;
    line-height: 1.6;
}

.vs-table tbody tr:last-child td {
    border-bottom: 0;
}

.vs-table tbody tr:hover {
    background: #f9faff;
}

.vs-factor {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark) !important;
    white-space: nowrap;
}

/* Mobile: transform rows into stacked labelled cards */
@media (max-width: 767.98px) {
    .vs-table thead {
        display: none;
    }

    .vs-table,
    .vs-table tbody,
    .vs-table tr,
    .vs-table td {
        display: block;
        width: 100%;
    }

    .vs-table tbody tr {
        padding: 0.75rem 1rem;
        border-bottom: 8px solid #f0f2f8;
    }

    .vs-table tbody tr:last-child {
        border-bottom: 0;
    }

    .vs-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.4rem 0;
        border: 0;
        text-align: right;
    }

    .vs-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.8rem;
        color: rgb(100, 116, 139);
        text-align: left;
        flex-shrink: 0;
    }

    .vs-factor {
        white-space: normal;
    }
}

/* ---- Pros & cons cards ---- */
.vs-procon-card {
    background: #ffffff;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    padding: 1.75rem 1.75rem;
}

.vs-procon-name {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
}

.vs-procon-name--contabo {
    color: #e79a13;
}

.vs-procon-name--verpex {
    color: #16a34a;
}

.vs-procon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vs-procon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgb(71, 85, 105);
    margin-bottom: 0.65rem;
}

.vs-procon-list li:last-child {
    margin-bottom: 0;
}

.vs-procon-mark {
    font-weight: 700;
    flex-shrink: 0;
}

.vs-pro .vs-procon-mark {
    color: #16a34a;
}

.vs-con .vs-procon-mark {
    color: #dc2626;
}

.vs-con {
    color: #b0356b;
}

/* ---- Final verdict ---- */
.section-vs-final .para strong {
    color: var(--color-dark);
}

.vs-inline-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.vs-inline-link:hover {
    text-decoration: underline;
}

/* ---- Still deciding CTA ---- */
.vs-cta-card {
    background: var(--color-primary);
    border-radius: 16px;
    padding: 3.25rem 2rem;
    text-align: center;
}

.vs-cta-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.85rem;
}

.vs-cta-text {
    color: #c3cdf2;
    font-size: 1rem;
    margin-bottom: 1.75rem;
}

.btn-vs-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8rem 1.6rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-vs-cta:hover,
.btn-vs-cta:focus {
    background: #e2650c;
    color: #ffffff;
}

/* ---- Comparison page responsive tweaks (matches index.php breakpoints) ---- */
@media (max-width: 1440px) {
    .vs-hero {
        padding: 3.5rem 0 4rem;
    }

    .vs-hero-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 991.98px) {
    .vs-hero-title {
        font-size: clamp(1.75rem, 4.5vw, 2.4rem);
    }

    .contender-card {
        padding: 1.6rem 1.25rem;
    }

    .vs-cta-card {
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 767px) {
    .vs-hero-title {
        font-size: 28px;
    }

    .vs-hero-subtitle,
    .verdict-text,
    .vs-cta-text {
        font-size: 14px;
    }

    .vs-hero-badge {
        font-size: 0.78rem;
        padding: 0.4rem 1rem;
    }

    .contender-name {
        font-size: 1.2rem;
    }

    .contender-price {
        font-size: 1.3rem;
    }

    .verdict-box {
        padding: 1.25rem 1.25rem;
    }

    .vs-procon-card {
        padding: 1.4rem 1.25rem;
    }

    .vs-procon-list li {
        font-size: 14px;
    }

    .vs-cta-card {
        padding: 2.25rem 1.25rem;
    }

    .btn-vs-cta {
        font-size: 0.88rem;
        padding: 0.7rem 1.3rem;
    }

    .vs-footer-nav {
        gap: 0.4rem 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .vs-hero {
        padding: 3rem 0 3.5rem;
    }

    .pt-70 {
        padding-top: 48px;
    }

    .pb-80 {
        padding-bottom: 56px;
    }
}

/* ---- Footer nav ---- */
.vs-footer-nav {
    gap: 0.5rem 1.75rem;
    margin-bottom: 0.9rem;
}

.vs-footer-nav--secondary {
    margin-bottom: 1.75rem;
}

.vs-footer-nav a {
    color: #c3cdf2;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.vs-footer-nav a:hover {
    color: #ffffff;
    text-decoration: underline;
}

body{
    font-family:'Sora',sans-serif;
    color:#132238;
    background:#fff;
}

a{
    text-decoration:none;
}

/* HEADER */

.contact-header{

    border-bottom:1px solid #e5e7eb;
    padding:18px 0;
}

.logo-wrap{

    display:flex;
    align-items:center;
    gap:12px;
}

.logo-icon{

    width:40px;
    height:40px;
    background:#2442d8;
    color:#fff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.logo-text{
    font-size:19px;
    font-weight:700;
    color:#111827;
}

.logo-text .orange{
    color:#f97316;
}

.back-link{
    color:#1737d5;
    font-weight:600;
}

/* SECTION */

.contact-section{
    padding:70px 0 80px;
}

.badge-contact{
    display:inline-block;
    padding:10px 24px;
    background:#eef2ff;
    color:#1737d5;
    border-radius:50px;
    font-weight:600;
    margin-bottom:28px;
}

.contact-title{
    font-size:58px;
    font-weight:800;
    margin-bottom:25px;
}

.contact-subtitle{
    max-width:720px;
    margin:auto;
    color:#64748b;
    font-size:18px;
    line-height:1.5;
}

/* CARD */

.contact-card{
    margin:60px auto;
    border:1px solid #e2e8f0;
    border-radius:24px;
    padding:60px;
    text-align:center;
    background:#fbfbff;
}

.mail-icon{

    width:72px;
    height:72px;
    margin:auto auto 20px;
    background:#f4e8ff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    color:#7c3aed;
}

.contact-card h3{

    font-size:34px;
    font-weight:700;

    margin-bottom:18px;
}

.contact-card a{

    color:#1737d5;

    font-size:30px;

    font-weight:700;
}

.contact-content{
    max-width:900px;
    margin:auto;
}

.contact-content p{
    color:#475569;
    line-height:2;
    font-size:18px;
    margin-bottom:25px;
}

/* FOOTER */

.footer{
    background:#11182e;
    padding:65px 0;
}

.footer-links{
    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.footer-links a{
    color:#fff;
    font-weight:600;
}

.footer h4{
    color:#fff;
    font-weight:800;
    margin-top:20px;
}

.footer h4 span{
    color:#f97316;
}

.footer p{
    color:#cbd5e1;
    margin-top:15px;
}

@media(max-width:768px){

.contact-title{
    font-size:28px;
}

.contact-card{

    padding:35px 20px;
}

.contact-card a{
    font-size:20px;
}

.contact-content p{
    font-size:17px;
}
.logo-text{

    font-size:17px;
}

.back-link{
    display:none;
}
}

/* ===========================================
   Methodology Hero
=========================================== */

.method-hero{
    background:#131d3d;
    padding:95px 0;

}

.method-badge{

    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    font-weight:700;
    margin-bottom:24px;
}

.method-title{
    font-family:'Sora',sans-serif;
    font-size:58px;
    font-weight:800;
    line-height:1.15;
    color:#fff;
    max-width:760px;
    margin-bottom:22px;
}

.method-subtitle{
    max-width:720px;
    color:rgba(255,255,255,.82);
    font-size:24px;
    line-height:1.8;
    margin-bottom:0;
}

@media(max-width:992px){

.method-hero{
    padding:70px 0;
}

.method-title{
    font-size:42px;
}

.method-subtitle{
    font-size:18px;
}
}

@media(max-width:576px){
.method-title{

    font-size:34px;
}

.method-subtitle{
    font-size:17px;
}
}

/*==========================================
   Method Process
==========================================*/

.method-process{
    padding-bottom:80px;
}

.process-list{
    margin-top:40px;
}

.process-card{
    display:flex;
    align-items:flex-start;
    gap:20px;
    background:#fff;
    border:1px solid #dfe5f2;
    border-radius:18px;
    padding:22px 24px;
    margin-bottom:18px;
    transition:.25s;
}

.process-card:hover{
    border-color:#1d33c9;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.process-number{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:10px;
    background:#1d33c9;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
}

.process-content h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:700;
    color:#101828;
}

.process-content p{
    margin:0;
    color:#64748b;
    font-size:17px;
    line-height:1.8;
}

@media(max-width:768px){
.process-card{
    padding:18px;
}

.process-content h3{
    font-size:19px;
}

.process-content p{
    font-size:15px;
}

.process-number{
    width:34px;
    height:34px;
    min-width:34px;
    font-size:16px;

}

}

/*=========================================
  Score Weight Section
=========================================*/

.method-score{

    padding-bottom:80px;

}

.score-subtitle{
    color:#64748b;
    font-size:18px;
    margin-top:12px;
    margin-bottom:35px;
}

.score-card{
    background:#fff;
    border:1px solid #dfe5f2;
    border-radius:16px;
    padding:18px 20px;
    margin-bottom:18px;
}

.score-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}

.score-head span{

    font-size:18px;

    font-weight:700;

    color:#101828;

}

.score-head strong{

    font-size:18px;

    font-weight:700;

    color:#1737d5;

}

.score-progress{

    width:100%;

    height:8px;

    background:#edf2f7;

    border-radius:50px;

    overflow:hidden;

}

.score-fill{

    height:100%;

    background:#1737d5;

    border-radius:50px;

    transition:width .6s ease;

}

@media(max-width:768px){

.score-head span{

    font-size:16px;

}

.score-head strong{

    font-size:16px;

}

.score-subtitle{

    font-size:16px;

}

}

/*=========================================
    Tools Section
=========================================*/

.method-tools{

    padding-bottom:90px;

}

.tool-card{

    background:#f9fbff;

    border:1px solid #dfe5f2;

    border-radius:20px;

    padding:28px;

    transition:.25s;

    height:100%;

}

.tool-card:hover{

    border-color:#1737d5;

    transform:translateY(-5px);

    box-shadow:0 12px 35px rgba(17,24,39,.08);

}

.tool-card h3{
    font-family:'Sora',sans-serif;
    font-size:20px;
    font-weight:700;
    color:#0f172a;
    line-height:1.35;
    margin-bottom:18px;
}

.tool-card p{
    font-size:16px;
    color:#475569;
    line-height:1.8;
    margin-bottom:0;
}

@media(max-width:991px){
.tool-card{
    padding:22px;
}

.tool-card h3{

    font-size:24px;

}

.tool-card p{
    font-size:18px;
}

}

@media(max-width:576px){

.tool-card{

    padding:20px;

}

.tool-card h3{

    font-size:22px;

}

.tool-card p{
    font-size:16px;
}

}
/*==========================================
      Re-test Section
==========================================*/

.method-retest{

    padding-bottom:70px;

}

.retest-card{

    display:flex;

    align-items:flex-start;

    gap:28px;

    background:#fffaf3;

    border:1px solid #fde7b2;

    border-left:6px solid #f97316;

    border-radius:18px;

    padding:32px;

}

.retest-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:50%;

    background:#fff;

    color:#f97316;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    box-shadow:0 10px 30px rgba(249,115,22,.12);

}

.retest-content h2{
    font-family:'Sora',sans-serif;
    font-size:34px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:16px;

}

.retest-content p{
    margin:0;
    color:#475569;
    font-size:16px;
    line-height:1.9;
}

@media(max-width:768px){
.retest-card{
    flex-direction:column;
    padding:24px;
}

.retest-icon{
    width:58px;
    height:58px;
    min-width:58px;
    font-size:22px;
}

.retest-content h2{
    font-size:26px;
}

.retest-content p{
    font-size:16px;
}

}

/*==========================================
        CTA
==========================================*/

.method-cta{
    padding-bottom:90px;
}

.cta-box{
    background:#eef4ff;
    border:1px solid #d7e3ff;
    border-radius:22px;
    text-align:center;
    padding:60px 30px;
}

.cta-box h2{
    font-family:'Sora',sans-serif;
    font-size:42px;
    font-weight:800;
    color:#111827;
    margin-bottom:18px;
}

.cta-box p{
    color:#64748b;
    font-size:20px;
    max-width:720px;
    margin:0 auto 35px;
    line-height:1.8;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#1d33c9;
    color:#fff;
    padding:18px 34px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    font-size:17px;
    transition:.3s;
}

.cta-btn:hover{

    background:#1628a5;

    color:#fff;

    transform:translateY(-2px);

}

@media(max-width:768px){

.cta-box{

    padding:40px 20px;

}

.cta-box h2{

    font-size:30px;

}

.cta-box p{

    font-size:17px;

}

.cta-btn{

    width:100%;

    justify-content:center;

}

}

/*==========================================
        About Hero
==========================================*/

.about-hero{

    background: radial-gradient(900px 520px at 82% -12%, rgba(255, 122, 48, 0.2), transparent 60%), linear-gradient(160deg, rgb(6, 19, 63) 0%, rgb(0, 27, 183) 100%);

    padding:95px 0;

}

.about-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 20px;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:24px;

}

.about-title{
    font-family:'Sora',sans-serif;
    font-size:56px;
    font-weight:800;
    line-height:1.15;
    color:#fff;
    max-width:991px;
    margin-bottom:22px;
}

.about-subtitle{
    max-width:720px;
    color:rgba(255,255,255,.82);
    font-size:20px;
    line-height:1.8;
    margin-bottom:0;
}

/*==========================================
        About: Who we are
==========================================*/

.about-intro p{
    color:#475569;
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
}

.about-intro p:last-child{
    margin-bottom:0;
}

/*==========================================
        About: Team
==========================================*/

.team-card{
    display:flex;
    align-items:flex-start;
    gap:22px;
    background:#f8f9fd;
    border:1px solid #e2e8f4;
    border-radius:16px;
    padding:28px;
    margin-top:28px;
}

.team-avatar{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:14px;
    background:#0b1437;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Sora',sans-serif;
    font-size:18px;
    font-weight:800;
}

.team-content h3{

    font-family:'Sora',sans-serif;

    font-size:17px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:10px;

}

.team-content p{

    color:#5b6aa8;

    font-size:15.5px;

    line-height:1.85;

    margin-bottom:0;

}

/*==========================================
        About: Differentiators
==========================================*/

.diff-list{

    margin-top:28px;

}

.diff-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    background:#fff;

    border:1px solid #e2e8f4;

    border-radius:14px;

    padding:22px 26px;

    margin-bottom:16px;

}

.diff-card:last-child{

    margin-bottom:0;

}

.diff-check{

    color:#f97316;

    font-size:16px;

    line-height:1.7;

}

.diff-card p{

    color:#475569;

    font-size:16px;

    line-height:1.8;

    margin-bottom:0;

}

.diff-card p strong{

    color:#0f172a;

}

/*==========================================
        About: How we make money
==========================================*/

.money-card{

    background:#f2f6ff;

    border:1px solid #dbe6ff;

    border-left:6px solid #1d33c9;

    border-radius:16px;

    padding:32px;

}

.money-card h3{

    font-family:'Sora',sans-serif;

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:14px;

}

.money-card p{

    color:#475569;

    font-size:16px;

    line-height:1.85;

    margin-bottom:0;

}

.money-card a{

    color:#1d33c9;

    font-weight:600;

}

/*==========================================
        About: CTA buttons
==========================================*/

.about-cta.pb-80{

    padding-bottom:90px;

}

.about-cta-row{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 30px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    transition:.3s;

}

.about-btn--primary{

    background:#1d33c9;

    color:#fff;

}

.about-btn--primary:hover{

    background:#1628a5;

    color:#fff;

    transform:translateY(-2px);

}

.about-btn--outline{

    background:#fff;

    color:#1d33c9;

    border:1px solid #c6d4f7;

}

.about-btn--outline:hover{

    border-color:#1d33c9;

    color:#1628a5;

    transform:translateY(-2px);

}

/*==========================================
        About: Responsive
==========================================*/

@media(max-width:992px){

.about-hero{

    padding:70px 0;

}

.about-title{

    font-size:42px;

}

.about-subtitle{

    font-size:18px;

}

}

@media(max-width:768px){

.team-card{

    flex-direction:column;

    padding:22px;

}

.money-card{

    padding:24px;

}

.about-btn{

    width:100%;

    justify-content:center;

}

}

@media(max-width:576px){

.about-title{

    font-size:34px;

}

.about-subtitle{

    font-size:17px;

}

.diff-card{

    padding:18px 20px;

}

}


/*==========================================
        Cost Calculator: Hero
==========================================*/

.calc-hero{

    padding-bottom:40px;

}

.calc-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 20px;

    border-radius:30px;

    background:#e8efff;

    color:#1d33c9;

    font-size:14px;

    font-weight:700;

    margin-bottom:24px;

}

.calc-title{

    font-family:'Sora',sans-serif;

    font-size:44px;

    font-weight:800;

    line-height:1.25;

    color:#0f172a;

    max-width:760px;

    margin:0 auto 18px;

}

.calc-subtitle{

    max-width:560px;

    color:#64748b;

    font-size:16px;

    line-height:1.7;

    margin:0 auto;

}

/*==========================================
        Cost Calculator: Provider picks
==========================================*/

.calc-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

    max-width:820px;

    margin:0 auto;

}

.calc-provider{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border:1px solid #dfe5f2;

    border-radius:10px;

    padding:12px 18px;

    cursor:pointer;

    transition:.2s;

    user-select:none;

}

.calc-provider:hover{

    border-color:#b9c6ec;

}

.calc-provider.is-selected{

    border-color:#1d33c9;

    background:#f0f5ff;

    box-shadow:0 0 0 1px #1d33c9;

}

.calc-check{

    width:16px;

    height:16px;

    accent-color:#1d33c9;

    cursor:pointer;

}

.calc-provider-logo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:20px;

    height:20px;

}

.calc-provider-logo img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

.calc-provider-name{

    font-size:14.5px;

    font-weight:600;

    color:#0f172a;

}

.calc-hint{

    text-align:center;

    color:#8a94c8;

    font-size:13.5px;

    margin:18px 0 0;

    transition:.2s;

}

.calc-hint.is-over{

    color:#f97316;

    font-weight:700;

}

/*==========================================
        Cost Calculator: Term toggle
==========================================*/

.calc-toggle{

    display:flex;

    justify-content:center;

    width:fit-content;

    margin:28px auto 0;

    background:#e9edf6;

    border-radius:30px;

    padding:4px;

}

.calc-toggle-btn{

    border:0;

    background:transparent;

    color:#475569;

    font-size:14px;

    font-weight:700;

    padding:9px 22px;

    border-radius:30px;

    cursor:pointer;

    transition:.2s;

}

.calc-toggle-btn.is-active{

    background:#1d33c9;

    color:#fff;

}

/*==========================================
        Cost Calculator: Cheapest highlight
==========================================*/

.calc-highlight{

    background:#101fae;

    border-radius:18px;

    text-align:center;

    padding:44px 30px;

    max-width:820px;

    margin:30px auto 0;

}

.calc-highlight-eyebrow{

    color:#fdba74;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:12px;

}

.calc-highlight-title{

    font-family:'Sora',sans-serif;

    font-size:36px;

    font-weight:800;

    color:#fff;

    margin-bottom:12px;

}

.calc-highlight-note{

    color:rgba(255,255,255,.8);

    font-size:15px;

    margin-bottom:24px;

}

.calc-highlight-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#f97316;

    color:#fff;

    padding:13px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    font-size:15.5px;

    transition:.3s;

}

.calc-highlight-btn:hover{

    background:#ea6a0c;

    color:#fff;

    transform:translateY(-2px);

}

/*==========================================
        Cost Calculator: Result rows
==========================================*/

.calc-results{

    max-width:820px;

    margin:26px auto 0;

}

.calc-row{

    background:#fff;

    border:1px solid #e2e8f4;

    border-radius:12px;

    padding:20px 24px;

    margin-bottom:16px;

}

.calc-row:last-child{

    margin-bottom:0;

}

.calc-row-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:12px;

}

.calc-row-name{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:15.5px;

    font-weight:700;

    color:#0f172a;

}

.calc-row-badge{

    display:inline-flex;

    align-items:center;

    background:#16a34a;

    color:#fff;

    font-size:11.5px;

    font-weight:700;

    padding:3px 12px;

    border-radius:30px;

}

.calc-row-total{

    color:#1d33c9;

    font-size:16px;

    font-weight:800;

}

.calc-row-track{

    height:8px;

    background:#e9edf6;

    border-radius:30px;

    overflow:hidden;

}

.calc-row-fill{

    height:100%;

    background:#101fae;

    border-radius:30px;

    transition:width .4s ease;

}

.calc-row-fill--cheapest{

    background:#16a34a;

}

.calc-row-meta{

    color:#8a94b8;

    font-size:13px;

    margin:10px 0 0;

}

.calc-footnote{

    text-align:center;

    color:#93a0d9;

    font-size:13px;

    max-width:720px;

    margin:26px auto 0;

}

/*==========================================
        Cost Calculator: CTA
==========================================*/

.calc-cta.pb-80{

    padding-bottom:90px;

}

.calc-cta-box{

    background:#101fae;

    border-radius:18px;

    text-align:center;

    padding:54px 30px;

    max-width:820px;

    margin:0 auto;

}

.calc-cta-box h2{

    font-family:'Sora',sans-serif;

    font-size:30px;

    font-weight:800;

    color:#fff;

    margin-bottom:14px;

}

.calc-cta-box p{

    color:rgba(255,255,255,.8);

    font-size:16px;

    margin-bottom:28px;

}

.calc-cta-row{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

}

.calc-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 26px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    font-size:15.5px;

    transition:.3s;

}

.calc-cta-btn--orange{

    background:#f97316;

    color:#fff;

}

.calc-cta-btn--orange:hover{

    background:#ea6a0c;

    color:#fff;

    transform:translateY(-2px);

}

.calc-cta-btn--outline{

    background:#fff;

    color:#101fae;

    border:1px solid #fff;

}

.calc-cta-btn--outline:hover{

    background:#eef2ff;

    color:#101fae;

    transform:translateY(-2px);

}

/*==========================================
        Cost Calculator: Responsive
==========================================*/

@media(max-width:992px){

.calc-title{

    font-size:36px;

}

}

@media(max-width:768px){

.calc-highlight{

    padding:34px 20px;

}

.calc-highlight-title{

    font-size:28px;

}

.calc-cta-box{

    padding:40px 20px;

}

.calc-cta-box h2{

    font-size:24px;

}

}

@media(max-width:576px){

.calc-title{

    font-size:29px;

}

.calc-subtitle{

    font-size:15px;

}

.calc-provider{

    width:100%;

    justify-content:flex-start;

}

.calc-highlight-btn,
.calc-cta-btn{
    width:100%;
    justify-content:center;
}
}


/*==========================================
        Editorial Policy
==========================================*/
.policy-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 20px;
    border-radius:30px;
    background:#e8efff;
    color:#1d33c9;
    font-size:14px;
    font-weight:700;
    margin-bottom:24px;
}

.policy-title{
    font-family:'Sora',sans-serif;
    font-size:44px;
    font-weight:800;
    line-height:1.2;
    color:#0f172a;
    margin-bottom:22px;
}

.policy-intro{
    max-width:820px;
}

.policy-intro p{
    color:#475569;
    font-size:16px;
    line-height:1.85;
    margin-bottom:16px;
}

/*==========================================
        Editorial Policy: Table of contents
==========================================*/

.policy-toc{
    background:#f8f9fd;
    border:1px solid #e2e8f4;
    border-radius:14px;
    padding:28px 32px;
    margin:14px 0 30px;
}

.policy-toc-eyebrow{
    color:#8a94b8;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:18px;
}

.policy-toc-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px 24px;
    margin:0;
}

.policy-toc-list a{
    color:#1d33c9;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
}

.policy-toc-list a:hover{
    text-decoration:underline;

}

/*==========================================
        Editorial Policy: Sections
==========================================*/

.policy-block{
    max-width:820px;
    margin-top:34px;
    scroll-margin-top:90px;
}

.policy-block h2{
    font-family:'Sora',sans-serif;
    font-size:24px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:16px;
}

.policy-block p{
    color:#475569;
    font-size:16px;
    line-height:1.85;
    margin-bottom:14px;
}

.policy-block p:last-child{
    margin-bottom:0;
}

.policy-updated{
    border-left:4px solid #1d33c9;
    padding-left:14px;
    color:#8a94b8;
    font-size:14px;
    margin:44px 0 0;
}

/*==========================================
        Editorial Policy: Responsive
==========================================*/

@media(max-width:992px){

.policy-title{
    font-size:36px;
}

.policy-toc-list{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:576px){
.policy-title{
    font-size:30px;
}

.policy-toc{
    padding:22px;
}

.policy-toc-list{
    grid-template-columns:1fr;
}

.policy-block h2{
    font-size:21px;
}

}


/*==========================================
        Host Quiz
==========================================*/

.quiz-section{
    background:#f4f6fb;
}

.quiz-container{
    max-width:760px;
    margin:0 auto;
    padding:0 15px;
}

.quiz-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 20px;
    border-radius:30px;
    background:#e8efff;
    color:#1d33c9;
    font-size:14px;
    font-weight:700;
    margin-bottom:24px;
}

.quiz-title{
    font-family:'Sora',sans-serif;
    font-size:44px;
    font-weight:800;
    line-height:1.3;
    color:#0f172a;
    margin-bottom:18px;
}

.quiz-subtitle{
    color:#64748b;
    font-size:16px;
    line-height:1.7;
    margin-bottom:0;
}

/*==========================================
        Host Quiz: Progress
==========================================*/

.quiz-progress{
    height:8px;
    background:#dfe3ee;
    border-radius:30px;
    overflow:hidden;
    margin:28px 0 32px;
}

.quiz-progress-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#0a1a8a 0%,#7a3fae 55%,#f97316 100%);
    border-radius:30px;
    transition:width .35s ease;
}

/*==========================================
        Host Quiz: Card & steps
==========================================*/

.quiz-card{
    background:#fff;
    border-radius:20px;
    padding:36px;
    box-shadow:0 10px 40px rgba(14,18,48,.06);
}

.quiz-step{
    display:none;
}

.quiz-step.is-active{

    display:block;

}

.quiz-step-eyebrow{
    color:#8a94b8;
    font-size:14px;
    margin-bottom:10px;
}

.quiz-question{
    font-family:'Sora',sans-serif;
    font-size:26px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:26px;
}

.quiz-option{
    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    text-align:left;

    background:#fff;

    border:1px solid #e5e9f2;

    border-radius:12px;

    padding:17px 22px;

    margin-bottom:14px;

    cursor:pointer;

    transition:.2s;

}

.quiz-option:hover{

    border-color:#1d33c9;

    background:#f7f9ff;

}

.quiz-option-icon{

    font-size:19px;

    line-height:1;

}

.quiz-option-label{

    font-size:15.5px;

    font-weight:600;

    color:#0f172a;

}

.quiz-back{

    border:0;

    background:transparent;

    color:#8a94b8;

    font-size:14.5px;

    font-weight:600;

    padding:6px 0 0;

    cursor:pointer;

    transition:.2s;

}

.quiz-back:hover{

    color:#1d33c9;

}

/*==========================================
        Host Quiz: Result
==========================================*/

.quiz-result{

    text-align:center;

}

.quiz-result-eyebrow{

    color:#f97316;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:12px;

}

.quiz-result-name{

    font-family:'Sora',sans-serif;

    font-size:40px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:14px;

}

.quiz-result-desc{

    color:#475569;

    font-size:16px;

    line-height:1.7;

    max-width:520px;

    margin:0 auto 24px;

}

.quiz-result-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    background:#f97316;

    color:#fff;

    padding:16px 28px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    transition:.3s;

}

.quiz-result-btn:hover{

    background:#ea6a0c;

    color:#fff;

    transform:translateY(-2px);

}

.quiz-divider{

    border:0;

    border-top:1px solid #e9edf6;

    margin:28px 0 20px;

    opacity:1;

}

.quiz-consider-eyebrow{

    text-align:left;

    color:#8a94b8;

    font-size:12.5px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:14px;

}

.quiz-consider-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    background:#f4f6fb;

    border-radius:12px;

    padding:20px 24px;

    text-align:left;

}

.quiz-consider-name{

    font-size:15.5px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:6px;

}

.quiz-consider-desc{

    color:#64748b;

    font-size:14px;

    line-height:1.7;

    margin-bottom:0;

}

.quiz-consider-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#1d33c9;

    font-size:14.5px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

}

.quiz-consider-link:hover{

    color:#1628a5;

}

.quiz-result-actions{

    display:flex;

    gap:14px;

    margin-top:24px;

}

.quiz-action-btn{

    flex:1;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 20px;

    border-radius:10px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

}

.quiz-action-btn--retake{

    background:#fff;

    color:#1d33c9;

    border:1px solid #b9c6ec;

}

.quiz-action-btn--retake:hover{

    border-color:#1d33c9;

}

.quiz-action-btn--ranking{

    background:#0e1230;

    color:#fff;

    border:1px solid #0e1230;

}

.quiz-action-btn--ranking:hover{

    background:#1c2350;

    color:#fff;

}

/*==========================================
        Host Quiz: Responsive
==========================================*/

@media(max-width:992px){

.quiz-title{

    font-size:36px;

}

}

@media(max-width:576px){

.quiz-title{

    font-size:29px;

}

.quiz-subtitle{

    font-size:15px;

}

.quiz-card{

    padding:24px 18px;

}

.quiz-question{

    font-size:22px;

}

.quiz-result-name{

    font-size:32px;

}

.quiz-consider-card{

    flex-direction:column;

    align-items:flex-start;

}

.quiz-result-actions{

    flex-direction:column;

}

}


/*==========================================
        Cloud Hosting Guide
==========================================*/

.guide-define-text{

    max-width:920px;

}

.guide-define-text p{

    color:#475569;

    font-size:16px;

    line-height:1.85;

    margin-bottom:16px;

}

.guide-define-text p:last-child{

    margin-bottom:0;

}

.guide-define-text a{

    color:#1d33c9;

    font-weight:600;

}

/*==========================================
        Guide: How it works steps
==========================================*/

.guide-steps{

    margin-top:24px;

}

.guide-step{

    display:flex;

    align-items:flex-start;

    gap:16px;

    background:#f6f8fd;

    border:1px solid #e9edf6;

    border-radius:12px;

    padding:20px 24px;

    margin-bottom:16px;

}

.guide-step:last-child{

    margin-bottom:0;

}

.guide-step-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    min-width:28px;

    border-radius:6px;

    background:#101fae;

    color:#fff;

    font-size:13px;

    font-weight:700;

}

.guide-step-content h3{

    font-family:'Sora',sans-serif;

    font-size:15.5px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:8px;

}

.guide-step-content p{

    color:#475569;

    font-size:14.5px;

    line-height:1.8;

    margin-bottom:0;

}

/*==========================================
        Guide: Benefit & type cards
==========================================*/

.benefit-card{

    background:#fff;

    border:1px solid #e2e8f4;

    border-radius:12px;

    padding:24px;

}

.benefit-card h3{

    font-family:'Sora',sans-serif;

    font-size:15.5px;

    font-weight:700;

    color:#1d33c9;

    margin-bottom:10px;

}

.benefit-card p{

    color:#475569;

    font-size:14.5px;

    line-height:1.8;

    margin-bottom:0;

}

.guide-types-intro{

    color:#64748b;

    font-size:15.5px;

    margin-bottom:6px;

}

.type-card{

    background:#f6f8fd;

    border:1px solid #e9edf6;

    border-radius:12px;

    padding:24px;

}

.type-card h3{

    font-family:'Sora',sans-serif;

    font-size:15.5px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:10px;

}

.type-card p{

    color:#475569;

    font-size:14.5px;

    line-height:1.8;

    margin-bottom:0;

}

/*==========================================
        Guide: Comparison table
==========================================*/

.guide-table-wrap{

    overflow-x:auto;

    margin-top:24px;

    border-radius:14px;

    border:1px solid #e2e8f4;

}

.guide-table{

    width:100%;

    min-width:640px;

    border-collapse:collapse;

    background:#fff;

}

.guide-table thead th{

    background:#101fae;

    color:#fff;

    font-family:'Sora',sans-serif;

    font-size:14.5px;

    font-weight:700;

    padding:16px 22px;

    text-align:left;

}

.guide-table tbody td{

    padding:18px 22px;

    border-bottom:1px solid #e9edf6;

    font-size:15px;

    vertical-align:top;

}

.guide-table tbody tr:last-child td{

    border-bottom:0;

}

.guide-td-factor{

    font-weight:700;

    color:#0f172a;

}

.guide-td-traditional{

    color:#64748b;

}

.guide-td-cloud{

    color:#1d33c9;

    font-weight:600;

}

/*==========================================
        Guide: Needs checklist
==========================================*/

.guide-needs-list{

    margin-top:24px;

}

.diff-check--no i{

    font-size:18px;

}

/*==========================================
        Guide: FAQs
==========================================*/

.guide-faq-list{

    margin-top:24px;

}

.guide-faq{
    border:1px solid #e2e8f4;
    border-radius:12px;
    background:#fff;
    margin-bottom:16px;
    overflow:hidden;
}

.guide-faq summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    list-style:none;
    cursor:pointer;
    background:#f8f9fd;
    padding:18px 24px;
    font-family:'Sora',sans-serif;
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}

.guide-faq summary::-webkit-details-marker{
    display:none;
}

.guide-faq-caret{
    color:#8a94b8;
    font-size:14px;
    transition:transform .2s;
}

.guide-faq:not([open]) .guide-faq-caret{
    transform:rotate(180deg);
}

.guide-faq p{
    color:#475569;
    font-size:15.5px;
    line-height:1.85;
    padding:18px 24px;
    margin:0;
}

/*==========================================
        Guide: CTA
==========================================*/

.guide-cta.pb-80{
    padding-bottom:90px;
}

.guide-cta-box{
    background:#101fae;
    border-radius:18px;
    text-align:center;
    padding:54px 30px;
}

.guide-cta-box h2{
    font-family:'Sora',sans-serif;
    font-size:32px;
    font-weight:800;
    color:#fff;
    margin-bottom:14px;
}

.guide-cta-box p{
    color:rgba(255,255,255,.8);
    font-size:16px;
    line-height:1.7;
    max-width:560px;
    margin:0 auto 28px;
}

.guide-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#f97316;
    color:#fff;
    padding:15px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    transition:.3s;
}

.guide-cta-btn:hover{
    background:#ea6a0c;
    color:#fff;
    transform:translateY(-2px);
}

/*==========================================
        Guide: Responsive
==========================================*/
@media(max-width:768px){

.guide-step{
    padding:18px;
}

.guide-cta-box{
    padding:40px 20px;
}

.guide-cta-box h2{
    font-size:25px;
}

.guide-faq summary{
    font-size:15px;
    padding:16px 18px;
}

.guide-faq p{
    padding:16px 18px;
}
}


/*==========================================
        Cloud vs Shared vs VPS
==========================================*/

.vsx-quickanswer{
    background:#f4f6fb;
    border:1px solid #e2e8f4;
    border-left:6px solid #1d33c9;
    border-radius:14px;
    padding:28px 32px;
}

.vsx-quickanswer h2{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:12px;
}

.vsx-quickanswer p{
    color:#475569;

    font-size:15.5px;
    line-height:1.85;
    margin-bottom:0;
}

.vsx-quickanswer p a{
    color:#1d33c9;
    font-weight:600;
}

/*==========================================
        VSX: Type cards
==========================================*/

.vsx-type-list{
    margin-top:24px;
}

.vsx-type-card{
    background:#fff;
    border:1px solid #e2e8f4;
    border-radius:14px;
    padding:28px;
    margin-bottom:20px;
}

.vsx-type-card:last-child{

    margin-bottom:0;
}

.vsx-type-card h3{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:12px;
}

.vsx-type-card > p{
    color:#475569;
    font-size:15px;
    line-height:1.8;
    margin-bottom:20px;
}

.vsx-type-notes{
    display:flex;
    gap:16px;
}

.vsx-note{
    flex:1;
    border-radius:10px;
    padding:14px 18px;
    font-size:14px;
    line-height:1.7;
}

.vsx-note strong{
    display:block;
    margin-bottom:2px;
}

.vsx-note--best{
    background:#eafbf1;
    border:1px solid #bfe9d1;
    color:#166534;
}

.vsx-note--watch{
    background:#fdeeee;
    border:1px solid #f7cccb;
    color:#9f1c1c;
}

/*==========================================
        VSX: Choose persona cards
==========================================*/

.vsx-choose-card{
    background:#f6f8fd;
    border:1px solid #e9edf6;
    border-radius:12px;
    padding:24px;
}

.vsx-choose-eyebrow{
    color:#8a94b8;
    font-size:13.5px;
    margin-bottom:8px;
}

.vsx-choose-answer{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    color:#1d33c9;
    margin-bottom:10px;
}

.vsx-choose-text{
    color:#475569;
    font-size:14.5px;
    line-height:1.8;
    margin-bottom:0;
}

/*==========================================
        VSX: Responsive
==========================================*/
@media(max-width:768px){
.vsx-quickanswer{
    padding:22px;
}
.vsx-type-card{
    padding:22px;
}
.vsx-type-notes{
    flex-direction:column;
}
}