:root {
    --vyzvy-gold: #d9b657;
    --vyzvy-brown: #472800;
    --vyzvy-brown-dark: #2e1a00;
    --vyzvy-cream: #fffcd8;
    --vyzvy-text: #2b2b2b;
    --vyzvy-muted: #6a6a6a;
    --vyzvy-ink: #1c1000;
    --vyzvy-gold-deep: #a8801f;
    --vyzvy-sand: #fbf7ec;
    --vyzvy-line: #ece2c6;
    --vyzvy-rust: #9a3b12;
    --vyzvy-on-dark: #f3ead2;
    --vyzvy-on-dark-muted: rgba(243, 234, 210, 0.82);
    --vyzvy-dark-surface: radial-gradient(60% 80% at 88% 15%, rgba(217, 182, 87, 0.26), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, rgba(217, 182, 87, 0.1), transparent 70%),
        linear-gradient(155deg, #3a2200 0%, var(--vyzvy-ink) 62%);
}

body.vyzvy {
    font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    color: var(--vyzvy-text);
    background: #fff;
}

.vyzvy h1,
.vyzvy h2,
.vyzvy h3 {
    color: var(--vyzvy-brown);
    font-weight: 700;
}

.vyzvy .text-muted {
    color: var(--vyzvy-muted) !important;
}

/*
 * The brand buttons set the Bootstrap 5.3 button variables instead of the colours themselves, so that every state
 * (hover, focus, active, disabled) is drawn by Bootstrap in the brand colours.
 */
.btn-vyzvy {
    --bs-btn-border-width: 2px;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vyzvy-brown);
    --bs-btn-border-color: var(--vyzvy-brown);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vyzvy-brown-dark);
    --bs-btn-hover-border-color: var(--vyzvy-brown-dark);
    --bs-btn-focus-shadow-rgb: 217, 182, 87;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vyzvy-brown-dark);
    --bs-btn-active-border-color: var(--vyzvy-brown-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--vyzvy-brown);
    --bs-btn-disabled-border-color: var(--vyzvy-brown);
}

.btn-vyzvy-outline {
    --bs-btn-border-width: 2px;
    --bs-btn-color: var(--vyzvy-brown);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--vyzvy-brown);
    --bs-btn-hover-color: var(--vyzvy-brown);
    --bs-btn-hover-bg: var(--vyzvy-cream);
    --bs-btn-hover-border-color: var(--vyzvy-brown);
    --bs-btn-focus-shadow-rgb: 217, 182, 87;
    --bs-btn-active-color: var(--vyzvy-brown);
    --bs-btn-active-bg: var(--vyzvy-gold);
    --bs-btn-active-border-color: var(--vyzvy-brown);
    --bs-btn-disabled-color: var(--vyzvy-brown);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--vyzvy-brown);
}

.btn-vyzvy-gold {
    --bs-btn-border-width: 2px;
    --bs-btn-color: var(--vyzvy-ink);
    --bs-btn-bg: var(--vyzvy-gold);
    --bs-btn-border-color: var(--vyzvy-gold);
    --bs-btn-hover-color: var(--vyzvy-ink);
    --bs-btn-hover-bg: #e8cb78;
    --bs-btn-hover-border-color: #e8cb78;
    --bs-btn-focus-shadow-rgb: 217, 182, 87;
    --bs-btn-active-color: var(--vyzvy-ink);
    --bs-btn-active-bg: #c9a440;
    --bs-btn-active-border-color: #c9a440;
    --bs-btn-disabled-color: var(--vyzvy-ink);
    --bs-btn-disabled-bg: var(--vyzvy-gold);
    --bs-btn-disabled-border-color: var(--vyzvy-gold);
}

.card-variant {
    border: 2px solid var(--vyzvy-gold);
}

.preview-image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.accordion-button:not(.collapsed) {
    background: var(--vyzvy-cream);
    color: var(--vyzvy-brown);
}

