/* Shared pricing card (_PricingPlans partial) for /pricing and the landing page. Mobile first, light theme only.
   One card; a CSS-only Monthly / Annual toggle (radios + :checked ~) shows one of two panels.
   Scoped under .pricing-block so it beats the generic .marketing-main p rules. */
.pricing-block {
    --pp-navy: var(--kuka-navy-700, #1f3d7a);
    --pp-navy-hover: var(--kuka-navy-800, #152238);
    --pp-navy-deep: var(--kuka-navy-950, #0b1220);
    --pp-brass-pale: #e3cd9d;
    max-width: 30rem;
    margin: var(--tt-space-5) auto;
}

.pricing-block .pricing-card {
    position: relative;
    padding: 1.25rem;
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-color-surface);
    box-shadow: var(--tt-shadow-md);
}

/* Visually hidden but still focusable, so arrow keys and Tab work natively. */
.pricing-block .pricing-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* ---------- segmented toggle ---------- */
.pricing-block .pricing-toggle {
    display: flex;
    gap: var(--tt-space-1);
    margin-top: var(--tt-space-3);
    padding: var(--tt-space-1);
    border-radius: var(--tt-radius-md);
    background: var(--tt-color-surface-sunken);
}

.pricing-block .pricing-toggle__option {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2) var(--tt-space-3);
    border-radius: var(--tt-radius-sm);
    color: var(--tt-color-text-muted);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-semibold);
    line-height: var(--tt-line-height-tight);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pricing-block .pricing-toggle__option:hover {
    color: var(--tt-color-text);
}

/* The "Save 20%" pill floats over the top-left corner of the annual segment. */
.pricing-block .pricing-toggle__badge {
    position: absolute;
    top: -0.9rem;
    left: var(--tt-space-2);
    padding: 0.0625rem var(--tt-space-2);
    border-radius: var(--tt-radius-pill);
    background: var(--pp-brass-pale);
    color: var(--pp-navy-deep);
    font-size: var(--tt-font-size-xs);
    font-weight: var(--tt-font-weight-bold);
    line-height: 1.4;
    white-space: nowrap;
}

.pricing-block .pricing-card__input--monthly:checked ~ .pricing-toggle .pricing-toggle__option--monthly,
.pricing-block .pricing-card__input--annual:checked ~ .pricing-toggle .pricing-toggle__option--annual {
    background: var(--pp-navy);
    color: #ffffff;
}

.pricing-block .pricing-card__input--monthly:focus-visible ~ .pricing-toggle .pricing-toggle__option--monthly,
.pricing-block .pricing-card__input--annual:focus-visible ~ .pricing-toggle .pricing-toggle__option--annual {
    outline: 3px solid var(--pp-brass-pale);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--pp-navy);
}

/* ---------- panels (both stay in the DOM; the checked radio picks the visible one) ---------- */
.pricing-block .pricing-panel {
    display: none;
    padding-top: var(--tt-space-4);
    text-align: center;
}

.pricing-block .pricing-card__input--annual:checked ~ .pricing-panels .pricing-panel--annual,
.pricing-block .pricing-card__input--monthly:checked ~ .pricing-panels .pricing-panel--monthly {
    display: block;
}

.pricing-block .pricing-panel__price {
    margin: 0;
}

.pricing-block .pricing-panel__amount {
    display: inline;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--tt-color-text);
}

/* Short suffix ("/mo + VAT") on the amount's baseline. */
.pricing-block .pricing-panel__period {
    display: inline;
    margin-inline-start: var(--tt-space-1);
    font-size: var(--tt-font-size-xs);
    line-height: var(--tt-line-height-normal);
    color: var(--tt-color-text-muted);
    white-space: nowrap;
}

/* One note line in both panels; the reserved height keeps both panels the same size. */
.pricing-block .pricing-panel__note {
    display: block;
    margin: var(--tt-space-1) 0 0;
    min-height: calc(var(--tt-font-size-xs) * var(--tt-line-height-normal));
    font-size: var(--tt-font-size-xs);
    line-height: var(--tt-line-height-normal);
    color: var(--tt-color-text-muted);
}

.pricing-block .pricing-panel__cta {
    display: flex;
    width: 100%;
    min-height: 48px;
    margin-top: var(--tt-space-4);
    background-color: var(--pp-navy);
    border-color: var(--pp-navy);
    color: #ffffff;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pricing-block .pricing-panel__cta:hover {
    background-color: var(--kuka-bronze-500, #b78a2e);
    border-color: var(--kuka-bronze-500, #b78a2e);
    color: var(--pp-navy-deep);
}

.pricing-block .pricing-panel__features {
    list-style: none;
    margin: var(--tt-space-4) 0 0;
    padding: var(--tt-space-4) 0 0;
    border-top: 1px solid var(--tt-color-border);
    text-align: start;
}

.pricing-block .pricing-panel__features li > span {
    flex: 1 1 0;
    min-width: 0;
}

.pricing-block .pricing-panel__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-space-3);
    margin: 0 0 var(--tt-space-2);
    font-size: var(--tt-font-size-sm);
    line-height: var(--tt-line-height-normal);
}

