/*
 * vlastni-shop.cz – doplňky k původnímu vzhledu
 *
 * Původní design webu je v theme.css (Bootstrap 3 a vlastní styly z roku 2016,
 * zkompilované, needitují se). Tady jsou jen prvky, které původní web neměl:
 * písmo uložené u webu, dlouhé texty, tabulky, karty a drobné opravy.
 * Drží se původního stylu: modrá #279ee9, verzálkové nadpisy s proklady,
 * tenké šedé linky, zaoblená tlačítka.
 */

/* ---------- Písmo Raleway (dřív se načítalo z Typekitu) ---------- */

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/raleway-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/raleway-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-feature-settings: 'lnum' 1;
}

.nowrap {
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -80px;
    left: 12px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: 30px;
    background: #fff;
    color: #382574;
    font-weight: 600;
}

.skip-link:focus {
    top: 12px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid #279ee9;
    outline-offset: 3px;
}

/* ---------- Hlavička ---------- */

/* Mezi 1125 a 1260 px se menu vedle loga nevešlo a spadlo pod něj; stačí užší mezery. */
@media (min-width: 1125px) and (max-width: 1260px) {
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li:nth-of-type(3) > a,
    .navbar-default .navbar-nav > li:nth-of-type(4) > a {
        padding-right: 13px;
        padding-left: 13px;
    }

    .navbar-default .navbar-nav > li:last-of-type > a {
        margin-left: 12px;
        padding-right: 24px;
        padding-left: 54px;
    }
}

.section-header h1 {
    margin-right: 0;
}

/* Úvodní stránka má pod nadpisem navíc jednu větu, proto je hlavička o její výšku vyšší. */
@media (min-width: 768px) {
    .section-header {
        max-height: 827px;
    }
}

/* ---------- Podstránky ---------- */

.section-page {
    padding: 40px 0 75px;
}

.section-page .subtitle::after {
    margin-bottom: 40px;
}

.section-page h1 {
    margin-top: 14px;
}

.section-page .cards {
    margin-top: 28px;
}

.breadcrumbs {
    color: #666;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 2;
    text-align: center;
    text-transform: uppercase;
}

.breadcrumbs a {
    color: #279ee9;
}

.breadcrumbs span[aria-hidden] {
    padding: 0 6px;
    color: #bbb;
}

/* ---------- Dlouhé texty ---------- */

.prose {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Široká tabulka smí na velké obrazovce přesáhnout sloupec textu. */
@media (min-width: 1160px) {
    .table-wide {
        margin-right: -100px;
        margin-left: -100px;
    }
}

.prose p,
.prose li,
.prose dd,
.prose td {
    color: #101010;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.75;
}

.prose p {
    margin-bottom: 16px;
}

.prose .lead-text {
    font-size: 17px;
    line-height: 1.7;
}

.prose h2 {
    margin: 52px 0 18px;
    font-size: 21px;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: left;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin: 26px 0 6px;
    color: #222;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.prose a {
    color: #279ee9;
    text-decoration: underline;
}

.prose a:hover {
    color: #382574;
}

.prose strong {
    font-size: inherit;
    line-height: inherit;
}

.prose a.btn {
    text-decoration: none;
}

.prose a.btn-blue,
.prose a.btn-blue:hover {
    color: #fff;
}

/* Seznam s modrou šipkou – jako původní seznam vlastností. */
.list-arrow {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.list-arrow li {
    position: relative;
    padding: 11px 0 11px 22px;
    border-bottom: 1px solid #e1e1e1;
}

.list-arrow li::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 2px;
    border: 4px solid transparent;
    border-left: 6px solid #279ee9;
}

.list-arrow--muted li::before {
    border-left-color: #9a9a9a;
}

/* Dvojice „kdy ano“ a „kdy ne“: dva panely vedle sebe. */
.yesno {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.yesno > div {
    padding: 24px 26px 10px;
    border-top: 3px solid #279ee9;
    background: #f1f8fd;
}

.yesno > div:last-child {
    border-top-color: #b5b5b5;
    background: #f5f5f5;
}

.yesno h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: #222;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.section-grey .yesno > div {
    background: #fff;
}

.yesno .list-arrow {
    margin-bottom: 0;
}

.yesno .list-arrow li {
    border-bottom-color: rgba(0, 0, 0, .08);
    font-size: 15px;
    line-height: 1.7;
}

.yesno .list-arrow li:last-child {
    border-bottom: 0;
}

/* Položky s nadpisem a odstavcem ve dvou sloupcích. */
.points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 44px;
}

