/* =========================================================
   TMB-URIST.RU
   PRICE PAGE
   Premium UI / Responsive
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --price-blue: #2563eb;
    --price-blue-dark: #1d4ed8;
    --price-blue-light: #3b82f6;

    --price-text: #0f172a;
    --price-text-soft: #475569;
    --price-text-muted: #64748b;

    --price-bg: #f8fafc;
    --price-white: #ffffff;

    --price-border: #e2e8f0;
    --price-border-light: #eef2f7;

    --price-green: #16a34a;
    --price-orange: #d97706;

    --price-radius: 14px;
    --price-radius-lg: 22px;
    --price-radius-xl: 30px;

    --price-container: 1440px;

    --price-shadow:
        0 18px 55px rgba(15, 23, 42, .07);

    --price-shadow-hover:
        0 25px 70px rgba(15, 23, 42, .11);

    --price-transition:
        .28s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   2. BASIC
   ========================================================= */

.price-hero,
.price-hero *,
.price-section-main,
.price-section-main * {
    box-sizing: border-box;
}

.price-hero,
.price-section-main {
    width: 100%;
}

.price-hero a,
.price-section-main a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   3. HERO
   ========================================================= */

.price-hero {
    position: relative;

    min-height: min(760px, 90vh);

    display: flex;

    align-items: center;

    padding:
        clamp(90px, 8vw, 140px)
        0
        clamp(70px, 7vw, 110px);

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(37, 99, 235, .10),
            transparent 32%
        ),

        radial-gradient(
            circle at 92% 15%,
            rgba(59, 130, 246, .075),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(37, 99, 235, .045),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    isolation: isolate;

    overflow: hidden;
}


/* =========================================================
   4. HERO GRID
   ========================================================= */

.price-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    opacity: .40;

    background-image:

        linear-gradient(
            rgba(15, 23, 42, .025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(15, 23, 42, .025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


.price-hero > .container {
    width: min(
        calc(100% - 48px),
        var(--price-container)
    );

    margin:
        0 auto;
}


.price-hero-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(210px, .7fr)
        minmax(240px, .9fr);

    align-items: center;

    gap:
        clamp(40px, 5vw, 100px);
}


/* =========================================================
   5. HERO LEFT
   ========================================================= */

.price-hero-left {
    max-width: 800px;
}


.price-eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 16px;

    color: var(--price-blue);

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.price-eyebrow::before {
    content: "";

    width: 28px;

    height: 2px;

    margin-right: 10px;

    border-radius: 999px;

    background: var(--price-blue);
}


/* =========================================================
   6. HERO TITLE
   ========================================================= */

.price-hero-title {

    margin: 0 0 28px;

    color: var(--price-text);

    font-size:
        clamp(
            48px,
            5.2vw,
            82px
        );

    line-height: .99;

    letter-spacing:
        clamp(
            -3px,
            -.25vw,
            -1.5px
        );

    font-weight: 800;

    text-wrap: balance;
}


.price-hero-title span {
    display: block;

    margin-top: 7px;

    color: var(--price-blue);

    font-weight: 800;
}


/* =========================================================
   7. HERO SUBTITLE
   ========================================================= */

.price-hero-subtitle {

    max-width: 720px;

    margin: 0;

    color: var(--price-text-soft);

    font-size:
        clamp(
            16px,
            1.2vw,
            19px
        );

    line-height: 1.72;

    font-weight: 450;

    text-wrap: pretty;
}


/* =========================================================
   8. HERO BUTTONS
   ========================================================= */

.price-hero-center {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.price-btn {

    width: 100%;

    min-height: 56px;

    padding:
        15px
        22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    text-decoration: none;

    text-align: center;

    transition:

        transform var(--price-transition),
        box-shadow var(--price-transition),
        background var(--price-transition),
        border-color var(--price-transition),
        color var(--price-transition);
}


.price-btn-primary {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--price-blue),
            var(--price-blue-light)
        );

    border:
        1px solid
        rgba(37, 99, 235, .35);

    box-shadow:
        0 14px 35px
        rgba(37, 99, 235, .20);
}


.price-btn-primary:hover {

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 20px 45px
        rgba(37, 99, 235, .30);
}


.price-btn-outline {

    color: var(--price-blue);

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

    border:
        1px solid
        rgba(37, 99, 235, .40);
}


.price-btn-outline:hover {

    color: #ffffff;

    background:
        var(--price-blue);

    border-color:
        var(--price-blue);

    transform:
        translateY(-3px);
}


/* =========================================================
   9. HERO FEATURES
   ========================================================= */

.price-hero-right {
    width: 100%;

    display: flex;

    flex-direction: column;
}


.price-feature {

    position: relative;

    min-height: 70px;

    padding:
        17px
        0
        17px
        34px;

    display: flex;

    align-items: center;

    color: var(--price-text);

    font-size: 14px;

    line-height: 1.5;

    font-weight: 650;

    border-bottom:
        1px solid
        var(--price-border);
}


.price-feature:first-child {

    border-top:
        1px solid
        var(--price-border);
}


.price-feature::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 50%;

    transform:
        translateY(-50%);

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(22, 163, 74, .10);

    color:
        var(--price-green);

    font-size: 12px;

    font-weight: 900;
}


