:root {
    --offer-orange: #ec4899;
    --offer-orange-dark: #be185d;
    --offer-orange-soft: #fce7f3;
    --offer-green: #15803d;
    --offer-green-soft: #dcfce7;
    --urgency-bar-height: 46px;
}

html {
    scroll-padding-top: calc(var(--urgency-bar-height) + 1rem);
}

body.has-urgency-bar {
    padding-top: var(--urgency-bar-height);
}

.site-urgency-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: var(--urgency-bar-height);
    color: #fff;
    background: #e10600;
    border-bottom: 1px solid rgb(255 255 255 / 22%);
    box-shadow: 0 8px 24px -14px rgb(127 0 0 / 88%);
}

.site-urgency-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: min(100% - 24px, 880px);
    height: 100%;
    margin-inline: auto;
    align-items: center;
    gap: 10px;
}

.site-urgency-content p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: clamp(.68rem, 1.5vw, .78rem);
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-urgency-content p strong {
    font-weight: 950;
    letter-spacing: .01em;
}

.site-urgency-extra {
    color: rgb(255 255 255 / 82%);
    font-weight: 650;
}

.site-urgency-pulse {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 58%);
    animation: urgency-pulse 1.4s ease-out infinite;
}

.site-urgency-timer {
    display: flex;
    min-width: 106px;
    height: 32px;
    padding: 0 9px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #a90000;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(74 0 14 / 24%), inset 0 1px rgb(255 255 255 / 12%);
}