/*
 * Landing page. It is shown in an iframe on leonylegal.sk, so it borrows that site's dark-and-gold look for its two
 * dark panels (the hero and the closing call to action) and stays white in between.
 */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
}

.landing .btn,
.flow .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.landing .btn-lg,
.flow .btn-lg {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-border-radius: 0.6rem;
    font-weight: 700;
}

.btn .icon-arrow-right {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .icon-arrow-right {
    transform: translateX(4px);
}

.landing-hero,
.landing-final {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--vyzvy-dark-surface);
    box-shadow: inset 0 0 0 1px rgba(217, 182, 87, 0.22);
    color: var(--vyzvy-on-dark);
}

.landing-hero {
    padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
}

.vyzvy .landing-hero-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
    line-height: 1.08;
    color: #fbf4df;
    text-wrap: balance;
}

.landing-hero-title span {
    display: block;
    color: var(--vyzvy-gold);
}

.landing-hero-lead {
    max-width: 36em;
    margin-bottom: 2rem;
    font-size: 1.3rem;
    color: var(--vyzvy-on-dark-muted);
}

.landing-hero-lead strong {
    color: #fff;
}

.landing-hero-price {
    font-weight: 600;
    color: var(--vyzvy-on-dark-muted);
}

.landing-hero-proof {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 34em;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(217, 182, 87, 0.3);
    color: var(--vyzvy-on-dark-muted);
}

.landing-hero-proof-figure {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--vyzvy-gold);
}

.landing-hero-proof-figure small {
    margin-right: 0.1em;
    font-size: 1.15rem;
    font-weight: 600;
}

.landing-hero-papers {
    position: relative;
    max-width: 25rem;
    aspect-ratio: 1 / 1.1;
    margin-inline: auto;
}

.landing-paper {
    position: absolute;
    width: 72%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.landing-paper-back {
    top: 0;
    right: 2%;
    transform: rotate(5deg);
    filter: brightness(0.9);
}

.landing-paper-front {
    bottom: 2%;
    left: 4%;
    transform: rotate(-3deg);
}

.landing-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem 0.45rem 0.45rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--vyzvy-brown);
}

.landing-chip-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--vyzvy-gold);
    color: var(--vyzvy-ink);
}

.landing-chip-top {
    top: 16%;
    right: -2%;
}

.landing-chip-bottom {
    bottom: 12%;
    left: -4%;
}

.landing-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 2rem 0;
    border-bottom: 1px solid var(--vyzvy-line);
    list-style: none;
}

.landing-trust li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.landing-trust .icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem;
    border-radius: 50%;
    background: var(--vyzvy-cream);
    color: var(--vyzvy-brown);
}

.landing-trust strong {
    display: block;
    font-size: 1.15rem;
    color: var(--vyzvy-brown);
}

.landing-trust span {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--vyzvy-muted);
}

.landing-section {
    padding-top: clamp(3.5rem, 2rem + 4vw, 6rem);
}

.landing-section-intro {
    max-width: 46rem;
    margin: 0 auto 2.75rem;
    text-align: center;
}

.landing-section-intro p {
    margin-bottom: 0;
    font-size: 1.25rem;
    color: var(--vyzvy-muted);
}

.vyzvy .landing-heading {
    margin-bottom: 1.25rem;
    font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.6rem);
    line-height: 1.12;
    text-wrap: balance;
}

.landing-heading::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 2px;
    margin-top: 1rem;
    background: var(--vyzvy-gold);
}

.landing-section-intro .landing-heading::after {
    margin-inline: auto;
}

.landing-variants {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.landing-variants li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.landing-variants-icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--vyzvy-cream);
    color: var(--vyzvy-brown);
}

.landing-variants-icon-strong {
    background: var(--vyzvy-brown);
    color: var(--vyzvy-gold);
}

.landing-emphasis {
    margin-bottom: 1.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vyzvy-brown);
}

