/* wwwroot/css/pricing.css */

:root {
    --pr_bg: #050a12;
    --pr_bg2: #070f1b;
    --pr_card: rgba(255, 255, 255, 0.06);
    --pr_card2: rgba(255, 255, 255, 0.085);
    --pr_border: rgba(255, 255, 255, 0.10);
    --pr_border2: rgba(255, 255, 255, 0.14);
    --pr_text: rgba(255, 255, 255, 0.92);
    --pr_text_soft: rgba(255, 255, 255, 0.74);
    --pr_text_softer: rgba(255, 255, 255, 0.60);
    --pr_brand: #2fc7ff;
    --pr_brand2: #6ee7ff;
    --pr_accent: #ffd66e;
    --pr_shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
    --pr_radius: 22px;
    --pr_radius_sm: 16px;
}

.pricingHero {
    position: relative;
    background: radial-gradient(1200px 500px at 20% 20%, rgba(47, 199, 255, 0.18), rgba(0, 0, 0, 0)), radial-gradient(900px 380px at 70% 10%, rgba(255, 214, 110, 0.12), rgba(0, 0, 0, 0)), linear-gradient(180deg, #061526 0%, var(--pr_bg) 60%, var(--pr_bg) 100%);
    padding: 96px 0 56px 0;
    overflow: hidden;
}

.pricingHeroBg {
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 400px at 30% 30%, rgba(0, 180, 255, 0.10), rgba(0, 0, 0, 0));
    filter: blur(0px);
    opacity: 1;
    pointer-events: none;
}

.pricingHeroOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(5, 10, 18, 0.55) 70%, rgba(5, 10, 18, 0.9) 100%);
    pointer-events: none;
}

.pricingHeroInner {
    position: relative;
    z-index: 2;
}

.pricingHeroGrid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items: stretch;
}

.pricingHeroText {
    min-width: 0;
}

.pricingBadge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.86);
    font-weight: 800;
    letter-spacing: 0.2px;
    width: fit-content;
}

.pricingTitle {
    margin: 18px 0 14px 0;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.6px;
    color: var(--pr_text);
}

.pricingTitleLine {
    display: block;
    font-size: clamp(32px, 4vw, 54px);
}

.pricingTitleAccent {
    background: linear-gradient(90deg, var(--pr_brand2), var(--pr_brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pricingTitleSoft {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 900;
}

.pricingSub {
    margin: 0;
    color: var(--pr_text_soft);
    font-size: 16px;
    line-height: 1.6;
    max-width: 62ch;
}

.pricingHeroActions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pricingBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.2px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
    user-select: none;
    min-width: 180px;
    cursor: pointer;
}

.pricingBtnPrimary {
    background: linear-gradient(90deg, rgba(47, 199, 255, 0.95), rgba(0, 180, 255, 0.95));
    color: #041019;
    box-shadow: 0 14px 40px rgba(0, 180, 255, 0.22);
}

.pricingBtnGhost {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.90);
    border-color: rgba(255, 255, 255, 0.12);
}

.pricingBtn:hover {
    transform: translateY(-1px);
}

.pricingBtn:active {
    transform: translateY(0);
}

.pricingNote {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    width: fit-content;
}

.pricingNoteDot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 214, 110, 0.95);
    box-shadow: 0 0 0 6px rgba(255, 214, 110, 0.12);
}

.pricingHeroCard {
    border-radius: var(--pr_radius);
    background: radial-gradient(400px 220px at 20% 10%, rgba(47, 199, 255, 0.10), rgba(0, 0, 0, 0)), radial-gradient(320px 200px at 70% 0%, rgba(255, 214, 110, 0.10), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--pr_shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pricingHeroCardTop {
    padding: 8px 6px 12px 6px;
}

.pricingHeroCardTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    letter-spacing: -0.1px;
}

.pricingHeroCardDesc {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.6;
    font-weight: 800;
}

.pricingHeroCardList {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    padding: 12px 6px 6px 6px;
}

.pricingHeroCardItem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pricingIcon {
    width: 24px;
    height: 24px;
    border-radius: 10px;
    background: rgba(47, 199, 255, 0.14);
    border: 1px solid rgba(47, 199, 255, 0.20);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.90);
    font-weight: 900;
    flex: 0 0 auto;
}

.pricingHeroCardItemText {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.55;
}

.pricingHeroCardFooter {
    margin-top: auto;
    padding: 14px 6px 6px 6px;
}