.site-urgency-timer small {
    font-size: .48rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.site-urgency-timer strong {
    min-width: 43px;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .025em;
}

@keyframes urgency-pulse {
    70%, 100% {
        box-shadow: 0 0 0 7px rgb(255 255 255 / 0%);
    }
}

@media (max-width: 640px) {
    :root {
        --urgency-bar-height: 54px;
    }

    .site-urgency-content {
        width: min(100% - 18px, 880px);
        gap: 7px;
    }

    .site-urgency-content p {
        font-size: .66rem;
        text-align: left;
        white-space: normal;
    }

    .site-urgency-extra {
        display: none;
    }

    .site-urgency-timer {
        min-width: 91px;
        height: 35px;
        padding-inline: 7px;
        gap: 5px;
    }

    .site-urgency-timer small {
        font-size: .43rem;
    }

    .site-urgency-timer strong {
        min-width: 40px;
        font-size: .86rem;
    }
}

main > section:not(:first-child),
main > footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

.text-orange-400 {
    color: #ec4899;
}

.hero-offer {
    background: linear-gradient(to bottom, #fce7f3 0%, #fdf2f8 42%, #ffffff 82%);
}

.hero-offer .hero-highlight {
    background: color-mix(in srgb, var(--offer-orange-soft) 88%, transparent);
}

.hero-offer .hero-accent,
.hero-offer .hero-step-icon,
.hero-offer .hero-arrow {
    color: var(--offer-orange-dark);
}

.hero-offer .hero-step {
    border-color: #fbcfe8;
}

.hero-video-label {
    margin: 0 auto;
    color: #334155;
    font-size: clamp(.95rem, 2.2vw, 1.08rem);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.hero-offer .hero-glow {
    background: rgb(236 72 153 / 22%);
}

.hero-deliverable {
    position: relative;
    width: min(calc(100% + 2rem), 32rem);
    max-width: none;
    margin-bottom: -1.5rem;
    isolation: isolate;
}

.hero-deliverable::before {
    position: absolute;
    inset: 18% 10% 12%;
    z-index: -1;
    content: "";
    background: radial-gradient(ellipse at center, rgb(244 114 182 / 22%), transparent 70%);
}

.preview-category-grid > div:nth-child(1),
.preview-category-grid > div:nth-child(2),
.preview-category-grid > div:nth-child(3),
.preview-category-grid > div:nth-child(4) {
    background: #f0fdfa;
    border-color: #6ee7b7;
}

.preview-category-grid img,
.material-gallery img {
    filter: saturate(.84) contrast(.98);
}

.material-heading {
    color: transparent;
    background: linear-gradient(90deg, #be185d, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 10px rgb(219 39 119 / 22%));
}

.testimonial-positive {
    color: transparent;
    background: linear-gradient(90deg, #0f766e 0%, #22c55e 48%, #14b8a6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 1px 1px rgb(15 118 110 / 18%))
        drop-shadow(0 0 7px rgb(34 197 94 / 30%));
}

.material-gallery {
    border-color: #fbcfe8;
    box-shadow: 0 24px 55px -34px rgb(219 39 119 / 32%);
}

.bg-pink-600 {
    background-color: #db2777;
}

.bg-pink-200 {
    background-color: #fbcfe8;
}

.hover\:bg-pink-300:hover {
    background-color: #f9a8d4;
}

.benefit-copy {
    background: linear-gradient(145deg, #cf6f7c, #a84e65);
    box-shadow: 0 24px 50px -25px rgb(168 78 101 / 52%);
}

.offer-overlap-mockup {
    position: relative;
    z-index: 1;
}

.offer-overlap {
    margin-top: -2.5rem;
}

.kit-reasons-section {
    position: relative;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 18%, rgb(255 228 230 / 68%), transparent 38%),
        linear-gradient(to bottom, #ffffff 0%, #fff4f5 48%, #ffffff 100%);
}

.kit-reasons-section .gradient-bar {
    background: linear-gradient(90deg, #c85a70, #f08a94);
    box-shadow: 0 4px 12px -5px rgb(200 90 112 / 48%);
}

.kit-reasons-section .preview-category-grid > div {
    background: #fffafa;
    border-color: #f3a6af;
    box-shadow: 0 12px 25px -20px rgb(200 90 112 / 42%);
}

.offer-overlap-card {
    margin-top: -14rem;
    padding-top: 14.75rem;
}

@media (max-width: 640px) {
    .offer-overlap-card {
        margin-top: -9.5rem;
        padding-top: 10.25rem;
    }
}

.faq-checkout-cta {
    min-height: 4.25rem;
    line-height: 1.15;
    letter-spacing: .035em;
    box-shadow:
        0 18px 35px -14px rgb(22 163 74 / 58%),
        0 0 0 1px rgb(255 255 255 / 18%) inset;
}

.faq-checkout-wrap {
    margin-top: 5rem;
}

.faq-checkout-cta:hover {
    transform: translateY(-2px) scale(1.01);
}

@media (max-width: 480px) {
    .faq-checkout-wrap {
        margin-top: 4rem;
    }

    .faq-checkout-cta {
        min-height: 4rem;
        padding-inline: 1.35rem;
        font-size: 1rem;
    }
}

.gradient-heading-blue {
    background: linear-gradient(90deg, #b84d66, #e87986);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgb(200 90 112 / 22%));
}

.bonus-section {
    background: linear-gradient(to bottom, #f8fafc, #f0fdf4);
}

.bonus-section .bonus-badge {
    color: #166534;
    background: var(--offer-green-soft);
    border-color: #bbf7d0;
}

.bonus-section .bonus-heading {
    color: transparent;
    background: linear-gradient(90deg, #128c7e, #25d366, #16a34a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 3px rgb(37 211 102 / 42%))
        drop-shadow(0 0 8px rgb(18 140 126 / 24%));
}

.bonus-section .bonus-title {
    color: #166534;
}

.bonus-section .bonus-preview {
    background: #f0fdf4;
}

.bonus-section .bonus-preview-transparent {
    background: transparent;
}

.bonus-free-badge {
    display: inline-flex;
    min-width: 7.5rem;
    min-height: 2.15rem;
    padding: .48rem 1.15rem;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    letter-spacing: .025em;
    box-shadow: 0 5px 12px -8px rgb(22 163 74 / 52%);
}

.bonus-price-anchor {
    max-width: 44rem;
    margin: .65rem auto 0;
    padding: .2rem 0 0;
    color: #334155;
    text-align: center;
}

.bonus-price-anchor > h3 {
    max-width: 42rem;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.bonus-price-anchor > h3 strong {
    color: #e00000;
    font-size: 1.08em;
}

.bonus-anchor-not-pay {
    margin: .55rem auto 0;
    color: #475569;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
}

.bonus-anchor-not-pay strong {
    color: #e00000;
    font-size: 1.08em;
    font-weight: 950;
}

.bonus-anchor-free {
    margin: .5rem auto 0;
    padding: 0;
}

.bonus-anchor-free small {
    display: block;
    color: #15803d;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .11em;
}

.bonus-anchor-free p {
    margin-top: .18rem;
    color: #14532d;
    font-size: .92rem;
    font-weight: 900;
}

.bonus-anchor-free strong {
    display: block;
    margin-top: .08rem;
    color: #16a34a;
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 1000;
    line-height: .95;
    letter-spacing: -.065em;
}

.bonus-anchor-free span {
    display: block;
    margin-top: .25rem;
    color: #15803d;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .07em;
}

.bonus-anchor-cta {
    display: flex;
    width: min(100%, 34rem);
    min-height: 4.25rem;
    margin: .7rem auto 0;
    padding: 1rem 1.4rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    font-weight: 950;
    letter-spacing: .025em;
    text-align: center;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-radius: 999px;
    box-shadow: 0 18px 36px -18px rgb(34 197 94 / 78%);
    transition: transform .2s ease, box-shadow .2s ease;
}

.bonus-anchor-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -18px rgb(34 197 94 / 85%);
}

@media (max-width: 640px) {
    .bonus-price-anchor {
        margin-top: .5rem;
        padding-top: 0;
    }

    .bonus-price-anchor > h3 {
        font-size: 1.28rem;
        line-height: 1.08;
    }

    .bonus-anchor-not-pay {
        margin-top: .45rem;
        font-size: .86rem;
    }

    .bonus-anchor-free {
        margin-top: .42rem;
    }

    .bonus-anchor-free small {
        font-size: .68rem;
        line-height: 1.4;
    }

    .bonus-anchor-free strong {
        font-size: clamp(3rem, 16vw, 4rem);
    }

    .bonus-anchor-free span {
        font-size: .61rem;
        line-height: 1.35;
    }

    .bonus-anchor-free p {
        font-size: .82rem;
    }

    .bonus-anchor-cta {
        min-height: 4rem;
        margin-top: .65rem;
        padding-inline: 1rem;
        font-size: .84rem;
    }
}

.pricing-section {
    background: linear-gradient(to bottom, #fdf2f8, #ffffff);
}

.pricing-section .pricing-heading {
    color: var(--offer-orange-dark);
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
}

.pricing-card-basic {
    border: 2px solid #f9a8d4;
    box-shadow: 0 18px 42px -30px rgb(190 24 93 / 38%);
}

.pricing-card-featured {
    background: linear-gradient(#fdf2f8, #ffffff);
    border: 2px solid var(--offer-orange);
    box-shadow: 0 26px 55px -28px rgb(190 24 93 / 48%);
}

.pricing-badge {
    background: linear-gradient(135deg, #be185d, #db2777, #ec4899);
    box-shadow: 0 10px 24px -12px rgb(190 24 93 / 65%);
}

.pricing-price-basic {
    color: #0f172a;
}

.pricing-price-featured {
    color: #16a34a;
}

.pricing-section .bonus-item,
.pricing-section .lucide-gift {
    color: var(--offer-green);
}

.guarantee-card {
    background: linear-gradient(145deg, #fdf2f8, #fce7f3);
    border-color: #f9a8d4;
    box-shadow: 0 26px 55px -30px rgb(190 24 93 / 45%);
}

.guarantee-icon {
    background: linear-gradient(135deg, #be185d, #db2777, #ec4899);
    box-shadow: 0 16px 30px -15px rgb(190 24 93 / 68%);
}

.guarantee-heading {
    color: transparent;
    background: linear-gradient(90deg, #9d174d, #db2777, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 10px rgb(219 39 119 / 25%));
}

.guarantee-bar {
    background: linear-gradient(90deg, #9d174d, #db2777, #f9a8d4);
}

body.upsell-open {
    overflow: hidden;
}

#basic-plan-buy {
    border: 0;
    cursor: pointer;
}

.upsell-overlay[hidden] {
    display: none;
}

.upsell-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgb(15 23 42 / 74%);
    backdrop-filter: blur(4px);
}

.upsell-modal {
    width: min(100%, 28rem);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgb(0 0 0 / 38%);
}

.upsell-header {
    position: relative;
    padding: 32px 24px 25px;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
    background:
        radial-gradient(circle at 86% 12%, rgb(255 255 255 / 16%), transparent 27%),
        linear-gradient(145deg, #ec4899 0%, #db2777 44%, #be185d 100%);
}

.upsell-close {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    width: 25px;
    height: 25px;
    padding: 0;
    place-items: center;
    color: #831843;
    font-size: 22px;
    line-height: 1;
    background: rgb(255 255 255 / 82%);
    border: 2px solid rgb(255 255 255 / 55%);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgb(131 24 67 / 35%);
    cursor: pointer;
}

.upsell-icon {
    display: grid;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    place-items: center;
    color: #ffffff;
    font-size: 31px;
    background: rgb(255 255 255 / 18%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 17px;
}

.upsell-badge {
    display: inline-flex;
    padding: 5px 13px;
    margin-bottom: 13px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    background: rgb(255 255 255 / 21%);
    border-radius: 999px;
}

.upsell-header h2 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(27px, 7vw, 32px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.upsell-header h2 em {
    font-style: italic;
}

.upsell-header p {
    max-width: 25rem;
    margin: 13px auto 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.45;
}

.upsell-body {
    padding: 28px 24px 21px;
}

.upsell-benefits {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 0 0 23px;
    color: #334155;
    font-size: 14px;
    list-style: none;
}

.upsell-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upsell-benefits li span {
    flex: 0 0 auto;
    color: #16a34a;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
}

.upsell-price-box {
    padding: 18px 16px 16px;
    margin-bottom: 16px;
    text-align: center;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 17px;
}

.upsell-old-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 21px;
    color: #94a3b8;
    font-size: 13px;
}

.upsell-old-price span {
    padding: 3px 7px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    background: #ef4444;
    border-radius: 999px;
}

.upsell-price {
    margin-top: 2px;
    color: #16a34a;
    font-size: 49px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.04em;
}

.upsell-price-box p {
    margin: 5px 0 10px;
    color: #64748b;
    font-size: 11px;
}

.upsell-delivery {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid #4ade80;
    border-radius: 999px;
}

.upsell-primary,
.upsell-secondary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
}

.upsell-primary {
    gap: 8px;
    margin: 9px 0 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 0 0 9px rgb(34 197 94 / 14%), 0 12px 24px -14px rgb(22 163 74 / 75%);
    transform-origin: center;
    animation: upsell-button-pulse 1.7s ease-in-out infinite;
}

.upsell-cart-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 2.25;
}

.upsell-primary:hover {
    filter: brightness(1.04);
}

@keyframes upsell-button-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgb(34 197 94 / 13%), 0 12px 24px -14px rgb(22 163 74 / 72%);
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 0 0 13px rgb(34 197 94 / 7%), 0 16px 30px -13px rgb(22 163 74 / 82%);
    }
}

.upsell-secondary {
    min-height: 52px;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    background: #ffffff;
    border: 2px solid #cbd5e1;
}

.upsell-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.upsell-close:focus-visible,
.upsell-primary:focus-visible,
.upsell-secondary:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .upsell-overlay {
        padding: 4px;
    }

    .upsell-modal {
        max-height: calc(100vh - 8px);
        border-radius: 10px;
    }

    .upsell-header {
        padding: 31px 19px 24px;
    }

    .upsell-body {
        padding: 25px 21px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .upsell-primary {
        animation: none;
    }
}