.landing-debt {
    margin: 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    border: 1px solid var(--vyzvy-line);
    border-radius: 1.25rem;
    background: var(--vyzvy-sand);
    box-shadow: 0 30px 60px -35px rgba(71, 40, 0, 0.45);
}

.landing-debt-caption strong {
    display: block;
    font-size: 1.35rem;
    color: var(--vyzvy-brown);
}

.landing-debt-caption span {
    font-size: 1rem;
    color: var(--vyzvy-muted);
}

.landing-debt-rows {
    display: grid;
    gap: 1.35rem;
    margin: 1.75rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.landing-debt-rows li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: 0.45rem;
}

.landing-debt-label {
    font-weight: 600;
}

.landing-debt-amount {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vyzvy-brown);
}

.landing-debt-bar {
    grid-column: 1 / -1;
    height: 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(71, 40, 0, 0.08);
}

.landing-debt-bar span {
    display: block;
    width: calc(var(--share) * 100%);
    height: 100%;
    border-radius: inherit;
    background: var(--vyzvy-gold);
    transform-origin: left;
}

.landing-debt-rows li:nth-child(2) .landing-debt-bar span {
    background: #b8862b;
}

.landing-debt-rows li:nth-child(3) .landing-debt-bar span {
    background: var(--vyzvy-rust);
}

.landing-debt-rows li:nth-child(3) .landing-debt-amount {
    color: var(--vyzvy-rust);
}

.landing-debt-difference {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(71, 40, 0, 0.25);
}

.landing-debt-difference strong {
    font-size: 1.9rem;
    white-space: nowrap;
    color: var(--vyzvy-rust);
}

/* landing.js sets is-pending only when the visitor has not asked for reduced motion, so without it the bars are full. */
.landing-debt.is-pending .landing-debt-bar span {
    transform: scaleX(0.06);
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-debt.is-pending .landing-debt-rows li:nth-child(2) .landing-debt-bar span {
    transition-delay: 0.18s;
}

.landing-debt.is-pending .landing-debt-rows li:nth-child(3) .landing-debt-bar span {
    transition-delay: 0.36s;
}

.landing-debt.is-pending .landing-debt-difference {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease-out 1s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s;
}

.landing-debt.is-revealed .landing-debt-bar span {
    transform: none;
}

.landing-debt.is-revealed .landing-debt-difference {
    opacity: 1;
    transform: none;
}

.landing-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    text-align: center;
}

.landing-steps::before {
    content: "";
    position: absolute;
    top: 2rem;
    right: 12.5%;
    left: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--vyzvy-gold) 0 8px, transparent 8px 14px);
}

.landing-steps li {
    position: relative;
    counter-increment: step;
}

.landing-steps-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--vyzvy-brown);
    box-shadow: 0 0 0 8px #fff;
    color: var(--vyzvy-gold);
}

.landing-steps-icon .icon {
    width: 1.6rem;
    height: 1.6rem;
}

.landing-steps-icon::after {
    content: counter(step);
    position: absolute;
    top: -0.3rem;
    right: -0.4rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--vyzvy-gold);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vyzvy-ink);
}

.landing-steps h3 {
    font-size: 1.35rem;
}

.landing-steps p {
    margin-bottom: 0;
    color: var(--vyzvy-muted);
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    border: 1px solid var(--vyzvy-line);
    border-radius: 1.25rem;
    background: #fff;
}

.plan-featured {
    border-color: transparent;
    background: var(--vyzvy-dark-surface);
    box-shadow: 0 40px 70px -40px rgba(46, 26, 0, 0.85);
    color: var(--vyzvy-on-dark);
}

.vyzvy .plan-name {
    margin-bottom: 0.25rem;
    font-size: 1.6rem;
}

.vyzvy .plan-featured .plan-name {
    color: var(--vyzvy-gold);
}

