/* =========================================================
   СТРАНИЦА ТАХОГРАФОВ
   Mobile First
   Файл: /assets/site/style/tahografy-new.css
   ========================================================= */


/* =========================================================
   1. БАЗОВЫЕ НАСТРОЙКИ
   ========================================================= */

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

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

.tachograph-section {
    padding: 38px 16px;
}

.tachograph-section h2 {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: #17212b;
}

.tachograph-section h3 {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
    color: #17212b;
}

.tachograph-section p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: #45515e;
}

.section-heading {
    margin-bottom: 24px;
}

.section-heading p {
    margin-bottom: 0;
}


/* =========================================================
   2. КНОПКИ
   ========================================================= */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 52px;
    padding: 13px 18px;

    border: 2px solid transparent;
    border-radius: 8px;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .1s ease;
}

.btn:active {
    transform: scale(.98);
}

.btn-primary {
    background: #0787c8;
    border-color: #0787c8;
    color: #fff !important;
}

.btn-secondary {
    background: #fff;
    border-color: #0787c8;
    color: #0787c8 !important;
}

.section-action {
    margin-top: 24px;
}


/* =========================================================
   3. ПЕРВЫЙ ЭКРАН
   ========================================================= */

.tachograph-hero {
    padding: 28px 16px 32px;

    background: linear-gradient(
        135deg,
        #0478ba 0%,
        #09a7d8 100%
    );

    color: #fff;
}

.tachograph-hero__content {
    width: 100%;
    margin: 0 auto;
}

.tachograph-hero h1 {
    margin: 0 0 16px;

    font-size: 31px;
    line-height: 1.08;
    font-weight: 800;

    color: #fff;
}

.tachograph-hero__lead {
    margin-bottom: 24px !important;

    font-size: 17px !important;
    line-height: 1.5 !important;

    color: rgba(255,255,255,.95) !important;
}


/* Преимущества */

.tachograph-hero__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-bottom: 22px;
}

.tachograph-benefit {
    padding: 14px 12px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
}

.tachograph-benefit strong {
    display: block;

    margin-bottom: 4px;

    font-size: 18px;
    line-height: 1.2;

    color: #fff;
}

.tachograph-benefit span {
    display: block;

    font-size: 13px;
    line-height: 1.35;

    color: rgba(255,255,255,.9);
}


/* Кнопки первого экрана */

.tachograph-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tachograph-hero .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #057fbf !important;
}

.tachograph-hero .btn-secondary {
    background: transparent;
    border-color: rgba(255,255,255,.8);
    color: #fff !important;
}


/* =========================================================
   4. ТОВАРЫ
   ========================================================= */

.tachograph-products {
    background: #fff;
}

.tachograph-products img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   5. КАКОЙ ТАХОГРАФ ВЫБРАТЬ
   ========================================================= */

.tachograph-choice {
    background: #f5f8fa;
}

.tachograph-choice__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.info-card {
    padding: 20px;

    background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 10px;
}

.info-card p {
    margin-bottom: 0;
}


/* =========================================================
   6. ЦЕНЫ
   ========================================================= */

.tachograph-price {
    background: #fff;
}

.price-table-wrapper {
    width: 100%;
    overflow-x: auto;

    margin: 0 0 16px;

    border: 1px solid #dfe5e9;
    border-radius: 9px;

    -webkit-overflow-scrolling: touch;
}

.service-price-table {
    width: 100%;
    min-width: 520px;

    border-collapse: collapse;

    background: #fff;
}

.service-price-table th {
    padding: 13px 14px;

    background: #0787c8;
    color: #fff;

    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}

.service-price-table th:last-child {
    text-align: right;
}

.service-price-table td {
    padding: 13px 14px;

    border-bottom: 1px solid #e8ecef;

    font-size: 15px;
    line-height: 1.35;

    vertical-align: middle;
}

.service-price-table td:last-child {
    white-space: nowrap;

    text-align: right;
    font-weight: 700;

    color: #17212b;
}

.service-price-table tr:last-child td {
    border-bottom: none;
}

