/*
 * CHEAPER SOLUTIONS
 * Final public landing-page presentation layer.
 *
 * This replaces the temporary rendering/hero/calculator repair layers.
 * Calculator logic is unaffected.
 */

/* ============================================================
   GLOBAL PAGE RHYTHM
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background: #070709;
    color: #ffffff;
}

.cs-container {
    width: min(1220px, calc(100% - 48px));
    margin-inline: auto;
}

.cs-section {
    padding: 82px 0;
}

.cs-section-heading {
    max-width: 720px;
}

.cs-section-heading.center {
    margin-inline: auto;
    text-align: center;
}

.cs-eyebrow {
    color: #ff2bd6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.2;
}

.cs-section-heading h2,
.cs-business-section h2,
.cs-independent-section h2,
.cs-cta h2,
.cs-faq h2 {
    margin: 10px 0 0;
    color: #ffffff;
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

.cs-section-heading p {
    margin: 17px 0 0;
    color: rgba(255,255,255,0.62);
    font-size: 1rem;
    line-height: 1.7;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.cs-nav {
    background: rgba(7,7,9,0.96);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cs-brand {
    color: #ffffff;
}

.cs-brand span,
.cs-brand strong {
    color: #ffffff;
}

.cs-nav a {
    text-decoration: none;
}

.cs-nav-cta {
    background: #ff2bd6;
    color: #08080a !important;
    border-radius: 6px;
    font-weight: 800;
}


/* ============================================================
   HERO
   ============================================================ */

.cs-hero-redesigned {
    padding: 78px 0 72px;
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255,43,214,0.095),
            transparent 34%
        ),
        #070709;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cs-hero-redesigned-inner {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(390px,0.95fr);
    align-items: center;
    gap: 64px;
}

.cs-hero-copy {
    max-width: 680px;
}

.cs-hero-redesigned .cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 19px;
}

.cs-hero-redesigned .cs-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: #ff2bd6;
}

.cs-hero-redesigned h1 {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.cs-hero-lead {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(255,255,255,0.88);
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    line-height: 1.55;
}

.cs-hero-supporting {
    max-width: 610px;
    margin: 14px 0 0;
    color: rgba(255,255,255,0.60);
    font-size: 0.96rem;
    line-height: 1.65;
}

.cs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.cs-hero-redesigned .cs-button {
    min-height: 50px;
    padding: 0 21px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 800;
}

.cs-hero-redesigned .cs-button-primary {
    background: #ff2bd6;
    border: 1px solid #ff2bd6;
    color: #08080a;
}

.cs-hero-redesigned .cs-button-secondary {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
}

.cs-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 23px;
    margin-top: 23px;
}

.cs-hero-points > div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,0.58);
    font-size: 0.8rem;
    font-weight: 600;
}

.cs-hero-points > div > span:first-child {
    color: #ff2bd6;
    font-weight: 900;
}

.cs-hero-product {
    display: flex;
    justify-content: center;
}

.cs-product-frame {
    width: min(100%, 500px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.07),
        rgba(255,255,255,0.025)
    );
    box-shadow:
        0 25px 70px rgba(0,0,0,0.45),
        0 0 65px rgba(255,43,214,0.06);
}

.cs-product-frame-top {
    min-height: 45px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.54);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.cs-product-frame-top > span:last-child {
    color: #ff2bd6;
}

.cs-product-image {
    min-height: 350px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.055),
        transparent 68%
    );
}

.cs-product-image img {
    display: block;
    width: 100%;
    height: 310px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 22px 28px rgba(0,0,0,0.45));
}