/* =========================================================
   10. MAIN PRICE SECTION
   ========================================================= */

.price-section-main {

    position: relative;

    padding:
        clamp(75px, 7vw, 115px)
        0
        clamp(70px, 7vw, 110px);

    background:
        #ffffff;
}


.price-section-main > .container {

    width: min(
        calc(100% - 48px),
        1100px
    );

    margin:
        0 auto;
}


/* =========================================================
   11. HEADING
   ========================================================= */

.price-heading {

    max-width: 850px;

    margin:
        0 auto
        45px;

    text-align: center;
}


.price-heading .price-eyebrow {

    justify-content: center;
}


.price-heading h2 {

    margin: 0 0 15px;

    color: var(--price-text);

    font-size:
        clamp(
            34px,
            3.5vw,
            52px
        );

    line-height: 1.1;

    letter-spacing: -1.5px;

    font-weight: 800;
}


.price-heading p {

    max-width: 700px;

    margin:
        0 auto;

    color: var(--price-text-soft);

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   12. NOTICE
   ========================================================= */

.price-notice {

    width: 100%;

    margin-bottom: 50px;

    padding:
        22px
        26px;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    border:
        1px solid
        #dbeafe;

    border-radius:
        var(--price-radius-lg);

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f1f6ff
        );
}


.price-notice-icon {

    flex: 0 0 auto;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(37, 99, 235, .10);

    color:
        var(--price-blue);

    font-size: 16px;

    font-weight: 900;
}


.price-notice strong {

    display: block;

    margin-bottom: 5px;

    color: var(--price-text);

    font-size: 15px;
}


.price-notice p {

    margin: 0;

    color: var(--price-text-soft);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   13. PRICE CATEGORY
   ========================================================= */

.price-category {

    position: relative;

    margin-bottom: 32px;

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

    border-radius:
        var(--price-radius-lg);

    background:
        var(--price-white);

    box-shadow:
        0 10px 35px
        rgba(15, 23, 42, .035);

    overflow: hidden;

    scroll-margin-top: 120px;

    transition:
        box-shadow var(--price-transition),
        transform var(--price-transition),
        border-color var(--price-transition);
}


.price-category:hover {

    border-color:
        #d8e2f0;

    box-shadow:
        var(--price-shadow);
}


/* =========================================================
   14. CATEGORY HEADER
   ========================================================= */

.price-category-header {

    min-height: 105px;

    padding:
        24px
        28px;

    display: flex;

    align-items: center;

    gap: 20px;

    border-bottom:
        1px solid
        var(--price-border-light);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfe
        );
}