.points > div {
    padding: 4px 0 10px;
    border-top: 1px solid #e1e1e1;
}

.points h3 {
    margin-top: 16px;
}

.points--single {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Tabulky ---------- */

.facts,
.compare {
    width: 100%;
    margin: 8px 0 14px;
    border-collapse: collapse;
}

.facts th,
.facts td,
.compare th,
.compare td {
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid #e1e1e1;
    text-align: left;
    vertical-align: top;
}

.facts th,
.compare tbody th,
.compare thead th {
    color: #595959;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.9;
    text-transform: uppercase;
}

.facts th {
    width: 32%;
}

.compare thead th {
    padding-bottom: 14px;
    border-bottom: 3px solid #279ee9;
    color: #222;
    font-size: 13px;
    font-weight: 900;
}

.compare thead th a {
    color: #222;
    text-decoration: none;
}

.compare thead th a:hover {
    color: #279ee9;
}

.compare tbody th {
    width: 17%;
}

.compare--pair tbody th {
    width: 22%;
}

.sources-note {
    color: #777 !important;
    font-size: 12px !important;
    letter-spacing: .02em;
}

.sources-note a {
    color: #777;
}

/* Přehled „odkud kam“. */
.matrix {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    border-collapse: collapse;
}

.matrix th,
.matrix td {
    padding: 13px 10px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 14px;
    text-align: center;
}

.matrix thead th {
    border-bottom: 3px solid #279ee9;
    color: #222;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.matrix tbody th {
    font-weight: 700;
    text-align: left;
}

.matrix a {
    color: #279ee9;
}

.matrix td a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #279ee9;
    border-radius: 50%;
    transition: all .3s;
}

.matrix td a .icon {
    width: 15px;
    height: 15px;
    stroke: #279ee9;
    stroke-width: 4.5;
}

.matrix td a:hover,
.matrix td a:focus {
    background: #279ee9;
}

.matrix td a:hover .icon,
.matrix td a:focus .icon {
    stroke: #fff;
}

.matrix tbody th a {
    color: #101010;
}

.matrix .matrix-none {
    color: #b5b5b5;
}

/* ---------- Karty ---------- */

.cards {
    display: flex;
    flex-wrap: wrap;
}

.card-col {
    display: flex;
    margin-bottom: 30px;
}

.card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px 20px 20px;
    border: 1px solid #ddd;
    background: #fff;
}