.service-price-table a {
    color: #057fbe;
    font-weight: 600;
    text-decoration: none;
}

.price-note {
    padding: 14px 16px;

    background: #f5f8fa;
    border-radius: 8px;

    font-size: 14px !important;
    line-height: 1.45 !important;
}


/* =========================================================
   7. ЭТАПЫ УСТАНОВКИ
   ========================================================= */

.tachograph-install {
    background: #f5f8fa;
}

.install-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.install-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px;

    background: #fff;
    border: 1px solid #e3e9ed;
    border-radius: 10px;
}

.install-step__number {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #0787c8;
    border-radius: 50%;

    color: #fff;

    font-size: 17px;
    font-weight: 700;
}

.install-step p {
    margin-bottom: 0;
}


/* =========================================================
   8. ПОЧЕМУ МЫ
   ========================================================= */

.tachograph-why {
    background: #fff;
}

.advantages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.advantage-card {
    padding: 18px;

    background: #f5f8fa;
    border-radius: 10px;
}

.advantage-card strong {
    display: block;

    margin-bottom: 7px;

    font-size: 18px;
    line-height: 1.25;

    color: #17212b;
}

.advantage-card p {
    margin-bottom: 0;
}


/* =========================================================
   9. УСЛУГИ
   ========================================================= */

.tachograph-existing {
    background: #f5f8fa;
}

.tachograph-related {
    background: #fff;
}

.service-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    margin-top: 20px;
}

.service-card {
    position: relative;

    display: block;

    padding: 18px 44px 18px 18px;

    background: #fff;
    border: 1px solid #dde5ea;
    border-radius: 10px;

    text-decoration: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.tachograph-related .service-card {
    background: #f5f8fa;
}

.service-card::after {
    content: "›";

    position: absolute;
    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    font-size: 30px;
    line-height: 1;

    color: #0787c8;
}

.service-card strong {
    display: block;

    margin-bottom: 5px;

    font-size: 17px;
    line-height: 1.25;

    color: #057fbe;
}

.service-card span {
    display: block;

    font-size: 14px;
    line-height: 1.4;

    color: #53616d;
}


/* =========================================================
   10. FAQ
   ========================================================= */

.tachograph-faq {
    background: #f5f8fa;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    overflow: hidden;

    background: #fff;
    border: 1px solid #dfe5e9;
    border-radius: 9px;
}

.faq-item summary {
    position: relative;

    padding: 17px 46px 17px 16px;

    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;

    color: #17212b;

    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";

    position: absolute;
    right: 17px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 26px;
    font-weight: 400;

    color: #0787c8;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item__content {
    padding: 0 16px 17px;
}

.faq-item__content p {
    margin: 0;

    font-size: 15px;
}


/* =========================================================
   11. КАРТА
   ========================================================= */

.tachograph-location {
    background: #fff;
}

.tachograph-location iframe {
    display: block;

    width: 100% !important;
    max-width: 100% !important;
    height: 320px !important;

    border: 0;
    border-radius: 10px;
}


/* =========================================================
   12. ФИНАЛЬНЫЙ CTA
   ========================================================= */

.tachograph-cta {
    padding-top: 32px;
    padding-bottom: 32px;

    background: #087fbb;
}

.tachograph-cta__inner {
    padding: 24px 18px;

    background: #fff;
    border-radius: 12px;

    text-align: center;
}

.tachograph-cta h2 {
    font-size: 25px;
}

.tachograph-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 22px;
}


/* =========================================================
   13. КЛИКАБЕЛЬНОСТЬ
   ========================================================= */

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

.tachograph-section a:not(.btn):not(.service-card) {
    word-break: normal;
}


/* =========================================================
   14. МОБИЛЬНЫЙ ПРАЙС
   На телефоне таблица превращается в карточки
   ========================================================= */