.pricing-block .pricing-panel__features li:last-child {
    margin-bottom: 0;
}

.pricing-block .pricing-panel__features .bi {
    flex: 0 0 auto;
    color: var(--tt-color-success);
    font-size: var(--tt-font-size-lg);
    line-height: 1.2;
}

/* #4a5568 is 6.7:1 on the landing tint (#eef2f8) and about 7:1 on the /pricing background; WCAG AA needs 4.5:1. */
.pricing-block .pricing-card__terms {
    margin: var(--tt-space-3) 0 0;
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tt-line-height-normal);
}

.pricing-block .pricing-card__terms a {
    color: #4a5568;
    text-decoration: underline;
}

.pricing-block .pricing-card__terms a:hover {
    color: var(--pp-navy);
}

@media (min-width: 576px) {
    .pricing-block .pricing-card {
        padding: 1.75rem;
    }
}

/* ---------- /pricing page extras ---------- */
.marketing-main .pricing-page__intro {
    text-align: center;
}

.marketing-main .pricing-page__note,
.marketing-main .pricing-demo {
    max-width: 40rem;
    margin: var(--tt-space-3) auto 0;
    text-align: center;
    font-size: var(--tt-font-size-sm);
    line-height: var(--tt-line-height-normal);
    color: var(--tt-color-text-muted);
}

.marketing-main .pricing-demo {
    margin-top: var(--tt-space-6);
}

/* ---------- landing section ---------- */
.welcome-d-pricing .welcome-heading,
.welcome-d-pricing__sub {
    margin-inline: auto;
    text-align: center;
}

.welcome-d-pricing .welcome-heading {
    margin-bottom: var(--tt-space-3);
}

.welcome-d-pricing__sub {
    max-width: 36rem;
    margin-top: 0;
    margin-bottom: var(--tt-space-6);
    color: var(--wd-muted, var(--tt-color-text-muted));
}

.welcome-d-pricing .pricing-block {
    margin-block: 0;
}

/* ---------- landing hero sign-in prompt ---------- */
body[data-variant="D"] .welcome-d-hero__signin {
    margin: var(--tt-space-2) 0 0;
    font-size: var(--tt-font-size-sm);
    text-align: center;
    color: var(--wd-muted);
}

body[data-variant="D"] .welcome-d-hero__signin a {
    color: var(--wd-navy);
    font-weight: var(--tt-font-weight-semibold);
}

/* ---------- nav sign-in link ---------- */
.welcome-nav__signin {
    color: var(--tt-color-text);
    text-decoration: none;
    font-weight: var(--tt-font-weight-medium);
    font-size: var(--tt-font-size-sm);
    white-space: nowrap;
}

.welcome-nav__signin:hover {
    color: var(--tt-color-primary);
}

@media (max-width: 575.98px) {
    .welcome-nav__pricing {
        display: none;
    }
}

/* ---------- marketing nav on phones: brand, language flag, Sign in and Get Started on one row ---------- */
@media (max-width: 575.98px) {
    .marketing-nav .welcome-nav__inner {
        flex-wrap: nowrap;
        gap: var(--tt-space-2);
        padding-inline: var(--tt-space-3);
    }

    .marketing-nav .welcome-nav__actions {
        flex-wrap: nowrap;
        gap: var(--tt-space-2);
    }

    .marketing-nav__secondary {
        display: none;
    }

    /* Flag only: font-size 0 hides the language name (the toggle keeps its aria-label); flag and caret get explicit sizes. */
    .marketing-nav .welcome-language-toggle {
        gap: 0;
        padding-inline: var(--tt-space-2);
        font-size: 0;
    }

    .marketing-nav .welcome-language-toggle .fi {
        font-size: var(--tt-font-size-lg);
    }

    .marketing-nav .welcome-language-toggle::after {
        margin-left: 0.4rem;
        border-width: 0.3rem 0.3rem 0;
    }

    .marketing-nav .marketing-nav__link {
        font-size: var(--tt-font-size-sm);
        white-space: nowrap;
    }

    .marketing-nav .tt-btn {
        padding-inline: var(--tt-space-3);
        font-size: var(--tt-font-size-sm);
        white-space: nowrap;
    }
}

/* Very narrow phones (320-364px): keep the logo mark only so the row still fits. */
@media (max-width: 364.98px) {
    .marketing-nav .welcome-brand span {
        display: none;
    }
}