.price-number {

    flex: 0 0 auto;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        rgba(37, 99, 235, .08);

    color:
        var(--price-blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .04em;
}


.price-category-header h3 {

    margin: 0 0 5px;

    color:
        var(--price-text);

    font-size:
        clamp(
            19px,
            2vw,
            24px
        );

    line-height: 1.2;

    font-weight: 750;
}


.price-category-header p {

    margin: 0;

    color:
        var(--price-text-muted);

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   15. PRICE TABLE
   ========================================================= */

.price-table {

    width: 100%;
}


.price-row {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px;

    align-items: center;

    min-height: 62px;

    padding:
        14px
        28px;

    border-bottom:
        1px solid
        var(--price-border-light);

    transition:
        background var(--price-transition);
}


.price-row:last-child {

    border-bottom: 0;
}


.price-row:not(.price-row-head):hover {

    background:
        #f8fafc;
}


.price-row > div:first-child {

    color:
        var(--price-text);

    font-size: 15px;

    line-height: 1.5;

    font-weight: 500;

    padding-right: 25px;
}


.price-row > div:last-child {

    color:
        var(--price-text);

    font-size: 15px;

    line-height: 1.4;

    font-weight: 750;

    text-align: right;

    white-space: nowrap;
}


/* =========================================================
   16. TABLE HEADER
   ========================================================= */

.price-row-head {

    min-height: 48px;

    background:
        #f8fafc;

    border-bottom:
        1px solid
        var(--price-border);
}


.price-row-head > div {

    color:
        var(--price-text-muted) !important;

    font-size: 11px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================================
   17. PRICE EMPHASIS
   ========================================================= */

.price-row:not(.price-row-head) > div:last-child {

    color:
        var(--price-blue);
}


/* =========================================================
   18. EXPENSES
   ========================================================= */

.price-expenses {

    margin-top: 45px;

    padding:
        28px
        30px;

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

    border-radius:
        var(--price-radius-lg);

    background:
        #f8fafc;
}


.price-expenses-title {

    margin-bottom: 8px;

    color:
        var(--price-text);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 750;
}


.price-expenses p {

    margin:
        0 0 20px;

    color:
        var(--price-text-soft);

    font-size: 14px;

    line-height: 1.6;
}


.price-expenses ul {

    margin: 0;

    padding: 0;

    list-style: none;
}


.price-expenses li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        var(--price-border);
}


.price-expenses li:last-child {

    border-bottom: 0;

    padding-bottom: 0;
}


.price-expenses li span {

    color:
        var(--price-text-soft);

    font-size: 14px;
}


.price-expenses li strong {

    color:
        var(--price-blue);

    font-size: 14px;

    font-weight: 750;

    white-space: nowrap;
}


/* =========================================================
   19. FINAL CTA
   ========================================================= */

.price-final {

    position: relative;

    margin-top: 55px;

    padding:
        clamp(30px, 4vw, 48px);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    border-radius:
        var(--price-radius-xl);

    background:

        radial-gradient(
            circle at 90% 20%,
            rgba(96, 165, 250, .20),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #eff6ff,
            #f8fafc
        );

    border:
        1px solid
        #dbeafe;

    overflow: hidden;
}


.price-final > div {

    max-width: 680px;
}


.price-final .price-eyebrow {

    margin-bottom: 10px;
}


.price-final h2 {

    margin: 0 0 10px;

    color:
        var(--price-text);

    font-size:
        clamp(
            25px,
            2.6vw,
            36px
        );

    line-height: 1.15;

    letter-spacing: -1px;

    font-weight: 800;
}


.price-final p {

    margin: 0;

    color:
        var(--price-text-soft);

    font-size: 15px;

    line-height: 1.65;
}


.price-final .price-btn {

    flex: 0 0 auto;

    width: 260px;
}


/* =========================================================
   20. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1600px) {

    .price-hero > .container {

        width:
            min(
                calc(100% - 100px),
                1560px
            );
    }

    .price-hero-grid {

        gap: 110px;
    }

    .price-hero-title {

        font-size: 86px;
    }

    .price-hero-subtitle {

        font-size: 20px;
    }
}


/* =========================================================
   21. 4K
   ========================================================= */

@media (min-width: 2200px) {

    .price-hero > .container {

        width:
            min(
                calc(100% - 160px),
                1750px
            );
    }

    .price-hero-grid {

        gap: 140px;
    }

    .price-hero-title {

        font-size: 98px;
    }

    .price-hero-subtitle {

        font-size: 21px;

        max-width: 780px;
    }
}


/* =========================================================
   22. LAPTOP
   ========================================================= */

@media (max-width: 1300px) {

    .price-hero {

        min-height: auto;

        padding-top: 110px;
    }

    .price-hero > .container {

        width:
            min(
                calc(100% - 40px),
                1180px
            );
    }

    .price-hero-grid {

        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(190px, .7fr)
            minmax(220px, .85fr);

        gap: 45px;
    }

    .price-hero-title {

        font-size: 62px;
    }

    .price-hero-subtitle {

        font-size: 17px;
    }

    .price-section-main > .container {

        width:
            min(
                calc(100% - 40px),
                1050px
            );
    }
}


/* =========================================================
   23. TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1100px) {

    .price-hero {

        padding:
            105px
            0
            70px;
    }

    .price-hero-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-areas:

            "left left"

            "center right";

        gap: 45px;
    }

    .price-hero-left {

        grid-area: left;

        max-width: 850px;

        margin:
            0 auto;

        text-align: center;
    }

    .price-hero-left .price-eyebrow {

        justify-content: center;
    }

    .price-hero-title {

        text-align: center;

        font-size:
            clamp(
                48px,
                6vw,
                68px
            );
    }

    .price-hero-subtitle {

        margin:
            0 auto;

        text-align: center;
    }

    .price-hero-center {

        grid-area: center;

        max-width: 360px;

        justify-self: end;
    }

    .price-hero-right {

        grid-area: right;

        max-width: 380px;

        justify-self: start;
    }
}


/* =========================================================
   24. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .price-hero {

        padding:
            90px
            0
            60px;
    }

    .price-hero > .container {

        width:
            min(
                calc(100% - 36px),
                720px
            );
    }

    .price-hero-grid {

        grid-template-columns: 1fr;

        grid-template-areas:

            "left"

            "center"

            "right";

        gap: 38px;
    }

    .price-hero-left,
    .price-hero-center,
    .price-hero-right {

        width: 100%;

        max-width: 100%;

        justify-self: stretch;
    }

    .price-hero-title {

        font-size:
            clamp(
                42px,
                7vw,
                58px
            );

        letter-spacing: -2px;
    }

    .price-hero-subtitle {

        font-size: 16px;
    }

    .price-hero-center {

        max-width: 460px;

        margin:
            0 auto;
    }

    .price-hero-right {

        max-width: 620px;

        margin:
            0 auto;
    }

    .price-section-main > .container {

        width:
            min(
                calc(100% - 36px),
                720px
            );
    }

    .price-row {

        grid-template-columns:
            minmax(0, 1fr)
            160px;
    }
}


/* =========================================================
   25. MOBILE LARGE
   ========================================================= */

@media (max-width: 700px) {

    .price-hero {

        padding:
            80px
            0
            52px;
    }

    .price-hero > .container {

        width:
            calc(100% - 30px);
    }

    .price-hero-grid {

        gap: 30px;
    }

    .price-hero-title {

        margin-bottom: 20px;

        font-size:
            clamp(
                38px,
                10vw,
                50px
            );

        line-height: 1.03;

        letter-spacing: -1.6px;
    }

    .price-hero-subtitle {

        font-size: 15px;

        line-height: 1.65;
    }

    .price-btn {

        min-height: 52px;

        font-size: 14px;
    }

    .price-feature {

        min-height: 62px;

        padding-left: 32px;

        font-size: 13px;
    }

    .price-feature::before {

        width: 21px;

        height: 21px;
    }

    .price-section-main {

        padding:
            60px
            0
            50px;
    }

    .price-section-main > .container {

        width:
            calc(100% - 30px);
    }

    .price-heading {

        margin-bottom: 32px;
    }

    .price-heading h2 {

        font-size: 34px;
    }

    .price-heading p {

        font-size: 14px;
    }

    .price-notice {

        padding: 20px;

        gap: 14px;

        margin-bottom: 32px;
    }

    .price-notice p {

        font-size: 13px;
    }

    .price-category {

        margin-bottom: 22px;

        border-radius: 17px;
    }

    .price-category-header {

        min-height: auto;

        padding: 20px;

        gap: 14px;
    }

    .price-number {

        width: 42px;

        height: 42px;

        border-radius: 11px;

        font-size: 12px;
    }

    .price-category-header h3 {

        font-size: 19px;
    }

    .price-category-header p {

        font-size: 12.5px;
    }

    .price-row {

        grid-template-columns:
            minmax(0, 1fr)
            130px;

        min-height: 58px;

        padding:
            13px
            18px;
    }

    .price-row > div:first-child {

        font-size: 13px;

        padding-right: 15px;
    }

    .price-row > div:last-child {

        font-size: 13px;
    }

    .price-row-head {

        min-height: 43px;
    }

    .price-row-head > div {

        font-size: 9px !important;
    }

    .price-expenses {

        margin-top: 32px;

        padding: 22px;

        border-radius: 17px;
    }

    .price-expenses-title {

        font-size: 18px;
    }

    .price-expenses li {

        gap: 15px;

        padding: 12px 0;
    }

    .price-expenses li span,
    .price-expenses li strong {

        font-size: 13px;
    }

    .price-final {

        margin-top: 35px;

        padding: 26px;

        flex-direction: column;

        align-items: stretch;

        gap: 25px;

        border-radius: 22px;
    }

    .price-final h2 {

        font-size: 27px;
    }

    .price-final p {

        font-size: 14px;
    }

    .price-final .price-btn {

        width: 100%;
    }
}


/* =========================================================
   26. MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .price-hero {

        padding:
            72px
            0
            45px;
    }

    .price-hero > .container {

        width:
            calc(100% - 24px);
    }

    .price-hero-grid {

        gap: 27px;
    }

    .price-eyebrow {

        font-size: 11px;
    }

    .price-hero-title {

        font-size:
            clamp(
                34px,
                10.5vw,
                44px
            );

        letter-spacing: -1.2px;
    }

    .price-hero-subtitle {

        font-size: 14px;
    }

    .price-btn {

        min-height: 50px;

        font-size: 14px;

        padding:
            13px
            16px;
    }

    .price-feature {

        min-height: 58px;

        font-size: 12.5px;

        padding-left: 30px;
    }

    .price-feature::before {

        width: 20px;

        height: 20px;

        font-size: 11px;
    }

    .price-section-main > .container {

        width:
            calc(100% - 24px);
    }

    .price-heading h2 {

        font-size: 30px;

        letter-spacing: -.8px;
    }

    .price-notice {

        align-items: flex-start;

        padding: 17px;

        border-radius: 15px;
    }

    .price-notice-icon {

        width: 30px;

        height: 30px;

        font-size: 14px;
    }

    .price-notice strong {

        font-size: 14px;
    }

    .price-notice p {

        font-size: 12.5px;
    }

    .price-category-header {

        padding: 17px;
    }

    .price-number {

        width: 38px;

        height: 38px;

        font-size: 11px;
    }

    .price-category-header h3 {

        font-size: 17px;
    }

    .price-category-header p {

        display: none;
    }

    .price-row {

        grid-template-columns:
            minmax(0, 1fr)
            115px;

        padding:
            12px
            15px;
    }

    .price-row > div:first-child {

        font-size: 12.5px;
    }

    .price-row > div:last-child {

        font-size: 12.5px;
    }

    .price-row-head > div {

        font-size: 8.5px !important;
    }

    .price-expenses {

        padding: 18px;

        border-radius: 15px;
    }

    .price-expenses-title {

        font-size: 17px;
    }

    .price-expenses p {

        font-size: 12.5px;
    }

    .price-expenses li span,
    .price-expenses li strong {

        font-size: 12px;
    }

    .price-final {

        padding: 22px;

        border-radius: 18px;
    }

    .price-final h2 {

        font-size: 24px;

        letter-spacing: -.6px;
    }

    .price-final p {

        font-size: 13px;
    }
}


/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .price-hero {

        padding:
            65px
            0
            40px;
    }

    .price-hero > .container {

        width:
            calc(100% - 20px);
    }

    .price-hero-title {

        font-size: 32px;

        letter-spacing: -.9px;
    }

    .price-hero-subtitle {

        font-size: 13.5px;
    }

    .price-section-main > .container {

        width:
            calc(100% - 20px);
    }

    .price-heading h2 {

        font-size: 28px;
    }

    .price-row {

        grid-template-columns:
            minmax(0, 1fr)
            105px;

        padding:
            11px
            12px;
    }

    .price-row > div:first-child {

        font-size: 12px;

        padding-right: 10px;
    }

    .price-row > div:last-child {

        font-size: 12px;
    }

    .price-row-head > div {

        font-size: 8px !important;
    }

    .price-final {

        padding: 19px;
    }
}


/* =========================================================
   28. VERY SMALL
   ========================================================= */

@media (max-width: 360px) {

    .price-hero-title {

        font-size: 29px;
    }

    .price-hero-subtitle {

        font-size: 13px;
    }

    .price-btn {

        font-size: 13px;
    }

    .price-feature {

        font-size: 11.5px;
    }

    .price-row {

        grid-template-columns:
            minmax(0, 1fr)
            95px;
    }

    .price-row > div:first-child,
    .price-row > div:last-child {

        font-size: 11px;
    }

    .price-final h2 {

        font-size: 22px;
    }
}


/* =========================================================
   29. TOUCH
   ========================================================= */

@media (hover: none) {

    .price-btn-primary:hover,
    .price-btn-outline:hover {

        transform: none;
    }

    .price-category:hover {

        transform: none;

        box-shadow:
            0 10px 35px
            rgba(15, 23, 42, .035);
    }
}


/* =========================================================
   30. REDUCED MOTION
   ========================================================= */

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

    .price-btn,
    .price-category,
    .price-row {

        transition: none;
    }
}


/* =========================================================
   31. DARK THEME
   ========================================================= */

body.dark-theme .price-hero {

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, .13),
            transparent 32%
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(59, 130, 246, .10),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #111827 0%,
            #0f141c 100%
        );
}