.cs-product-caption {
    padding: 17px 20px 19px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.cs-product-caption strong {
    color: #ffffff;
    font-size: 0.9rem;
}

.cs-product-caption span {
    color: rgba(255,255,255,0.52);
    font-size: 0.76rem;
    line-height: 1.5;
}


/* ============================================================
   TRUST STRIP
   ============================================================ */

.cs-trust {
    padding: 21px 0;
    background: #0b0b0e;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cs-trust .cs-container {
    display: flex;
    justify-content: center;
}

.cs-trust > .cs-container > * {
    margin: 0;
}

.cs-trust-lead {
    color: rgba(255,255,255,0.62);
}


/* ============================================================
   PROBLEM / HOW IT WORKS
   ============================================================ */

.cs-problem-section {
    padding-top: 76px;
    padding-bottom: 68px;
}

.cs-problem-section p,
.cs-how-section p {
    color: rgba(255,255,255,0.64);
    line-height: 1.7;
}

.cs-how-section {
    padding-top: 68px;
    padding-bottom: 76px;
    background: #0a0a0d;
}

.cs-how-section .cs-section-heading {
    margin-bottom: 35px;
}

.cs-step-grid,
.cs-steps {
    gap: 18px;
}

.cs-step {
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
}

.cs-step-number {
    color: #ff2bd6;
}

.cs-step h3 {
    margin: 12px 0 0;
    color: #ffffff;
}

.cs-step p {
    margin-top: 9px;
}


/* ============================================================
   CALCULATOR
   ============================================================ */

.cs-calculator-enhanced {
    padding: 78px 0 82px;
    background: #070709;
}

.cs-calculator-enhanced .cs-section-heading {
    margin-bottom: 31px;
}

.cs-calculator-enhanced .cs-calculator-intro {
    gap: 12px;
}

.cs-calculator-enhanced .cs-calculator-intro > div {
    padding: 0;
}

.cs-calculator-enhanced .cs-calculator-card {
    border-radius: 14px;
}

.cs-calculator-enhanced .cs-form-group {
    margin-bottom: 20px;
}

.cs-calculator-enhanced .cs-form-group > label {
    color: #ffffff;
    font-weight: 750;
}

.cs-calculator-enhanced .cs-form-group > small {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,0.48);
    line-height: 1.5;
}

.cs-calculator-enhanced .cs-input-wrap {
    margin-top: 8px;
}

.cs-calculator-enhanced .cs-calculate-button {
    margin-top: 5px;
}

.cs-calculator-enhanced .cs-form-reassurance {
    margin-top: 12px;
    color: rgba(255,255,255,0.48);
}

.cs-calculator-enhanced .cs-calculator-result {
    margin-top: 22px;
}

.cs-calculator-enhanced .cs-calculator-card-heading {
    margin-bottom: 25px;
}


/* ============================================================
   BENEFITS
   ============================================================ */

.cs-benefits-enhanced {
    padding: 78px 0 82px;
    background: #0a0a0d;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.cs-benefits-enhanced .cs-section-heading {
    margin-bottom: 32px;
}

.cs-benefit-grid {
    gap: 18px;
}

.cs-benefit {
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
}

.cs-benefit-icon {
    margin-bottom: 17px;
    color: #ff2bd6;
}

.cs-benefit h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.08rem;
}

.cs-benefit p {
    margin: 10px 0 0;
    color: rgba(255,255,255,0.58);
    line-height: 1.65;
}


/* ============================================================
   SECTORS
   ============================================================ */

.cs-business-section {
    padding: 78px 0 76px;
}

.cs-business-section > .cs-container > p {
    max-width: 720px;
    margin-top: 17px;
    color: rgba(255,255,255,0.62);
    line-height: 1.7;
}

.cs-business-list {
    margin-top: 29px;
}

.cs-business-list > * {
    border-color: rgba(255,255,255,0.08);
}


/* ============================================================
   INDEPENDENT POSITIONING
   ============================================================ */

.cs-independent-section {
    padding: 76px 0;
    background: #0a0a0d;
}

.cs-independent-section p {
    max-width: 720px;
    margin-top: 17px;
    color: rgba(255,255,255,0.62);
    line-height: 1.7;
}

.cs-independent-section .cs-primary-button {
    margin-top: 25px;
}


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

.cs-cta-enhanced {
    padding: 72px 0;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255,43,214,0.10),
            transparent 48%
        ),
        #070709;
}

.cs-cta-enhanced h2 {
    max-width: 700px;
}

.cs-cta-enhanced p {
    max-width: 650px;
    margin-top: 14px;
    color: rgba(255,255,255,0.62);
    line-height: 1.7;
}

.cs-cta-enhanced .cs-primary-button {
    margin-top: 24px;
}


/* ============================================================
   FAQ
   ============================================================ */

.cs-faq {
    padding: 76px 0 82px;
    background: #0a0a0d;
}

.cs-faq > .cs-container > p {
    max-width: 680px;
    margin-top: 15px;
    color: rgba(255,255,255,0.60);
    line-height: 1.65;
}