@media (max-width: 600px) {

    .price-table-wrapper {
        overflow: visible;

        border: 0;
        border-radius: 0;
    }

    .service-price-table {
        min-width: 0;
    }

    .service-price-table thead {
        display: none;
    }

    .service-price-table,
    .service-price-table tbody,
    .service-price-table tr,
    .service-price-table td {
        display: block;
        width: 100%;
    }

    .service-price-table tr {
        position: relative;

        margin-bottom: 10px;
        padding: 15px 115px 15px 15px;

        background: #fff;
        border: 1px solid #dfe5e9;
        border-radius: 9px;
    }

    .service-price-table td {
        padding: 0;
        border: 0;
    }

    .service-price-table td:first-child {
        font-size: 15px;
        line-height: 1.35;
    }

    .service-price-table td:last-child {
        position: absolute;

        top: 50%;
        right: 14px;

        transform: translateY(-50%);

        width: auto;
        max-width: 105px;

        font-size: 16px;
        text-align: right;
    }

}


/* =========================================================
   15. ФИКСИРОВАННАЯ ПАНЕЛЬ СНИЗУ НА ТЕЛЕФОНЕ
   ========================================================= */

.mobile-contact-bar {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;

    display: flex;

    padding:
        8px
        10px
        calc(8px + env(safe-area-inset-bottom));

    background: rgba(255,255,255,.97);
    border-top: 1px solid #dce3e8;

    box-shadow: 0 -4px 18px rgba(0,0,0,.08);
}

.mobile-contact-bar a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    border-radius: 7px;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

.mobile-contact-bar__call {
    flex: 0 0 38%;

    margin-right: 8px;

    background: #fff;
    border: 2px solid #0787c8;

    color: #0787c8 !important;
}

.mobile-contact-bar__price {
    flex: 1;

    background: #0787c8;
    border: 2px solid #0787c8;

    color: #fff !important;
}


/* =========================================================
   16. МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media (max-width: 360px) {

    .tachograph-hero h1 {
        font-size: 28px;
    }

    .tachograph-section h2 {
        font-size: 24px;
    }

    .tachograph-hero__benefits {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   17. ПЛАНШЕТЫ
   ========================================================= */