body.dark-theme .price-hero::before {

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(148, 163, 184, .04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(148, 163, 184, .04) 1px,
            transparent 1px
        );
}


body.dark-theme .price-hero-title {

    color: #f8fafc;
}


body.dark-theme .price-hero-title span {

    color: #60a5fa;
}


body.dark-theme .price-hero-subtitle {

    color: #cbd5e1;
}


body.dark-theme .price-feature {

    color: #e2e8f0;

    border-color:
        #293241;
}


body.dark-theme .price-feature:first-child {

    border-color:
        #293241;
}


body.dark-theme .price-btn-outline {

    color: #60a5fa;

    background:
        rgba(24, 29, 37, .8);

    border-color:
        rgba(96, 165, 250, .45);
}


body.dark-theme .price-btn-outline:hover {

    color: #ffffff;

    background:
        var(--price-blue);

    border-color:
        var(--price-blue);
}


body.dark-theme .price-section-main {

    background:
        #151a22;
}


body.dark-theme .price-heading h2 {

    color: #f1f5f9;
}


body.dark-theme .price-heading p {

    color: #94a3b8;
}


body.dark-theme .price-notice {

    background:
        linear-gradient(
            135deg,
            #172033,
            #182437
        );

    border-color:
        #263b60;
}


body.dark-theme .price-notice strong {

    color: #f1f5f9;
}