.pricingInlineLink {
    color: rgba(124, 243, 255, 0.92);
    font-weight: 900;
    text-decoration: none;
}

    .pricingInlineLink:hover {
        text-decoration: underline;
    }

.pricingMain {
    background: linear-gradient(180deg, var(--pr_bg) 0%, var(--pr_bg2) 60%, #04070d 100%);
    padding: 28px 0 84px 0;
}

.pricingSection {
    padding: 56px 0;
}

.pricingSectionAlt {
    padding: 62px 0;
}

.pricingSectionHead {
    margin-bottom: 22px;
}

.pricingH2 {
    margin: 0;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.94);
    font-size: 28px;
    letter-spacing: -0.2px;
}

.pricingLead {
    margin: 10px 0 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
    line-height: 1.6;
    max-width: 82ch;
}

.pricingGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.planCard {
    position: relative;
    border-radius: var(--pr_radius);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--pr_shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.planCardFeatured {
    background: radial-gradient(420px 240px at 20% 0%, rgba(47, 199, 255, 0.12), rgba(0, 0, 0, 0)), radial-gradient(520px 260px at 70% 0%, rgba(255, 214, 110, 0.12), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.05);
    border-color: rgba(124, 243, 255, 0.22);
}

.planRibbon {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 214, 110, 0.14);
    border: 1px solid rgba(255, 214, 110, 0.20);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.planTop {
    padding: 6px 6px 12px 6px;
}

.planName {
    font-weight: 900;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: -0.2px;
}

.planDesc {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.70);
    font-weight: 800;
    line-height: 1.6;
}

.planPriceBox {
    margin-top: 10px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px;
}

.planRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.planLabel {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 900;
}

.planValue {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.2px;
}

.planDivider {
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
    margin: 8px 0;
}

.planFootnote {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 800;
    line-height: 1.5;
    font-size: 13px;
}

.planBullets {
    margin-top: 14px;
    padding: 0 6px;
    display: grid;
    gap: 10px;
}

.planBullet {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.55;
}

.planDot {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    margin-top: 6px;
    background: rgba(47, 199, 255, 0.9);
    box-shadow: 0 0 0 6px rgba(47, 199, 255, 0.10);
    flex: 0 0 auto;
}

.planCtas {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pricingFinePrint {
    margin-top: 18px;
}

.finePrintCard {
    border-radius: var(--pr_radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 16px;
}

.finePrintTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
}

.finePrintText {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.70);
    font-weight: 800;
    line-height: 1.6;
}

/* Monthly care block */

.pricingCare {
    position: relative;
    overflow: hidden;
}

.careGrid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 14px;
}

.careCard {
    border-radius: var(--pr_radius);
    background: radial-gradient(520px 220px at 20% 0%, rgba(47, 199, 255, 0.10), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 243, 255, 0.16);
    padding: 18px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.36);
    min-width: 0;
}

.careCardTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    letter-spacing: -0.1px;
}

.careCardText {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
    font-weight: 800;
    max-width: 70ch;
}

.careList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.careItem {
    border-radius: var(--pr_radius);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    min-width: 0;
}

.careItemTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    letter-spacing: -0.1px;
}

.careItemText {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.6;
    font-weight: 800;
}

/* Image break section */

.pricingImageBreak {
    position: relative;
    overflow: hidden;
}

.imageBreakGrid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 14px;
}

.imageBreakTextCard {
    border-radius: var(--pr_radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 18px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.30);
    min-width: 0;
}

.imageBreakKicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 214, 110, 0.12);
    border: 1px solid rgba(255, 214, 110, 0.18);
    color: rgba(255, 255, 255, 0.90);
    font-weight: 900;
    letter-spacing: 0.2px;
    width: fit-content;
}

.imageBreakHeading {
    margin: 14px 0 0 0;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.94);
    font-size: 22px;
    letter-spacing: -0.2px;
}

.imageBreakText {
    margin: 10px 0 0 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
    font-weight: 800;
    max-width: 72ch;
}

.imageBreakMicros {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.imageMicro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.55;
}

.imageMicroDot {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    margin-top: 6px;
    background: rgba(255, 214, 110, 0.95);
    box-shadow: 0 0 0 6px rgba(255, 214, 110, 0.10);
    flex: 0 0 auto;
}

.imageBreakMediaCard {
    border-radius: var(--pr_radius);
    background: radial-gradient(520px 220px at 20% 0%, rgba(255, 214, 110, 0.10), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 18px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.34);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.imageBreakMedia {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.22);
}

    .imageBreakMedia img {
        width: 100%;
        height: auto;
        display: block;
    }

