/* Four Internet + TV cards. The ring uses one 0–1000 Mbit/s scale. */
.pricing_plan_area .toto-tariff-card {
    position: relative;
    margin-bottom: 32px;
}
.pricing_plan_area .toto-tariff-card--promo::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -41px;
    right: 15px;
    bottom: 0;
    left: 15px;
    border-radius: 20px;
    background: linear-gradient(120deg, #ff9f28, #f36b21);
    box-shadow: 0 12px 30px rgba(194, 79, 20, .16);
}
.pricing_plan_area .toto-tariff-card .pricing_area {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    overflow: visible;
    border: 1px solid #fcb040;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 9, 37, .07);
}
.pricing_plan_area .toto-tariff-card--promo .pricing_area {
    margin: 3px;
    border-color: #fff;
}
.pricing_plan_area .toto-tariff-card .pricing-part {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: visible;
    padding: 30px 28px 28px;
    border-radius: 19px;
    background-position: -14px -12px;
    text-align: center;
}
.toto-tariff-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    margin-bottom: 12px;
}
.toto-tariff-card .toto-tariff-name {
    margin: 0;
    color: #e55e26;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.toto-tariff-promo {
    position: absolute;
    z-index: 10;
    top: -41px;
    right: 15px;
    left: 15px;
}
.toto-tariff-promo-trigger {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 15px;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(110deg, #ffad32, #f36b21);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.toto-tariff-promo-trigger span {
    margin-left: 5px;
    color: inherit;
}
.toto-tariff-promo-trigger:focus-visible {
    outline: 3px solid #1b4eab;
    outline-offset: 2px;
}
.toto-tariff-promo-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(420px, calc(100vw - 48px));
    padding: 17px 19px;
    transform: translateX(-50%);
    border: 1px solid #fcb040;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 9, 37, .18);
    color: #030925;
    text-align: left;
}
.toto-tariff-promo:hover .toto-tariff-promo-popover,
.toto-tariff-promo-trigger:focus-visible + .toto-tariff-promo-popover {
    display: block;
}
.toto-tariff-promo-popover p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
}
.toto-tariff-promo-popover p:last-child {
    margin-bottom: 0;
}
.toto-tariff-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    align-items: start;
    column-gap: 24px;
    width: 100%;
    max-width: 390px;
    min-height: 210px;
    margin: 0 auto 20px;
}
.toto-speed-ring {
    position: relative;
    justify-self: center;
    width: 210px;
    max-width: 100%;
    aspect-ratio: 1;
}
.toto-speed-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.toto-ring-track,
.toto-ring-progress {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
}
.toto-ring-track {
    stroke: #e9eaed;
}
.toto-ring-progress {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.25s cubic-bezier(.21,.72,.24,1);
}
.toto-rings-ready .toto-ring-progress {
    stroke-dashoffset: var(--ring-fill);
}
.toto-rings-ready .toto-tariff-card.is-visible .toto-ring-progress {
    stroke-dashoffset: 0;
}
.toto-ring-reading {
    position: absolute;
    top: 47%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    color: #030925;
    line-height: 1.1;
    white-space: nowrap;
}
.toto-ring-reading span {
    color: #86868a;
    font-size: 14px;
    font-weight: 600;
}
.toto-ring-reading b {
    margin: 4px 0;
    color: #e96b1e;
    font-size: 34px;
    font-weight: 700;
}
.toto-ring-reading small {
    color: #73767e;
    font-size: 14px;
}
.toto-tariff-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 112px;
    margin-top: 36px;
    border-radius: 18px;
    background: #ffbc62;
    color: #030925;
}
.toto-old-price {
    display: block;
    margin-bottom: 2px;
    color: #624b35;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.toto-tariff-price span {
    display: block;
    margin: 0;
    color: inherit;
}
.toto-tariff-price .toto-old-price-slot {
    height: 15px;
    margin-bottom: 2px;
    visibility: hidden;
}
.toto-tariff-price .toto-price-value {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
}
.toto-tariff-price .toto-price-unit {
    font-size: 17px;
    line-height: 1.2;
}
.toto-tariff-card .pricing-part .toto-tariff-features {
    flex: 1;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
}
.toto-tariff-features li {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 68px;
    padding: 12px 8px;
    border-top: 1px solid #e8e8e8;
    color: #030925;
    font-size: 18px;
    line-height: 1.35;
    list-style: none;
}
.toto-tariff-features li > span {
    flex: 1;
    margin: 0;
    color: inherit;
    font-size: inherit;
}
.toto-tariff-features li svg {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    fill: none;
    stroke: #ef7624;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.toto-tariff-features li b {
    font-weight: 700;
}
.toto-tariff-features .toto-tariff-feature--tv {
    margin: 3px 0;
    padding: 15px 8px 15px 14px;
    border-top: 1px solid #e8e8e8;
    border-right: 0;
    border-bottom: 0;
    border-left: 4px solid #ef7624;
    border-radius: 0;
    background: transparent;
}
.toto-tariff-feature--tv b {
    display: block;
    color: #e55e26;
    font-size: 19px;
}
.toto-tariff-feature--tv small {
    display: block;
    margin-top: 4px;
    color: #030925;
    font-size: 16px;
    line-height: 1.4;
}
.toto-tariff-card .toto-tariff-button {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 14px 20px;
    border: 0;
    border-radius: 8px;
    background: #fcb040;
    color: #030925;
    font-size: 19px;
    font-weight: 600;
}
.toto-tariff-card .toto-tariff-button:hover,
.toto-tariff-card .toto-tariff-button:focus {
    background: #ef7624;
    color: #fff;
}
@media (max-width: 991px) {
    .pricing_plan_area .toto-tariff-card .pricing-part {
        padding: 30px 20px 24px;
    }
    .toto-tariff-card .toto-tariff-name {
        font-size: 29px;
    }
    .toto-tariff-visual {
        min-height: 180px;
        grid-template-columns: minmax(0, 1fr) 108px;
        column-gap: 12px;
    }
    .toto-speed-ring {
        width: 170px;
    }
    .toto-tariff-price {
        width: 108px;
        height: 104px;
        margin-top: 28px;
    }
    .toto-tariff-price .toto-price-value {
        font-size: 39px;
    }
    .toto-tariff-features li {
        gap: 12px;
        font-size: 16px;
    }
}
@media (max-width: 767px) {
    .pricing_plan_area .toto-tariff-card {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
    }
}
@media (max-width: 359px) {
    .toto-tariff-card .toto-tariff-name {
        font-size: 24px;
    }
    .toto-speed-ring {
        width: 150px;
    }
    .toto-ring-reading b {
        font-size: 27px;
    }
    .toto-tariff-price {
        width: 96px;
        height: 96px;
        margin-top: 20px;
    }
    .toto-tariff-visual {
        grid-template-columns: minmax(0, 1fr) 96px;
        column-gap: 10px;
    }
    .toto-tariff-price .toto-price-value {
        font-size: 34px;
    }
    .toto-tariff-price .toto-price-unit {
        font-size: 13px;
    }
    .toto-old-price {
        font-size: 12px;
    }
    .toto-tariff-price .toto-old-price-slot {
        height: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .toto-ring-progress,
    .toto-rings-ready .toto-ring-progress {
        stroke-dashoffset: 0;
        transition: none;
    }
}