body.dark-theme .price-notice p {

    color: #aebbd0;
}


body.dark-theme .price-category {

    background:
        #181d25;

    border-color:
        #293241;

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, .18);
}


body.dark-theme .price-category:hover {

    border-color:
        #354154;
}


body.dark-theme .price-category-header {

    background:
        linear-gradient(
            180deg,
            #1b212b,
            #181d25
        );

    border-color:
        #293241;
}


body.dark-theme .price-category-header h3 {

    color:
        #f1f5f9;
}


body.dark-theme .price-category-header p {

    color:
        #94a3b8;
}


body.dark-theme .price-number {

    background:
        rgba(59, 130, 246, .12);

    color:
        #60a5fa;
}


body.dark-theme .price-row {

    border-color:
        #293241;
}


body.dark-theme .price-row:not(.price-row-head):hover {

    background:
        #1d2430;
}


body.dark-theme .price-row > div:first-child {

    color:
        #dbe4ef;
}


body.dark-theme .price-row > div:last-child {

    color:
        #60a5fa;
}


body.dark-theme .price-row-head {

    background:
        #151a22;
}


body.dark-theme .price-row-head > div {

    color:
        #8290a5 !important;
}


body.dark-theme .price-expenses {

    background:
        #181d25;

    border-color:
        #293241;
}


body.dark-theme .price-expenses-title {

    color:
        #f1f5f9;
}


body.dark-theme .price-expenses p {

    color:
        #94a3b8;
}


body.dark-theme .price-expenses li {

    border-color:
        #293241;
}


body.dark-theme .price-expenses li span {

    color:
        #aebbd0;
}


body.dark-theme .price-expenses li strong {

    color:
        #60a5fa;
}


body.dark-theme .price-final {

    background:

        radial-gradient(
            circle at 90% 20%,
            rgba(59, 130, 246, .15),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #172033,
            #181d25
        );

    border-color:
        #263b60;
}


body.dark-theme .price-final h2 {

    color:
        #f1f5f9;
}


body.dark-theme .price-final p {

    color:
        #aebbd0;
}


/* =========================================================
   32. PRINT
   ========================================================= */

@media print {

    .price-hero {

        min-height: auto;

        padding: 40px 0;

        background: #ffffff;
    }

    .price-hero::before {

        display: none;
    }

    .price-hero-grid {

        display: block;
    }

    .price-hero-center,
    .price-hero-right {

        margin-top: 30px;
    }

    .price-category {

        box-shadow: none;

        break-inside: avoid;
    }

    .price-final {

        break-inside: avoid;
    }
}