.plan-price {
    margin-bottom: 0.5rem;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--vyzvy-brown);
}

.plan-price small {
    font-size: 1.2rem;
    font-weight: 600;
}

.plan-featured .plan-price {
    color: #fff;
}

.plan-pricing {
    font-size: 1.05rem;
    color: var(--vyzvy-on-dark-muted);
}

.plan-summary {
    margin-bottom: 1.25rem;
    font-size: 1.15rem;
}

.plan-featured .plan-summary strong {
    color: #fff;
}

.plan-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--vyzvy-gold);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vyzvy-ink);
}

.checklist {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.checklist .icon {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
    stroke-width: 2.5;
    color: var(--vyzvy-gold-deep);
}

.plan-featured .checklist .icon {
    color: var(--vyzvy-gold);
}

.plan-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: rgba(217, 182, 87, 0.13);
    font-weight: 600;
    color: #f7edcf;
}

.plan-note .icon {
    margin-top: 0.15em;
    color: var(--vyzvy-gold);
}

.plan:not(.plan-featured) .plan-note {
    background: var(--vyzvy-sand);
    color: var(--vyzvy-brown);
}

.plan:not(.plan-featured) .plan-note .icon {
    color: var(--vyzvy-gold-deep);
}

.landing-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--vyzvy-line);
    border-radius: 1.25rem;
}

.landing-compare-side {
    padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    background: #f6f4ef;
}

.vyzvy .landing-compare-side h3 {
    margin-bottom: 1.5rem;
    font-size: 1.45rem;
    color: var(--vyzvy-muted);
}

.landing-compare-side ul {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-compare-side li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.15rem;
}

.landing-compare-side li .icon {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0.4rem;
    border-radius: 50%;
    background: rgba(154, 59, 18, 0.09);
    stroke-width: 2.25;
    color: var(--vyzvy-rust);
}

.landing-compare-side:not(.landing-compare-ours) li {
    color: var(--vyzvy-muted);
}

.landing-compare-ours {
    background: var(--vyzvy-cream);
}

.vyzvy .landing-compare-ours h3 {
    color: var(--vyzvy-brown);
}

.landing-compare-ours ul {
    margin-bottom: 2rem;
}

.landing-compare-ours li {
    font-weight: 600;
}

.landing-compare-ours li .icon {
    background: var(--vyzvy-brown);
    color: var(--vyzvy-gold);
}

.landing-previews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 52rem;
    margin: 0 auto 1.5rem;
}

.landing-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    padding: 1.75rem 1.5rem 0;
    border: 1px solid var(--vyzvy-line);
    border-radius: 1.25rem;
    background: var(--vyzvy-sand);
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.3s ease-out;
}

.landing-preview:hover {
    box-shadow: 0 24px 50px -30px rgba(71, 40, 0, 0.55);
}

.landing-preview:focus-visible {
    outline: 3px solid var(--vyzvy-gold);
    outline-offset: 3px;
}

.landing-preview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    order: -1;
    padding: 0.55rem 1.2rem;
    border: 2px solid var(--vyzvy-brown);
    border-radius: 0.6rem;
    background: #fff;
    font-weight: 700;
    color: var(--vyzvy-brown);
    transition: background-color 0.2s, color 0.2s;
}

.landing-preview[aria-expanded="true"] .landing-preview-label {
    background: var(--vyzvy-brown);
    color: #fff;
}

.landing-preview-paper {
    display: block;
    width: 78%;
    height: 15rem;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -4px 26px -8px rgba(71, 40, 0, 0.35);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-preview:hover .landing-preview-paper {
    transform: translateY(-8px);
}

.landing-preview-paper img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

#previews > .collapse {
    max-width: 52rem;
    margin-inline: auto;
}

.landing-final {
    margin-top: clamp(3.5rem, 2rem + 4vw, 6rem);
    padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
    text-align: center;
}