.card-kind {
    margin-bottom: 6px;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.card h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.card h3 a {
    color: #101010;
}

.card p {
    font-size: 14px;
    line-height: 1.7;
}

.card .card-more {
    margin: auto 0 0;
    padding-top: 10px;
    text-align: right;
}

.btn-dark {
    padding: 2.5px 28px 1.5px;
    border-color: #2f2f2f;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 32.35px;
    text-transform: uppercase;
    transition: all .5s;
}

.btn-dark:hover,
.btn-dark:focus {
    background: #222;
    color: #eae9e7;
}

.btn-blue {
    padding: 0 40px;
    border-color: #279ee9;
    background: #279ee9;
    color: #fff;
    font-size: 14px;
    letter-spacing: .28em;
    line-height: 48px;
    text-transform: uppercase;
    transition: all .5s;
}

.btn-blue:hover,
.btn-blue:focus {
    border-color: #382574;
    background: #382574;
    color: #fff;
}

.page-cta {
    margin: 44px 0 0;
    text-align: center;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: auto 0 0;
    padding: 12px 0 0;
    list-style: none;
}

.tags li {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 30px;
    color: #595959;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
}

/* Karty na modrém pásu (úvodní stránka). */
.section-themes .card {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(13, 13, 60, .35);
}

.section-themes .card h3 a,
.section-themes .card p {
    color: #fff;
}

.section-themes .card .card-kind {
    color: #c7c7c7;
}

.section-themes .card .btn-dark {
    border-color: #fff;
    color: #fff;
}

.section-themes .card .btn-dark:hover,
.section-themes .card .btn-dark:focus {
    background: #fff;
    color: #382574;
}

.section-themes .cards {
    padding: 0 15px;
}

.section-themes .more-themes {
    margin-top: 14px;
}

.section-benefits .lead-col p {
    font-size: 14px;
    line-height: 1.75;
}

.section-plain {
    padding: 32px 0 75px;
}

.section-plain .subtitle::after,
.section-grey .subtitle::after {
    margin-bottom: 40px;
}

.section-grey {
    padding: 32px 0 55px;
    background: #ececec;
}

.section-more {
    margin-top: 34px;
    text-align: center;
}

/* ---------- Časté otázky ---------- */

.faq {
    border-top: 1px solid #e1e1e1;
}

.faq-item {
    border-bottom: 1px solid #e1e1e1;
}

.faq-item summary {
    position: relative;
    padding: 18px 50px 18px 0;
    color: #222;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

.faq-item summary::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 2px;
    width: 30px;
    height: 30px;
    border: 1px solid #279ee9;
    border-radius: 50%;
    /* Znaménko plus ze dvou čar, po rozbalení zůstane jen vodorovná. */
    background:
        linear-gradient(#279ee9, #279ee9) center / 12px 2px no-repeat,
        linear-gradient(#279ee9, #279ee9) center / 2px 12px no-repeat;
    transition: background-color .3s;
}

.faq-item summary:hover::after {
    background-color: #e3f2fc;
}

.faq-item[open] summary::after {
    background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat #279ee9;
}

.faq-item p {
    margin: 0;
    padding: 0 50px 20px 0;
}

/* ---------- Formulář ---------- */

.section-order .form-control {
    height: 40px;
    font-size: 14px;
}

.section-order textarea.form-control {
    height: auto;
}

.section-order .control-label {
    font-size: 13px;
    line-height: 1.4;
}

.section-order .optional {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: 400;
}

.section-order .help-block {
    margin-bottom: 0;
    font-size: 13px;
}

.section-order .form-alert {
    margin: 0 15px 30px;
    padding: 14px 18px;
    border-left: 3px solid #a94442;
    background: #f7f1f1;
    font-size: 14px;
    line-height: 1.6;
}

.section-order .form-alert strong {
    display: block;
    font-size: 15px;
    line-height: 1.6;
}

.section-order .form-check {
    padding-top: 4px;
    font-size: 13px;
}

.section-order .form-check input {
    margin-right: 8px;
}

.section-order form a {
    color: #279ee9;
}

.section-order .form-actions .btn {
    float: none;
}

.inquiry-aside {
    padding-left: 30px;
}

.inquiry-aside h2 {
    margin: 0 0 12px;
    font-size: 17px;
    letter-spacing: .1em;
    line-height: 1.5;
    text-align: left;
}

.inquiry-aside ol {
    margin: 0 0 34px;
    padding-left: 18px;
}

.inquiry-aside li,
.inquiry-aside p {
    font-size: 14px;
    line-height: 1.7;
}

.inquiry-aside li {
    padding: 6px 0;
}

.inquiry-aside a {
    color: #279ee9;
}

/* ---------- Patička ---------- */

.footer-about {
    max-width: 300px;
    margin-top: 16px;
    color: #9a9a9a;
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 1.8;
}

.footer-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li {
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 2.1;
}

.footer-links a,
.footer-links a:hover,
.footer-links a:focus {
    color: #fff;
}

.footer .contact p + p {
    margin-top: 12px;
}

.footer .contact .footer-phone,
.footer .contact .footer-phone:hover {
    color: #fff;
}

/* ---------- Prázdné stránky (poděkování, 404) ---------- */

.section-message {
    padding: 70px 15px 110px;
    text-align: center;
}

.section-message p {
    font-size: 15px;
    line-height: 1.75;
}

.section-message .btn {
    margin: 18px 6px 0;
}

/* ---------- Menší obrazovky ---------- */

@media (max-width: 991px) {
    .inquiry-aside {
        margin-top: 40px;
        padding-left: 15px;
    }

    .footer-links,
    .footer .contact {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    /* Ikony výhod jsou na telefonu mimo obrazovku, původní styl je skrýval jen zčásti. */
    .section-benefits .benefits .benefit::before {
        display: none;
    }

    /* Delší podtitulky se na telefonu lámou na víc řádků. */
    .subtitle {
        margin-top: 8px;
        padding: 0 15px;
        line-height: 1.9;
    }

    .yesno,
    .points {
        grid-template-columns: minmax(0, 1fr);
    }

    .yesno {
        gap: 24px;
    }

    .prose h2 {
        font-size: 19px;
    }

    /* Tabulky se na telefonu skládají pod sebe, popisek sloupce je u každé hodnoty. */
    .facts,
    .facts tbody,
    .facts tr,
    .facts th,
    .facts td,
    .compare,
    .compare tbody,
    .compare tr,
    .compare th,
    .compare td {
        display: block;
        width: auto;
    }

    .compare thead {
        display: none;
    }

    .facts th,
    .compare tbody th {
        width: auto;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .facts td {
        padding-top: 2px;
    }

    .compare tbody th {
        padding-top: 18px;
        color: #222;
        font-weight: 900;
    }

    .compare td {
        padding: 6px 0 10px;
    }

    .compare td::before {
        content: attr(data-label);
        display: block;
        color: #279ee9;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .matrix th,
    .matrix td {
        padding: 10px 4px;
        font-size: 12px;
    }

    .matrix thead th {
        font-size: 10px;
        letter-spacing: .04em;
    }

    .section-message {
        padding: 40px 15px 70px;
    }
}

/* ---------- Doplňky k jednotlivým stránkám ---------- */

p.subtitle {
    font-weight: 500;
}

.section-header .header-lead {
    max-width: 640px;
    margin: 0 auto 26px;
    padding: 0 15px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .08em;
    line-height: 1.8;
}

.matrix-note {
    margin: 22px 0 0;
    font-size: 14px;
    text-align: center;
}

.matrix-note a {
    color: #279ee9;
    text-decoration: underline;
}

.list-arrow--small {
    margin-bottom: 10px;
}

.list-arrow--small li {
    padding: 8px 0 8px 20px;
    font-size: 13px;
    line-height: 1.6;
}

.list-arrow--small li::before {
    top: 14px;
}

.list-arrow--small li:last-child {
    border-bottom: 0;
}

.card .card-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
}

.card .card-title a {
    color: #101010;
}

.prose--legal ol {
    padding-left: 20px;
}

.prose--legal ol > li {
    padding-left: 6px;
}

.prose--legal ul {
    margin: 8px 0 0;
}

/* ==========================================================================
   Vizuální prvky pro delší stránky: ikony, pás s čísly, dlaždice, kroky…
   ========================================================================== */

/* ---------- Ikony (helper icon(), tvary v partials/icons.blade.php) ---------- */

.icon-sprite {
    position: absolute;
}

.icon {
    display: block;
    flex: none;
    width: 46px;
    height: 46px;
    stroke-width: 2.5;
}

.icon--sm {
    width: 26px;
    height: 26px;
    stroke-width: 3.2;
}

.icon--white {
    stroke: #fff;
}

.icon--muted {
    stroke: #8f8f8f;
}

/* ---------- Úvod stránky a obsah stránky ---------- */

.section-intro {
    padding-bottom: 50px;
}

.toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin: 28px 0 0;
    padding: 0 15px;
    list-style: none;
}

.toc a {
    display: block;
    padding: 5px 16px;
    border: 1px solid #ddd;
    border-radius: 30px;
    color: #595959;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.9;
    text-transform: uppercase;
    transition: all .3s;
}

.toc a:hover,
.toc a:focus {
    border-color: #279ee9;
    color: #279ee9;
    text-decoration: none;
}

/* ---------- Pás s čísly ---------- */

.section-stats {
    padding: 42px 0 38px;
    background: #1b2f7a url('../img/themes.png') no-repeat center / cover;
}

.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.stat {
    flex: 1 1 0;
    min-width: 200px;
    padding: 4px 22px;
    border-left: 1px solid rgba(255, 255, 255, .22);
    text-align: center;
}

.stat:first-child {
    border-left: 0;
}

.stat-value {
    display: block;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.3;
}

.stat-label {
    display: block;
    margin-top: 6px;
    color: #d5d8ea;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.6;
    text-transform: uppercase;
}

/* ---------- Dlaždice s ikonou ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.tiles--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1000px;
}

.prose .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 10px 0 20px;
    padding: 0;
}

.tile {
    padding: 26px 24px 24px;
    border: 1px solid #ddd;
    background: #fff;
}

.tile .icon {
    margin-bottom: 16px;
}

.tile h3 {
    margin: 0 0 8px;
    color: #222;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.tile p,
.prose .tile p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- Seznam s ikonou u každé položky ---------- */

.checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
    list-style: none;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid #ddd;
    background: #fff;
    color: #101010;
    font-size: 15px;
    line-height: 1.6;
}

.prose .checklist {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 0 16px;
    padding: 0;
}

.prose .checklist li {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #e1e1e1;
    background: none;
    line-height: 1.7;
}

/* ---------- Řádky s velkou ikonou, nadpisem a textem ---------- */

.icon-rows {
    margin: 10px 0 20px;
}

.icon-rows > div {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid #e1e1e1;
}

.icon-rows > div:last-child {
    border-bottom: 1px solid #e1e1e1;
}

.icon-rows h3 {
    margin: 2px 0 6px;
}

.icon-rows p:last-child {
    margin-bottom: 0;
}

/* ---------- Číslované kroky ---------- */

.steps {
    margin: 14px 0 16px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps > li {
    position: relative;
    padding: 0 0 26px 72px;
    counter-increment: step;
}

.steps > li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #11a7e9 0%, #ab6ae7 100%);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    line-height: 46px;
    text-align: center;
}

.steps > li::after {
    content: '';
    position: absolute;
    top: 54px;
    bottom: 8px;
    left: 22px;
    width: 2px;
    background: #e1e1e1;
}

.steps > li:last-child {
    padding-bottom: 4px;
}

.steps > li:last-child::after {
    display: none;
}

.steps h3,
.prose .steps h3 {
    margin: 0 0 6px;
    padding-top: 10px;
}

.steps p {
    margin-bottom: 0;
}

.steps--sm > li {
    padding: 0 0 18px 48px;
}

.steps--sm > li::before {
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
}

.steps--sm > li::after {
    top: 36px;
    bottom: 6px;
    left: 14px;
}

.steps--sm > li,
.inquiry-aside .steps--sm > li {
    padding-top: 3px;
    padding-bottom: 18px;
}

.inquiry-aside .steps {
    padding-left: 0;
}

/* ---------- Zvýrazněný odstavec ---------- */

.callout {
    position: relative;
    margin: 26px 0;
    padding: 20px 24px 20px 30px;
    background: #f1f8fd;
}

.callout::before,
.price-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(to bottom, #11a7e9 0%, #ab6ae7 100%);
}

.callout p:last-child {
    margin-bottom: 0;
}

/* ---------- Cena ---------- */

.price-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 34px 38px 34px 42px;
    border: 1px solid #ddd;
    background: #fff;
}

.price-value {
    display: block;
    color: #222;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1.2;
}

.price-label {
    display: block;
    margin-top: 8px;
    color: #595959;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.6;
    text-transform: uppercase;
}

.price-box p {
    font-size: 15px;
    line-height: 1.75;
}

.price-box p:last-child {
    margin-bottom: 0;
}

.price-box a {
    color: #279ee9;
    text-decoration: underline;
}

/* ---------- Bílý panel na šedém pásu (tabulka) ---------- */

.panel-white {
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px 36px 20px;
    border: 1px solid #ddd;
    background: #fff;
}

.panel-white .compare {
    margin-top: 0;
}

.panel-white td {
    color: #101010;
    font-size: 15px;
    line-height: 1.75;
}

/* ---------- Odkazy jako štítky ---------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.chips li,
.prose .chips li {
    line-height: 1.4;
}

.chips a,
.prose .chips a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 16px;
    border: 1px solid #279ee9;
    border-radius: 30px;
    color: #279ee9;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
}

.chips .icon {
    width: 16px;
    height: 16px;
    stroke: #279ee9;
    stroke-width: 4.5;
}

.chips a:hover,
.chips a:focus {
    background: #279ee9;
    color: #fff;
}

.chips a:hover .icon,
.chips a:focus .icon {
    stroke: #fff;
}

/* ---------- „Odkud kam“ pod nadpisem stránky kombinace ---------- */

.route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
    margin: -6px 0 36px;
}

.route-node {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 26px 9px 18px;
    border: 1px solid #ccc;
    border-radius: 40px;
    background: #fff;
    color: #222;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
}

.route-node--to {
    border-color: transparent;
    background: linear-gradient(to right, #11a7e9 0%, #ab6ae7 100%);
    color: #fff;
}

.route .icon {
    width: 28px;
    height: 28px;
    stroke-width: 3;
}

.route > .icon {
    width: 30px;
    height: 30px;
}

/* ---------- Tři úrovně řešení (schéma v průvodci) ---------- */

.levels {
    margin: 30px 0 26px;
}

.levels-bars,
.levels-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 20px;
}

.levels-bars {
    align-items: end;
}

.level-bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 10px 12px;
    background: linear-gradient(to top right, #11a7e9 0%, #ab6ae7 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.level-bar--1 {
    height: 70px;
    opacity: .55;
}

.level-bar--2 {
    height: 120px;
    opacity: .78;
}

.level-bar--3 {
    height: 170px;
}

.levels-body > div {
    padding-top: 14px;
    border-top: 3px solid #222;
}

.levels-body h3,
.prose .levels-body h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.levels-body p,
.prose .levels-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.levels-axis,
.prose .levels-axis {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    color: #595959;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.levels-axis .icon {
    width: 18px;
    height: 18px;
    stroke-width: 4;
}

/* ---------- Ikony v kartách ---------- */

.card > .icon {
    margin-bottom: 16px;
}

.section-themes .card > .icon {
    stroke: #fff;
}

/* ---------- Menší obrazovky ---------- */

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

    .price-box {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 767px) {
    .tiles,
    .tiles--2,
    .prose .tiles,
    .checklist,
    .yesno {
        grid-template-columns: minmax(0, 1fr);
    }

    .tiles,
    .yesno {
        gap: 20px;
    }

    .stat {
        flex: 1 1 50%;
        min-width: 0;
        padding: 14px 12px;
        border-left: 0;
    }

    .stat-value {
        font-size: 23px;
    }

    .stat-label {
        font-size: 11px;
    }

    .price-box,
    .panel-white {
        margin-right: 15px;
        margin-left: 15px;
        padding: 26px 22px 26px 26px;
    }

    .panel-white {
        padding: 4px 20px 14px;
    }

    .price-value {
        font-size: 28px;
    }

    .icon-rows > div {
        gap: 16px;
    }

    .icon-rows .icon {
        width: 36px;
        height: 36px;
    }

    .steps > li {
        padding-left: 60px;
    }

    .steps--sm > li {
        padding-left: 48px;
    }

    .level-bar {
        padding: 0 4px 8px;
        font-size: 10px;
        letter-spacing: .02em;
    }

    .levels-bars,
    .levels-body {
        gap: 0 10px;
    }

    .route-node {
        padding: 7px 18px 7px 12px;
        font-size: 14px;
    }

    .faq-item summary {
        font-size: 16px;
    }
}

/* Odkazy v dlaždicích a řádcích s ikonou mimo sloupec textu. */
.tile a,
.icon-rows a {
    color: #279ee9;
    text-decoration: underline;
}

.tile a:hover,
.icon-rows a:hover {
    color: #382574;
}