.cs-faq-list {
    margin-top: 30px;
}

.cs-faq-item {
    border-color: rgba(255,255,255,0.08);
}

.cs-faq-question {
    color: #ffffff;
}

.cs-faq-answer {
    color: rgba(255,255,255,0.60);
    line-height: 1.65;
}


/* ============================================================
   FOOTER
   ============================================================ */

.cs-footer {
    padding: 45px 0 32px;
    background: #050507;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.cs-footer p {
    color: rgba(255,255,255,0.48);
}


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

@media (max-width: 1000px) {

    .cs-hero-redesigned {
        padding: 64px 0;
    }

    .cs-hero-redesigned-inner {
        grid-template-columns: 1fr;
        gap: 43px;
    }

    .cs-hero-copy {
        max-width: 760px;
    }

    .cs-hero-product {
        justify-content: flex-start;
    }

    .cs-product-frame {
        max-width: 600px;
    }

    .cs-section {
        padding: 68px 0;
    }
}


@media (max-width: 640px) {

    .cs-container {
        width: min(100% - 30px, 1220px);
    }

    .cs-section {
        padding: 56px 0;
    }

    .cs-hero-redesigned {
        padding: 52px 0 56px;
    }

    .cs-hero-redesigned h1 {
        font-size: clamp(2.65rem, 13vw, 4rem);
    }

    .cs-hero-lead {
        margin-top: 20px;
        font-size: 1.05rem;
    }

    .cs-hero-supporting {
        font-size: 0.91rem;
    }

    .cs-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-hero-redesigned .cs-button {
        width: 100%;
    }

    .cs-hero-points {
        display: grid;
        gap: 10px;
    }

    .cs-product-frame {
        border-radius: 12px;
    }

    .cs-product-image {
        min-height: 270px;
        padding: 20px;
    }

    .cs-product-image img {
        height: 240px;
    }

    .cs-product-caption {
        padding: 15px 17px 17px;
    }

    .cs-section-heading h2,
    .cs-business-section h2,
    .cs-independent-section h2,
    .cs-cta h2,
    .cs-faq h2 {
        font-size: 2rem;
    }

    .cs-benefit,
    .cs-step {
        padding: 22px;
    }

    .cs-calculator-enhanced,
    .cs-benefits-enhanced {
        padding: 60px 0;
    }
}


/* ============================================================
   FINAL CALCULATOR — DEFINITIVE PUBLIC PRESENTATION
   ============================================================ */

.cs-calculator-enhanced {
    position: relative;
    padding: 96px 0 104px !important;
    background:
        radial-gradient(
            circle at 14% 50%,
            rgba(255, 43, 214, 0.055),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #070709 0%,
            #09090c 100%
        ) !important;
    border-top: 1px solid rgba(255,255,255,0.055);
    border-bottom: 1px solid rgba(255,255,255,0.055);
}

.cs-calculator-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(430px, 0.88fr) !important;
    align-items: center !important;
    gap: clamp(50px, 7vw, 105px) !important;
}

/* -------------------------
   LEFT HAND COPY
   ------------------------- */

.cs-calculator-copy {
    max-width: 620px;
}

.cs-calculator-copy .cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #ff2bd6 !important;
    font-size: 0.70rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    line-height: 1.2;
}

.cs-calculator-copy .cs-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    flex: 0 0 22px;
    background: #ff2bd6;
}

.cs-calculator-copy h2 {
    margin: 0 !important;
    max-width: 650px;
    color: #ffffff !important;
    font-size: clamp(2.35rem, 4vw, 3.65rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.02 !important;
}

.cs-calculator-copy > p {
    max-width: 570px;
    margin: 21px 0 0 !important;
    color: rgba(255,255,255,0.64) !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
}

/* -------------------------
   BENEFIT / REASSURANCE LIST
   ------------------------- */

.cs-calculator-benefits {
    display: grid !important;
    gap: 15px !important;
    margin-top: 32px !important;
}

.cs-calculator-benefits > div {
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 13px !important;
    align-items: start !important;
}

.cs-calculator-benefits > div > span {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    margin-top: 1px;
    border: 1px solid rgba(255,43,214,0.24) !important;
    border-radius: 50% !important;
    background: rgba(255,43,214,0.08) !important;
    color: #ff2bd6 !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
}

.cs-calculator-benefits strong {
    display: block !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.91rem !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

.cs-calculator-benefits small {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(255,255,255,0.47) !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}

/* -------------------------
   CALCULATOR CARD
   ------------------------- */

.cs-calculator-card {
    position: relative;
    width: 100%;
    padding: 34px !important;
    border: 1px solid rgba(255,255,255,0.105) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.065),
            rgba(255,255,255,0.025)
        ) !important;
    box-shadow:
        0 28px 80px rgba(0,0,0,0.42),
        0 0 70px rgba(255,43,214,0.045) !important;
    color: #ffffff !important;
}