.vyzvy .landing-final h2 {
    max-width: 28ch;
    margin: 0 auto 1rem;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.15;
    color: #fbf4df;
    text-wrap: balance;
}

.landing-final p {
    margin-bottom: 2rem;
    font-size: 1.25rem;
    color: var(--vyzvy-on-dark-muted);
}

@media (max-width: 991.98px) {
    .landing-trust,
    .landing-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-steps {
        row-gap: 2.75rem;
    }

    .landing-steps::before {
        display: none;
    }

    .landing-hero-papers {
        max-width: 21rem;
    }
}

@media (max-width: 767.98px) {
    .landing-compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .landing-trust,
    .landing-steps,
    .landing-previews {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-hero-proof-figure {
        font-size: 2.6rem;
    }

    .landing-chip {
        font-size: 0.9rem;
    }

    .landing-chip-top {
        right: 0;
    }

    .landing-chip-bottom {
        left: 0;
    }

    .plan-badge {
        position: static;
        margin-bottom: 1rem;
    }

    .landing-preview-paper {
        height: 11rem;
    }
}

/*
 * Order flow: the four steps, the payment and the result page. Same palette, type and cards as the landing page, so
 * that the visitor does not feel they left it for a bare form.
 */
.flow {
    max-width: 66rem;
    margin-inline: auto;
}

.flow-narrow {
    max-width: 46rem;
}

.flow-steps {
    display: flex;
    margin: 0 0 2.75rem;
    padding: 0;
    list-style: none;
}

.flow-steps li {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    color: var(--vyzvy-muted);
}

.flow-steps li + li::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    right: calc(50% + 1.5rem);
    left: calc(-50% + 1.5rem);
    height: 2px;
    background: var(--vyzvy-line);
}

.flow-steps li.is-done::before,
.flow-steps li.is-current::before {
    background: var(--vyzvy-gold);
}

.flow-steps-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid var(--vyzvy-line);
    border-radius: 50%;
    background: #fff;
    font-weight: 700;
}

.flow-steps-marker .icon {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.75;
}

.flow-steps .is-done {
    color: var(--vyzvy-text);
}

.flow-steps .is-done .flow-steps-marker {
    border-color: var(--vyzvy-gold);
    background: var(--vyzvy-gold);
    color: var(--vyzvy-ink);
}

.flow-steps .is-current {
    font-weight: 700;
    color: var(--vyzvy-brown);
}

.flow-steps .is-current .flow-steps-marker {
    border-color: var(--vyzvy-brown);
    background: var(--vyzvy-brown);
    box-shadow: 0 0 0 5px rgba(217, 182, 87, 0.28);
    color: var(--vyzvy-gold);
}

.flow-header {
    margin-bottom: 2rem;
}

.vyzvy .flow-title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    line-height: 1.12;
    text-wrap: balance;
}

.flow-lead {
    max-width: 44rem;
    margin-bottom: 0;
    font-size: 1.25rem;
    color: var(--vyzvy-muted);
}

.flow-lead strong {
    color: var(--vyzvy-text);
}

.flow-panel {
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
    border: 1px solid var(--vyzvy-line);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 24px 50px -40px rgba(71, 40, 0, 0.45);
}

.flow-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.flow-panel-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: var(--vyzvy-cream);
    color: var(--vyzvy-brown);
}

.flow-panel-icon .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.vyzvy .flow-panel-title {
    margin-bottom: 0.15rem;
    font-size: 1.6rem;
}

.flow-panel-head p {
    margin-bottom: 0;
    color: var(--vyzvy-muted);
}