@media (min-width: 640px) {

    .tachograph-section {
        padding: 48px 24px;
    }

    .tachograph-hero {
        padding: 42px 24px;
    }

    .tachograph-hero h1 {
        font-size: 38px;
    }

    .tachograph-hero__lead {
        font-size: 18px !important;
    }

    .tachograph-hero__actions,
    .tachograph-cta__actions {
        flex-direction: row;
    }

    .tachograph-hero__actions .btn,
    .tachograph-cta__actions .btn {
        width: auto;
        min-width: 220px;
    }

    .tachograph-choice__grid,
    .advantages-grid,
    .service-cards {
        grid-template-columns: 1fr 1fr;
    }

    .install-steps {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   18. ДЕСКТОП
   ========================================================= */

@media (min-width: 960px) {

    .tachograph-section,
    .tachograph-hero__content {
        max-width: 1180px;

        margin-left: auto;
        margin-right: auto;
    }

    .tachograph-section {
        padding: 58px 30px;
    }

    .tachograph-hero {
        padding: 58px 30px;
    }

    .tachograph-hero__content {
        padding-left: 0;
        padding-right: 0;
    }

    .tachograph-hero h1 {
        max-width: 800px;

        font-size: 46px;
    }

    .tachograph-hero__lead {
        max-width: 800px;
    }

    .tachograph-hero__benefits {
        max-width: 900px;

        grid-template-columns: repeat(4, 1fr);
    }

    .tachograph-choice__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .advantages-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .install-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .btn {
        width: auto;
    }

    .section-action .btn {
        display: inline-flex;

        min-width: 230px;
    }

}


/* =========================================================
   19. СКРЫВАЕМ МОБИЛЬНУЮ НИЖНЮЮ ПАНЕЛЬ
   НА ПЛАНШЕТЕ / КОМПЬЮТЕРЕ
   ========================================================= */

@media (min-width: 769px) {

    .mobile-contact-bar {
        display: none;
    }

}
/* Временная защита от старых мобильных стилей */

@media (max-width: 768px) {

    .tachograph-hero {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 24px 16px 28px !important;
        overflow: visible !important;
    }

    .tachograph-hero__content {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tachograph-hero h1 {
        display: block !important;
        position: static !important;
        height: auto !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .tachograph-hero__lead {
        display: block !important;
        position: static !important;
        height: auto !important;
    }

    .tachograph-hero__benefits {
        display: grid !important;
        position: static !important;
        height: auto !important;
    }

    .tachograph-hero__actions {
        display: flex !important;
        position: static !important;
        height: auto !important;
    }

}
/* =========================================
   КАРТОЧКИ ТАХОГРАФОВ — ФИНАЛЬНЫЕ СТИЛИ
   ========================================= */

/* DESKTOP */

.card_block {
    box-sizing: border-box;
    vertical-align: top;
    border: 1px solid #e1e5e8;
    background: #fff;
    padding: 15px;
}

.card_block > a {
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.card_block > a img {
    display: block;
    width: 100%;
    max-width: 226px;
    height: 150px;
    object-fit: contain;
    margin: 0 auto;
}

.card_block .cont {
    display: flex;
    flex-direction: column;
}

.card_block .bold {
    display: block;
    min-height: 42px;
    margin-bottom: 10px;
}

.card_block .bold a {
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
}

.card_block .yes {
    display: block;
    margin: 0 0 12px;
    color: #25a525;
    font-size: 15px;
}

.card_block .price {
    display: block;
    order: 3;
    margin: 12px 0 0;
    font-size: 25px;
    line-height: 1.2;
    color: #111;
}

.card_block .price sup {
    font-size: 16px;
    margin-left: 3px;
}

.card_block .card_block_links {
    order: 4;
    display: block;
    width: 100%;
    max-width: 220px;
    min-height: 46px;
    margin: 15px 0 0;
    padding: 10px 15px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}


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

@media (max-width: 767px) {

    .card_block {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 16px !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    .card_block > a {
        display: block;
        height: 170px;
        margin: 0 0 12px;
        text-align: center;
    }

    .card_block > a img {
        width: 100% !important;
        max-width: 300px !important;
        height: 170px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    .card_block .cont {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    .card_block .bold {
        min-height: 0 !important;
        margin: 0 0 8px !important;
    }

    .card_block .bold a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }

    .card_block .yes {
        margin: 0 0 10px !important;
        font-size: 16px !important;
    }

    .card_block .price {
        order: 3 !important;
        margin: 0 0 14px !important;
        font-size: 25px !important;
        line-height: 1.2 !important;
    }

    .card_block .price sup {
        font-size: 16px !important;
    }

    .card_block .card_block_links {
        order: 4 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 12px 15px !important;
        font-size: 15px !important;
        line-height: 22px !important;
        white-space: nowrap !important;
    }

}
/* ===== ФИНАЛЬНАЯ ПРАВКА КАРТОЧЕК ===== */

/* Цена выше кнопки */
.card_block .price {
    order: 3 !important;
    display: block !important;
    margin: 10px 0 14px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
}

/* Кнопка ниже цены */
.card_block .card_block_links {
    order: 4 !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 11px 8px !important;

    box-sizing: border-box !important;

    font-size: 13px !important;
    line-height: 22px !important;

    white-space: nowrap !important;
    text-align: center !important;
}


/* МОБИЛЬНЫЙ */
@media (max-width: 767px) {

    .card_block .price {
        margin: 8px 0 14px !important;
        font-size: 26px !important;
    }

    .card_block .card_block_links {
        width: 100% !important;
        max-width: none !important;
        min-height: 50px !important;

        padding: 13px 10px !important;

        font-size: 15px !important;
        line-height: 22px !important;

        white-space: nowrap !important;
    }
}
/* =====================================
   КАРТОЧКИ ТАХОГРАФОВ
   ===================================== */

.card_block {
    box-sizing: border-box !important;
    background: #fff;
    border: 1px solid #e4e4e4;
    padding: 14px !important;
}

.card-product-image {
    display: block;
    width: 100%;
    height: 160px;
    margin-bottom: 15px;
    text-align: center;
}

.card-product-image img {
    width: 100% !important;
    max-width: 226px !important;
    height: 160px !important;
    object-fit: contain !important;
}

.card_block .cont {
    display: block !important;
}

.card_block .bold {
    display: block !important;
    min-height: 42px;
    margin-bottom: 8px;
}

.card_block .bold a {
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
}

.card_block .yes {
    display: block !important;
    margin-bottom: 12px !important;
    color: #25a525 !important;
    font-size: 15px;
}

.card_block .price {
    display: block !important;
    margin: 0 0 14px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    color: #111 !important;
}

.card_block .card-price-button {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    font-size: 13px !important;
    line-height: 46px !important;
    white-space: nowrap !important;
    text-align: center !important;
}


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

@media (max-width: 767px) {

    .card_block {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 0 16px !important;
        padding: 14px !important;
    }

    .card-product-image {
        height: 180px !important;
        margin-bottom: 12px !important;
    }

    .card-product-image img {
        width: 100% !important;
        max-width: 320px !important;
        height: 180px !important;
        object-fit: contain !important;
    }

    .card_block .bold {
        min-height: 0 !important;
        margin-bottom: 8px !important;
    }

    .card_block .bold a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }

    .card_block .yes {
        margin-bottom: 10px !important;
        font-size: 16px !important;
    }

    .card_block .price {
        margin: 0 0 14px !important;
        font-size: 26px !important;
    }

    .card_block .card-price-button {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        font-size: 15px !important;
        line-height: 50px !important;

        white-space: nowrap !important;
    }
}

.mos-build-net-seo-content{--mos-build-net-bg:#fff;--mos-build-net-soft:#f5f8fa;--mos-build-net-border:#e4e9ed;--mos-build-net-text:#17212b;--mos-build-net-muted:#45515e;--mos-build-net-blue:#0787c8;--mos-build-net-blue-dark:#075bab;--mos-build-net-radius:8px;box-sizing:border-box;width:100%;background:var(--mos-build-net-bg);color:var(--mos-build-net-text);font-family:"PT Sans",sans-serif;font-size:16px;line-height:1.55}
.mos-build-net-seo-content *{box-sizing:border-box}
.mos-build-net-seo-content section,.mos-build-net-seo-content article{margin:0;padding:38px 24px;background:var(--mos-build-net-bg);color:var(--mos-build-net-text);border-bottom:1px solid var(--mos-build-net-border)}
.mos-build-net-seo-content .mos-build-net-soft{background:var(--mos-build-net-soft);color:var(--mos-build-net-text)}
.mos-build-net-seo-content h2,.mos-build-net-seo-content h3{color:var(--mos-build-net-text);font-weight:700;text-transform:none;padding:0}
.mos-build-net-seo-content h2{margin:0 0 14px;font-size:26px;line-height:1.2}
.mos-build-net-seo-content h3{margin:0 0 9px;font-size:19px;line-height:1.3}
.mos-build-net-seo-content p{margin:0 0 16px;color:var(--mos-build-net-muted);font-size:16px;line-height:1.55;text-align:left}
.mos-build-net-seo-content strong,.mos-build-net-seo-content span,.mos-build-net-seo-content small{color:inherit}
.mos-build-net-seo-content a{color:#057fbe;text-decoration:underline;font-weight:700}
.mos-build-net-seo-content a:hover{color:#489bd6}
.mos-build-net-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.mos-build-net-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mos-build-net-card{padding:19px;background:#fff;color:#17212b;border:1px solid #e4e9ed;border-radius:8px}
.mos-build-net-card p,.mos-build-net-card li,.mos-build-net-card span,.mos-build-net-card strong{color:#45515e}
.mos-build-net-card h3{color:#17212b}
.mos-build-net-list{margin:12px 0 0;padding:0;list-style:none}
.mos-build-net-list li{position:relative;margin:0 0 9px;padding-left:18px;color:#45515e}
/* .mos-build-net-list li:before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;background:#0787c8;border-radius:50%} */
.mos-build-net-table-wrap{width:100%;margin-top:22px;overflow-x:auto;border:1px solid #dfe5e9;border-radius:8px;background:#fff;color:#17212b}
.mos-build-net-table{width:100%;min-width:620px;border-collapse:collapse;background:#fff;color:#17212b}
.mos-build-net-table th{padding:13px 14px;background:#0787c8;color:#fff;font-size:15px;text-align:left;font-weight:700}
.mos-build-net-table td{padding:13px 14px;border-bottom:1px solid #e8ecef;color:#17212b;vertical-align:top}
.mos-build-net-table tr:last-child td{border-bottom:0}
.mos-build-net-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;counter-reset:mos-build-net-step}
.mos-build-net-step{position:relative;padding:18px 18px 18px 62px;background:#fff;color:#17212b;border:1px solid #e3e9ed;border-radius:8px;counter-increment:mos-build-net-step}
.mos-build-net-step:before{content:counter(mos-build-net-step);position:absolute;left:16px;top:18px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#0787c8;color:#fff;font-weight:700}
.mos-build-net-step h3{color:#17212b}
.mos-build-net-step p{margin:0;color:#45515e}
.mos-build-net-note{padding:16px 18px;background:#f5f8fa;color:#17212b;border-left:4px solid #0787c8}
.mos-build-net-note p{margin:0;color:#45515e}
.mos-build-net-faq{display:grid;gap:10px;margin-top:20px}
.mos-build-net-faq details{background:#fff;color:#17212b;border:1px solid #dfe5e9;border-radius:8px}
.mos-build-net-faq summary{padding:16px;color:#17212b;font-weight:700;cursor:pointer}
.mos-build-net-faq details p{padding:0 16px 16px;margin:0;color:#45515e}
.mos-build-net-action{background:#087fbb!important;color:#fff!important;text-align:center}
.mos-build-net-action h2,.mos-build-net-action p{color:#fff}
.mos-build-net-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.mos-build-net-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:5px;border-bottom:3px solid #044090;background:linear-gradient(to bottom,#178ccb 0,#075bab 100%);color:#fff!important;text-decoration:none!important;text-transform:uppercase;font-size:13px;font-weight:700}
.mos-build-net-button:hover{color:#fff!important;border-bottom-color:#075bab}
.mos-build-net-button-alt{background:#fff;color:#057fbe!important;border:2px solid #fff}
.mos-build-net-seo-text ul,.mos-build-net-seo-text ol{margin:0;padding-left:24px;color:#45515e}
.mos-build-net-seo-text li{margin:0 0 8px;color:#45515e}
.mos-build-net-seo-text ul + h1,.mos-build-net-seo-text ul + h2,.mos-build-net-seo-text ul + h3,.mos-build-net-seo-text ul + h4,.mos-build-net-seo-text ul + h5,.mos-build-net-seo-text ul + h6,.mos-build-net-seo-text ol + h1,.mos-build-net-seo-text ol + h2,.mos-build-net-seo-text ol + h3,.mos-build-net-seo-text ol + h4,.mos-build-net-seo-text ol + h5,.mos-build-net-seo-text ol + h6{margin-top:clamp(24px,3vw,36px)}
@media(max-width:760px){.mos-build-net-seo-content section,.mos-build-net-seo-content article{padding:30px 16px}.mos-build-net-seo-content h2{font-size:24px}.mos-build-net-grid,.mos-build-net-grid-two,.mos-build-net-steps{grid-template-columns:1fr}.mos-build-net-buttons{flex-direction:column}.mos-build-net-button{width:100%}}
.mos-build-net-seo-content [data-surface="dark"]{--mos-build-net-surface-text:#f8fafc;color:var(--mos-build-net-surface-text)!important}.mos-build-net-seo-content [data-surface="light"]{--mos-build-net-surface-text:#1b2b40;color:var(--mos-build-net-surface-text)!important}.mos-build-net-seo-content [data-surface] :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,span,strong,small,th,td){color:var(--mos-build-net-surface-text)!important}