.imageBreakCaption {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 800;
    line-height: 1.55;
    font-size: 13px;
}

/* Included section grid */

.includedGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.includedCard {
    border-radius: var(--pr_radius);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    min-width: 0;
}

.includedTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    letter-spacing: -0.1px;
}

.includedText {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.6;
    font-weight: 800;
}

.includedNote {
    margin-top: 18px;
}

.includedNoteCard {
    border-radius: var(--pr_radius);
    background: radial-gradient(520px 220px at 20% 0%, rgba(47, 199, 255, 0.10), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 243, 255, 0.16);
    padding: 16px;
    min-width: 0;
}

.includedNoteTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
}

.includedNoteText {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    font-weight: 800;
}

/* FAQ */

.faqList {
    border-radius: var(--pr_radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.faqItem {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.faqQ {
    color: rgba(255, 255, 255, 0.90);
    font-weight: 900;
}

.faqIco {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(47, 199, 255, 0.12);
    border: 1px solid rgba(47, 199, 255, 0.20);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
    flex: 0 0 auto;
}

.faqA {
    padding: 0 16px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faqAText {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
    font-weight: 800;
}

/* CTA */

.pricingCtaBox {
    margin-top: 22px;
    border-radius: var(--pr_radius);
    background: radial-gradient(520px 220px at 20% 0%, rgba(255, 214, 110, 0.12), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pricingCtaText {
    min-width: 0;
}

.pricingCtaTitle {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    letter-spacing: -0.1px;
}

.pricingCtaSub {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
    line-height: 1.6;
}

/* Reveal */

.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms ease, transform 420ms ease;
}

    .reveal.isVisible {
        opacity: 1;
        transform: translateY(0);
    }

/* Responsive */

@media (max-width: 1199px) {
    .includedGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .pricingHero {
        padding: 86px 0 46px 0;
    }

    .pricingHeroGrid {
        grid-template-columns: 1fr;
    }

    .pricingBtn {
        min-width: 0;
        width: 100%;
    }

    .pricingGrid {
        grid-template-columns: 1fr;
    }

    .careGrid {
        grid-template-columns: 1fr;
    }

    .careList {
        grid-template-columns: 1fr;
    }

    .imageBreakGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .pricingSection {
        padding: 46px 0;
    }

    .includedGrid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricingBtn,
    .reveal {
        transition: none !important;
    }
}

/* Pricing image block, responsive, add this near the end of pricing.css */

.pricingImageBlock {
    border-radius: var(--pr_radius);
    background: radial-gradient(520px 220px at 20% 0%, rgba(47, 199, 255, 0.10), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 243, 255, 0.16);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.pricingImageGrid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: stretch;
    padding: 18px;
}

.pricingImageText {
    padding: 6px 6px 6px 6px;
}

.pricingImageKicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 214, 110, 0.10);
    border: 1px solid rgba(255, 214, 110, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
    letter-spacing: 0.2px;
    width: fit-content;
}

.pricingH3 {
    margin: 14px 0 10px 0;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.94);
    font-size: 20px;
    letter-spacing: -0.2px;
    line-height: 1.25;
}

.pricingP {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
    line-height: 1.65;
    max-width: 70ch;
}

.pricingMicroList {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.pricingMicroItem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.55;
}

.pricingMicroDot {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    margin-top: 7px;
    background: rgba(255, 214, 110, 0.95);
    box-shadow: 0 0 0 6px rgba(255, 214, 110, 0.10);
    flex: 0 0 auto;
}

.pricingFigure {
    margin: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pricingFigureImg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: cover;
    object-position: center;
}

.pricingFigureCap {
    padding: 12px 12px;
    color: rgba(255, 255, 255, 0.66);
    font-weight: 800;
    line-height: 1.5;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* Medium screens, keep it balanced */
@media (max-width: 991px) {
    .pricingImageGrid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .pricingFigureImg {
        max-height: 320px;
    }
}

/* Small screens, fully responsive, no oversized image */
@media (max-width: 575px) {
    .pricingImageGrid {
        gap: 14px;
        padding: 14px;
    }

    .pricingH3 {
        font-size: 18px;
    }

    .pricingFigureImg {
        max-height: 240px;
    }

    .pricingImageKicker {
        width: 100%;
        justify-content: center;
    }
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: reduce) {
    .pricingImageBlock {
        scroll-behavior: auto;
    }
}