.flow .form-label {
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.flow legend.form-label {
    float: none;
    font-size: inherit;
}

.flow .form-control {
    padding: 0.65rem 0.9rem;
    border-color: #ddd0ad;
    border-radius: 0.6rem;
    font-size: 1.1rem;
}

.flow .form-control-lg {
    padding: 0.8rem 1rem;
    font-size: 1.25rem;
}

.flow .form-control:focus,
.flow .form-check-input:focus {
    border-color: var(--vyzvy-gold);
    box-shadow: 0 0 0 0.22rem rgba(217, 182, 87, 0.3);
}

.flow .form-check-input {
    border-color: #c4b386;
}

.flow .form-check-input:checked {
    border-color: var(--vyzvy-brown);
    background-color: var(--vyzvy-brown);
}

.flow .form-text {
    color: var(--vyzvy-muted);
}

.flow .alert {
    border: 0;
    border-radius: 0.75rem;
}

.flow .alert-danger {
    background: #fbeae5;
    color: #7c2610;
}

.flow .alert-warning {
    background: #fdf4d9;
    color: #5f4300;
}

.flow .alert-info {
    background: var(--vyzvy-sand);
    color: var(--vyzvy-brown);
}

.flow-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.flow-alert .icon {
    margin-top: 0.2em;
}

.invoice-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: clamp(2rem, 1.25rem + 3vw, 3.25rem) 1.5rem;
    border: 2px dashed rgba(217, 182, 87, 0.8);
    border-radius: 1.25rem;
    background: var(--vyzvy-sand);
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.invoice-upload.is-dragging {
    border-color: var(--vyzvy-brown);
    background: var(--vyzvy-cream);
    box-shadow: 0 0 0 6px rgba(217, 182, 87, 0.22);
}

.invoice-upload-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--vyzvy-brown);
    color: var(--vyzvy-gold);
}

.invoice-upload-icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.invoice-upload-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vyzvy-brown);
}

.invoice-upload-more,
.invoice-upload.is-compact .invoice-upload-first,
.invoice-upload.is-compact .invoice-upload-hint {
    display: none;
}

.invoice-upload.is-compact .invoice-upload-more {
    display: inline;
}

.invoice-upload-hint {
    margin: 0;
    font-size: 1rem;
    color: var(--vyzvy-muted);
}

.invoice-upload-busy {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--vyzvy-brown);
}

.invoice-upload .alert {
    width: 100%;
    text-align: left;
}

.invoice-upload.is-compact {
    flex-flow: row wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding: 1.25rem 1.5rem;
}

.invoice-upload.is-compact .invoice-upload-icon {
    width: 3rem;
    height: 3rem;
}

.invoice-upload.is-compact .invoice-upload-icon .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.invoice-upload.is-compact .invoice-upload-title {
    font-size: 1.15rem;
}

.invoice-upload.is-compact .invoice-upload-busy,
.invoice-upload.is-compact .alert {
    flex-basis: 100%;
    justify-content: center;
}

.flow-invoice {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--vyzvy-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 20px 40px -34px rgba(71, 40, 0, 0.5);
}

.flow-invoice-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

.flow-invoice-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: var(--vyzvy-cream);
    color: var(--vyzvy-brown);
}

.vyzvy .flow-invoice-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.2rem;
}

.flow-invoice-name span {
    display: block;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--vyzvy-muted);
}

.flow-invoice-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--vyzvy-rust);
}

.flow-invoice-remove:hover,
.flow-invoice-remove:focus-visible {
    background: rgba(154, 59, 18, 0.08);
}

.flow-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.flow-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #ddd0ad;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.flow-tile:hover {
    border-color: var(--vyzvy-gold);
}

.flow-tile:has(:checked) {
    border-color: var(--vyzvy-brown);
    background: var(--vyzvy-cream);
    box-shadow: inset 0 0 0 1px var(--vyzvy-brown);
}

.flow-tile .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

.flow-check {
    margin: 0;
    padding: 0.9rem 1rem 0.9rem 2.9rem;
    border-radius: 0.75rem;
    background: var(--vyzvy-sand);
}

.flow-check + .flow-check {
    margin-top: 0.75rem;
}

.flow-check .form-check-input {
    margin-left: -1.9rem;
}