.cs-calculator-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(
        90deg,
        transparent,
        #ff2bd6 22%,
        #ff2bd6 78%,
        transparent
    );
    opacity: 0.9;
}

/* -------------------------
   CARD HEADING
   ------------------------- */

.cs-calculator-card-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin: 0 0 29px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.075);
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.66rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
}

.cs-calculator-card-heading span:first-child {
    color: rgba(255,255,255,0.62) !important;
}

.cs-calculator-card-heading span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 9px !important;
    border: 1px solid rgba(255,43,214,0.24);
    border-radius: 999px !important;
    background: rgba(255,43,214,0.075) !important;
    color: #ff2bd6 !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.08em !important;
}

/* -------------------------
   FORM
   ------------------------- */

.cs-calculator-card form {
    margin: 0;
}

.cs-form-group {
    margin-bottom: 25px !important;
}

.cs-form-group > label {
    display: block !important;
    margin: 0 0 9px !important;
    color: rgba(255,255,255,0.90) !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

.cs-form-group > small {
    display: block !important;
    margin-top: 8px !important;
    color: rgba(255,255,255,0.40) !important;
    font-size: 0.73rem !important;
    line-height: 1.5 !important;
}

/* -------------------------
   TURNOVER INPUT
   ------------------------- */

.cs-input-wrap {
    position: relative !important;
    margin-top: 0 !important;
}

.cs-input-wrap > span {
    position: absolute !important;
    z-index: 2;
    left: 19px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ff2bd6 !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    pointer-events: none;
}

.cs-input-wrap input,
.cs-calculator-card input[type="text"],
.cs-calculator-card input[type="number"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 64px !important;
    padding: 0 18px 0 47px !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 10px !important;
    outline: none !important;
    background: #0c0c10 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font: inherit !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease !important;
}

.cs-input-wrap input::placeholder,
.cs-calculator-card input::placeholder {
    color: rgba(255,255,255,0.27) !important;
    opacity: 1 !important;
}

.cs-input-wrap input:hover {
    border-color: rgba(255,255,255,0.20) !important;
}

.cs-input-wrap input:focus,
.cs-calculator-card input[type="text"]:focus,
.cs-calculator-card input[type="number"]:focus {
    border-color: rgba(255,43,214,0.72) !important;
    background: #0e0e12 !important;
    box-shadow:
        0 0 0 3px rgba(255,43,214,0.10),
        inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* -------------------------
   FREQUENCY SELECTOR
   ------------------------- */

.cs-frequency {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 11px !important;
    background: #0b0b0e !important;
}

.cs-frequency > label {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    cursor: pointer;
}

.cs-frequency > label > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cs-frequency > label > span {
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    color: rgba(255,255,255,0.48) !important;
    background: transparent !important;
    font-size: 0.80rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    transition: all 160ms ease !important;
}

.cs-frequency > label:hover > span {
    color: rgba(255,255,255,0.78) !important;
    background: rgba(255,255,255,0.035) !important;
}

.cs-frequency > label > input:checked + span {
    border-color: rgba(255,43,214,0.30) !important;
    background: rgba(255,43,214,0.105) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255,43,214,0.08) !important;
}

.cs-frequency > label > input:focus-visible + span {
    outline: 2px solid rgba(255,43,214,0.70);
    outline-offset: 2px;
}

/* -------------------------
   PRIMARY CALCULATE BUTTON
   ------------------------- */

.cs-calculate-button {
    width: 100% !important;
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    margin: 4px 0 0 !important;
    padding: 0 22px !important;
    border: 1px solid #ff2bd6 !important;
    border-radius: 9px !important;
    background: #ff2bd6 !important;
    color: #08080a !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 0.91rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 28px rgba(255,43,214,0.12) !important;
    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease !important;
}

.cs-calculate-button span {
    font-size: 1.05rem;
    transition: transform 160ms ease;
}

.cs-calculate-button:hover {
    background: #ff5be0 !important;
    box-shadow: 0 13px 34px rgba(255,43,214,0.18) !important;
    transform: translateY(-1px);
}

.cs-calculate-button:hover span {
    transform: translateX(3px);
}

.cs-calculate-button:active {
    transform: translateY(0);
}

.cs-calculate-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* -------------------------
   REASSURANCE
   ------------------------- */

.cs-form-reassurance {
    margin: 13px 0 0 !important;
    color: rgba(255,255,255,0.37) !important;
    font-size: 0.67rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* -------------------------
   RESULT CONTAINER
   ------------------------- */

.cs-calculator-result {
    margin-top: 22px !important;
    color: #ffffff !important;
}

.cs-calculator-loading {
    padding: 21px;
    border: 1px solid rgba(255,43,214,0.20);
    border-radius: 11px;
    background: rgba(255,43,214,0.055);
    color: rgba(255,255,255,0.72);
    font-size: 0.84rem;
    font-weight: 650;
    text-align: center;
}

.cs-calculator-error {
    display: block !important;
    padding: 18px !important;
    border: 1px solid rgba(255,90,90,0.24) !important;
    border-radius: 11px !important;
    background: rgba(255,70,70,0.055) !important;
    color: rgba(255,255,255,0.82) !important;
}

.cs-calculator-error strong {
    display: block;
    margin-bottom: 5px;
    color: #ff8b8b !important;
    font-size: 0.84rem;
}

.cs-calculator-error p {
    margin: 0;
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.77rem;
    line-height: 1.5;
}

/* -------------------------
   RESULT PANEL
   ------------------------- */

.cs-result-header {
    padding: 22px 22px 19px;
    border: 1px solid rgba(255,43,214,0.18);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background:
        linear-gradient(
            145deg,
            rgba(255,43,214,0.095),
            rgba(255,255,255,0.025)
        );
}

.cs-result-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ff2bd6 !important;
    font-size: 0.61rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2;
}

.cs-result-header h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
}