.flow-check .form-check-label {
    font-weight: 600;
}

.flow-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    background: var(--vyzvy-cream);
    color: var(--vyzvy-brown);
}

.flow-note .icon {
    margin-top: 0.2em;
}

.flow-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.flow a:not(.btn) {
    color: var(--vyzvy-brown);
    text-decoration-color: rgba(71, 40, 0, 0.35);
    text-underline-offset: 0.2em;
}

.flow-back,
.flow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--vyzvy-brown);
    text-decoration: underline;
    text-decoration-color: rgba(71, 40, 0, 0.3);
    text-underline-offset: 0.2em;
}

.flow-back {
    margin-top: 2rem;
}

.flow-back:hover,
.flow-link:hover {
    text-decoration-color: currentColor;
}

.plan-featured .flow-link {
    color: var(--vyzvy-gold);
    text-decoration-color: rgba(217, 182, 87, 0.45);
}

.flow-input-icon {
    position: relative;
}

.flow-input-icon > .icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--vyzvy-gold-deep);
    transform: translateY(-50%);
    pointer-events: none;
}

.flow-input-icon > .form-control {
    padding-left: 3rem;
}

.flow-summary {
    margin: 0;
}

.flow-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--vyzvy-line);
}

.flow-summary > div:first-child {
    padding-top: 0;
}

.flow-summary dt {
    font-weight: 400;
    color: var(--vyzvy-muted);
}

.flow-summary dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.flow-pay {
    height: auto;
}

.flow-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 1rem 0 0;
    font-size: 1rem;
    color: var(--vyzvy-muted);
}

.flow-pay .flow-secure {
    color: var(--vyzvy-on-dark-muted);
}

.flow-checkout {
    padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.flow-result {
    padding: clamp(2rem, 1.25rem + 3vw, 3.5rem) clamp(1.25rem, 0.75rem + 3vw, 3rem);
    border: 1px solid var(--vyzvy-line);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 30px 60px -40px rgba(71, 40, 0, 0.5);
    text-align: center;
}

.flow-result .flow-lead {
    margin-inline: auto;
}

.flow-result-icon {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--vyzvy-brown);
    box-shadow: 0 0 0 10px rgba(217, 182, 87, 0.2);
    color: var(--vyzvy-gold);
}

.flow-result-icon .icon {
    width: 2.25rem;
    height: 2.25rem;
    stroke-width: 2.25;
}

.flow-result-icon.is-failed {
    background: rgba(154, 59, 18, 0.1);
    box-shadow: none;
    color: var(--vyzvy-rust);
}

.flow-result-icon.is-waiting {
    background: var(--vyzvy-cream);
}

.flow-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(71, 40, 0, 0.15);
    border-top-color: var(--vyzvy-brown);
    border-radius: 50%;
    animation: flow-spin 0.9s linear infinite;
}

@keyframes flow-spin {
    to {
        transform: rotate(360deg);
    }
}

.flow-result-email {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    margin: 1rem 0 0;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: var(--vyzvy-cream);
    font-size: 1.2rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    color: var(--vyzvy-brown);
}

.flow-result-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    font-size: 1rem;
    color: var(--vyzvy-muted);
}

.flow-result-next {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    background: var(--vyzvy-sand);
    text-align: left;
}

.vyzvy .flow-result-next h2 {
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
}

.flow-result-next ol {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.25rem;
}

.flow-result .flow-actions {
    justify-content: center;
}

@media (max-width: 575.98px) {
    .flow-steps li {
        font-size: 0.85rem;
    }

    .flow-panel-head {
        gap: 0.75rem;
    }

    .flow-panel-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .flow-summary > div {
        flex-direction: column;
        gap: 0.15rem;
    }

    .flow-summary dd {
        text-align: left;
    }

    .flow-result-hint {
        align-items: flex-start;
        text-align: left;
    }

    .flow-actions .btn {
        width: 100%;
    }
}