.cs-result-header p {
    margin: 9px 0 0 !important;
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.76rem !important;
    line-height: 1.55 !important;
}

.cs-result-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 1px !important;
    overflow: hidden;
    border: 1px solid rgba(255,43,214,0.18);
    border-radius: 0 0 12px 12px;
    background: rgba(255,255,255,0.07);
}

.cs-result-grid > div {
    min-width: 0;
    padding: 17px 14px;
    background: #0c0c10;
}

.cs-result-grid > div > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,0.40) !important;
    font-size: 0.64rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

.cs-result-grid > div > strong {
    display: block;
    color: #ffffff !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    white-space: nowrap;
}

.cs-result-disclaimer {
    display: block;
    margin-top: 12px !important;
    color: rgba(255,255,255,0.34) !important;
    font-size: 0.65rem !important;
    line-height: 1.5 !important;
}

/* -------------------------
   MOBILE
   ------------------------- */

@media (max-width: 1000px) {

    .cs-calculator-enhanced {
        padding: 76px 0 82px !important;
    }

    .cs-calculator-layout {
        grid-template-columns: 1fr !important;
        gap: 46px !important;
    }

    .cs-calculator-copy {
        max-width: 760px;
    }

    .cs-calculator-card {
        max-width: 680px;
    }

}

@media (max-width: 640px) {

    .cs-calculator-enhanced {
        padding: 60px 0 68px !important;
    }

    .cs-calculator-layout {
        gap: 35px !important;
    }

    .cs-calculator-copy h2 {
        font-size: clamp(2.05rem, 10vw, 2.75rem) !important;
    }

    .cs-calculator-card {
        padding: 23px !important;
        border-radius: 14px !important;
    }

    .cs-calculator-card-heading {
        margin-bottom: 24px !important;
    }

    .cs-result-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .cs-result-grid > div:last-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 420px) {

    .cs-calculator-card {
        padding: 19px !important;
    }

    .cs-result-grid {
        grid-template-columns: 1fr !important;
    }

    .cs-result-grid > div:last-child {
        grid-column: auto;
    }

}