/* Pricing uses the shared landing-page surfaces, spacing and type scale. */
.pricing {
    --pricing-context-top: calc(var(--header-height) + var(--header-offset));
    --pricing-context-height: calc(var(--space-500) + var(--space-250));
    --pricing-rail-top: calc(var(--pricing-context-top) + var(--pricing-context-height) + var(--space-300));
    --pricing-rail-height: calc(100dvh - var(--pricing-rail-top) - var(--space-300));
    background: var(--color-background-alt);
}

.pricing__header {
    display: grid;
    gap: var(--space-300);
    max-width: 850px;
    margin-bottom: var(--space-300);
}

.pricing__eyebrow {
    color: var(--color-text-accent);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pricing__title {
    color: var(--color-primary);
    font-size: clamp(var(--font-size-600), calc(1.5rem + 0.8vw), var(--font-size-625));
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

.pricing__description { color: var(--color-gray-600); }

.pricing__context {
    position: sticky;
    top: var(--pricing-context-top);
    z-index: var(--z-base);
    align-items: center;
    min-height: calc(var(--space-400) * 2);
    padding-block: var(--space-250);
    margin-bottom: var(--space-300);
    border-bottom: var(--border-width) solid transparent;
    background: var(--color-background-alt);
}
.pricing__context.is-stuck { border-bottom-color: var(--color-border); }

.pricing__context-title {
    grid-column: 2;
    padding-inline-start: calc(var(--space-300) + var(--border-width));
    color: var(--color-primary);
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}


.pricing__context,
.pricing__layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 360px;
    gap: var(--space-300);
}
.pricing__layout { align-items: start; }

.pricing__content { display: grid; gap: var(--space-300); min-width: 0; isolation: isolate; }

.pricing__service {
    display: flex;
    flex-direction: column;
    gap: var(--space-150);
    min-width: 0;
    scroll-margin-top: var(--pricing-rail-top);
}

.pricing__service--outsourcing { gap: var(--space-300); }

.pricing__service-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary);
    font-size: var(--font-size-500);
    line-height: var(--line-height-heading);
}
.pricing__service-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: var(--color-secondary);
}
.pricing__service > .pricing__cta { align-self: flex-start; }


.pricing__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
    padding: var(--space-100);
    background: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pricing__nav-link {
    position: relative;
    text-decoration: none;
    text-align: left;
    padding: var(--space-200);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-gray-600);
    font: inherit;
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-550);
    cursor: pointer;
}

.pricing__nav-link:hover { background: var(--color-gray-100); }
.pricing__nav-link[aria-current="location"] {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-white));
    color: var(--color-primary);
}

.pricing__nav-link[aria-current="location"]::before {
    content: '';
    position: absolute;
    inset-block: var(--space-150);
    left: 0;
    width: var(--space-050);
    border-radius: var(--radius-full);
    background: var(--color-secondary);
}

.pricing :is(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-text-accent);
    outline-offset: 3px;
}

.pricing__summary [hidden] { display: none; }

.pricing__settings,
.pricing__card,
.pricing__summary,
.pricing__service-copy,
.pricing__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    min-width: 0;
}

.pricing__card,
.pricing__summary {
    padding: var(--space-300);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.pricing__heading {
    color: var(--color-primary);
    font-size: var(--font-size-450);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}

.pricing__muted {
    color: var(--color-gray-600);
    font-size: var(--font-size-150);
}

.pricing__accent { color: var(--color-text-accent); font-weight: var(--font-weight-550); }
.pricing__calculator { --pricing-control-price-width: 11rem; }

.pricing__stepper {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-050);
    padding: var(--space-050) var(--space-100);
    font-size: var(--font-size-300);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-550);
}

.pricing__calculator .pricing__stepper {
    display: grid;
    grid-template-columns: var(--space-450) minmax(0, 1fr) var(--space-450);
}
.pricing__calculator .pricing__stepper button { width: var(--space-450); }
.pricing__calculator .pricing__stepper button:last-child { justify-self: end; }

.pricing__stepper button,
.pricing__code-stepper button {
    flex: 0 0 var(--space-450);
    height: var(--space-450);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-gray-150);
    color: var(--color-primary);
    font: inherit;
    font-size: var(--font-size-400);
    cursor: pointer;
}
.pricing__stepper button:hover:not(:disabled),
.pricing__code-stepper button:hover:not(:disabled) { background: var(--color-gray-200); }
.pricing__stepper button:disabled,
.pricing__code-stepper button:disabled { opacity: 0.4; cursor: default; }
.pricing__stepper output {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.pricing__input {
    width: 100%;
    padding: var(--space-200);
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-gray-050);
    color: var(--color-primary);
    font: inherit;
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-550);
}

.pricing__rates {
    position: relative;
    display: flex;
    align-items: stretch;
    height: calc(var(--space-500) + var(--space-100));
    min-width: 0;
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-gray-050);
    font-size: var(--font-size-150);
}
.pricing__rates:focus-within {
    outline: 2px solid var(--color-text-accent);
    outline-offset: 3px;
}
.pricing__content .pricing__rates .pricing__input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    border: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: transparent;
}
.pricing__codes-entry {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    padding-inline-end: var(--space-050);
}
.pricing__codes-entry .pricing__input { appearance: textfield; -moz-appearance: textfield; }
.pricing__calculator .pricing__codes-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--space-500) + var(--space-050));
    padding-inline-end: 0;
}
.pricing__calculator .pricing__codes-entry .pricing__input {
    grid-area: 1 / 1 / 2 / -1;
    text-align: center;
}
.pricing__calculator .pricing__code-stepper {
    position: relative;
    grid-area: 1 / 2;
    margin-inline-end: var(--space-050);
}
.pricing__codes-entry .pricing__input::-webkit-inner-spin-button,
.pricing__codes-entry .pricing__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pricing__code-stepper {
    display: grid;
    align-self: center;
    height: var(--space-500);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    flex: 0 0 var(--space-500);
    gap: calc(var(--border-width) * 2);
    padding: var(--space-050);
}
.pricing__code-stepper button {
    display: grid;
    place-items: center;
    height: auto;
    min-height: 0;
    padding: 0;
}
.pricing__code-stepper-icon { width: var(--icon-md); height: var(--icon-md); }
.pricing__rates :is(.pricing__input, .pricing__rates-toggle):focus-visible { outline: none; }
.pricing__rates-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-100);
    justify-content: space-between;
    flex: 0 0 var(--pricing-control-price-width);
    width: var(--pricing-control-price-width);
    padding: 0 var(--space-150) 0 var(--space-200);
    font-variant-numeric: tabular-nums;
    border: 0;
    border-left: var(--border-width) solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: transparent;
    color: var(--color-gray-600);
    font: inherit;
    font-weight: var(--font-weight-550);
    white-space: nowrap;
    cursor: pointer;
}
.pricing__rates-toggle:hover { background: var(--color-gray-150); }
.pricing__rates-toggle[aria-expanded="true"] { color: var(--color-text-accent); }
.pricing__rates-chevron {
    flex: 0 0 var(--icon-sm);
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--color-secondary);
    transition: transform var(--transition-fast) var(--ease);
}
.pricing__rates-toggle[aria-expanded="true"] .pricing__rates-chevron { transform: rotate(180deg); }
.pricing__rates-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    width: 100%;
    max-width: calc(100vw - var(--space-250) * 2);
    max-height: min(24rem, var(--pricing-rates-max-height, 24rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin-block: var(--space-100);
    padding: var(--space-200);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.pricing__rates-popover[hidden] { display: none; }
.pricing__rates-popover[data-side="top"] { top: auto; bottom: 100%; }
.pricing__rate-list { list-style: none; padding: 0; margin: 0; }
.pricing__rate-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-100);
    padding: var(--space-100);
    border-radius: var(--radius-sm);
}
.pricing__rate-list li[aria-current="true"] {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-white));
    color: var(--color-primary);
}
.pricing__rate-list li > span:last-child { margin-inline-start: auto; text-align: right; }

.pricing__nav,
.pricing__summary {
    position: sticky;
    top: var(--pricing-rail-top);
    height: var(--pricing-rail-height);
}
.pricing__nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.pricing__summary {
    padding: var(--space-400) var(--space-300);
    gap: var(--space-250);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-dark) 96%, white) 0%, var(--color-dark) 100%);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.pricing__summary-title { color: var(--color-white); font-size: var(--font-size-500); flex-shrink: 0; }
.pricing__summary-services { display: grid; gap: var(--space-250); }
.pricing__summary-service { min-width: 0; }
.pricing__summary-label {
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}
.pricing__summary-detail {
    display: grid;
    gap: var(--space-050);
    padding-top: var(--space-050);
    color: var(--color-gray-300);
    font-size: var(--font-size-100);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.pricing__summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-100); }
.pricing__summary-line > span { min-width: 0; }
.pricing__summary-line strong { flex-shrink: 0; color: var(--color-white); font-size: var(--font-size-150); font-weight: var(--font-weight-550); }
.pricing__summary-totals {
    display: grid;
    gap: var(--space-200);
    padding-top: var(--space-250);
    border-top: var(--border-width) solid rgb(from var(--color-accent) r g b / 25%);
    font-size: var(--font-size-150);
}
.pricing__summary-total { display: grid; gap: var(--space-050); line-height: var(--line-height-heading); }
.pricing__summary-amount { color: var(--color-accent); font-size: var(--font-size-600); font-weight: var(--font-weight-600); line-height: var(--line-height-heading); }
.pricing__summary-note { color: var(--color-gray-300); font-size: var(--font-size-100); line-height: var(--line-height-heading); }
.pricing__summary-action { margin-top: var(--space-050); flex-shrink: 0; }
.pricing__summary-action .pricing__cta { width: 85%; margin-inline: auto; }
[data-pricing-service="extras"] .pricing__cta {
    /* Match the popover's four columns, three gaps, padding and borders. */
    width: calc(4 * (var(--space-450) + var(--space-050)) + 5 * var(--space-050) + 2 * var(--border-width));
    max-width: calc(100vw - var(--space-400));
}
.pricing__contact { align-self: flex-start; }
.pricing__summary-action { align-self: stretch; }
.pricing__contact .contact-dropdown__menu {
    top: calc(100% + var(--space-100));
    bottom: auto;
    width: max-content;
    max-width: calc(100vw - var(--space-400));
    grid-template-columns: repeat(4, calc(var(--space-450) + var(--space-050)));
    gap: var(--space-050);
    padding: var(--space-050);
    background: var(--color-dark);
    border-color: rgb(from var(--color-accent) r g b / 25%);
}
[data-pricing-service="extras"] .contact-dropdown__menu {
    left: 50%;
    transform: translateX(-50%);
}
.pricing__contact .contact-dropdown__menu[data-side="top"] {
    top: auto;
    bottom: calc(100% + var(--space-100));
}
.pricing__price { color: var(--color-text-accent); font-size: var(--font-size-650); font-weight: var(--font-weight-600); line-height: var(--line-height-heading); font-variant-numeric: tabular-nums; }

.pricing__cta { white-space: normal; line-height: var(--line-height-heading); min-height: var(--space-500); }



.pricing__badge { align-self: flex-start; padding: var(--space-100) var(--space-200); border-radius: var(--radius-full); background: var(--color-gray-150); color: var(--color-text-accent); font-size: var(--font-size-150); font-weight: var(--font-weight-550); }
.pricing__list { display: grid; gap: var(--space-150); margin: 0; padding-left: var(--space-300); color: var(--color-gray-600); }
.pricing__list li::marker { color: var(--color-text-accent); }
.pricing__grid { display: grid; gap: var(--space-150); }
.pricing__option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-150);
    padding: var(--space-200);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease);
}
.pricing__option:hover:not(:has(:disabled)) { border-color: var(--color-secondary); }
.pricing__option:has(:checked) {
    border-color: var(--color-secondary);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-white));
}
.pricing__training-choice { align-items: flex-start; }

.pricing__training-choice .pricing__option-input {
    margin-top: calc((var(--font-size-650) * var(--line-height-heading) - var(--icon-md)) / 2);
}
.pricing__training-cost { display: grid; gap: var(--space-050); min-width: 0; }
.pricing__option-input { flex-shrink: 0; accent-color: var(--color-text-accent); margin-top: var(--space-050); width: var(--icon-md); height: var(--icon-md); }
.pricing__service--outsourcing .pricing__option-input { margin-top: 10px; }
.pricing__option-copy { display: flex; flex-direction: column; gap: var(--space-100); min-width: 0; }
.pricing__option-title { color: var(--color-primary); font-weight: var(--font-weight-550); }
.pricing__option-description, .pricing__option-unit { color: var(--color-gray-600); font-size: var(--font-size-150); }
.pricing__option-price { color: var(--color-text-accent); font-size: var(--font-size-500); font-weight: var(--font-weight-600); font-variant-numeric: tabular-nums; }

.pricing__content .pricing__card {
    padding-block: var(--space-400);
    gap: var(--space-300);
}
.pricing__content :is(.pricing__settings, .pricing__service-copy, .pricing__group, .pricing__field) {
    display: flex;
    flex-direction: column;
    gap: var(--space-150);
    min-width: 0;
}
.pricing__content .pricing__settings { gap: var(--space-450); }
.pricing__content .pricing__group + .pricing__group { padding-top: var(--space-200); }
.pricing__outsourcing-tariffs { display: grid; gap: var(--space-400); }
.pricing__tariff-group { display: grid; gap: var(--space-150); }
.pricing__tariff-title { color: var(--color-gray-600); font-size: var(--font-size-200); font-weight: var(--font-weight-550); line-height: var(--line-height-heading); }
.pricing__service-header { display: flex; align-items: center; gap: var(--space-150); }
.pricing__service-header .pricing__service-title { flex: 1; min-width: 0; }
.pricing__dependent-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.pricing__card.is-unavailable { background: var(--color-gray-100); cursor: not-allowed; }
.pricing__card.is-unavailable .pricing__dependent-fields { opacity: 0.65; }
.pricing__card.is-unavailable .pricing__service-title { color: var(--color-gray-600); }
.pricing__card.is-unavailable :is(button:disabled, input:disabled, .pricing__option) { cursor: not-allowed; }
.pricing__availability-hint { position: relative; flex-shrink: 0; }
/* Keep the hover hint open while crossing the gap between its trigger and text. */
.pricing__availability-hint:has([aria-expanded="true"])::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: min(18rem, calc(100vw - var(--space-600)));
    height: var(--space-100);
}
.pricing__hint-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-400);
    height: var(--space-400);
    padding: var(--space-050);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-accent);
    cursor: help;
}
.pricing__hint-toggle svg { width: 100%; height: 100%; }
.pricing__hint-text {
    position: absolute;
    top: calc(100% + var(--space-100));
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: min(18rem, calc(100vw - var(--space-600)));
    padding: var(--space-150);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--font-size-100);
    line-height: var(--line-height-body);
    box-shadow: var(--shadow-sm);
}
.pricing__hint-text[hidden] { display: none; }
.pricing__product-quantity {
    display: grid;
    gap: var(--space-100);
    width: 100%;
    max-width: 16rem;
}
.pricing__training .pricing__list {
    gap: var(--space-050);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-body);
}
.pricing__content .pricing__input {
    height: calc(var(--space-500) + var(--space-100));
    padding: var(--space-100) var(--space-150);
    font-size: var(--font-size-300);
}
.pricing__content .pricing__calculator { gap: var(--space-300); }
.pricing__content .pricing__calculator .pricing__field { gap: var(--space-150); }

.pricing__content .pricing__heading { font-size: var(--font-size-400); }

.pricing__content .pricing__card > .pricing__cta { align-self: flex-start; }
.pricing__content .pricing__grid { gap: var(--space-100); }
.pricing__content .pricing__option { padding: var(--space-150); }
.pricing__content .pricing__option-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-050) var(--space-150);
    width: 100%;
}
.pricing__content .pricing__option-title { grid-column: 1; grid-row: 1; }
.pricing__content .pricing__option-description { grid-column: 1; grid-row: 2; }
.pricing__content .pricing__option-price { grid-column: 2; grid-row: 1; }
.pricing__content .pricing__option-unit { grid-column: 2; grid-row: 2; }
.pricing__content .pricing__option .pricing__badge {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    padding: var(--space-050) var(--space-100);
}

@media (prefers-reduced-motion: reduce) {
    .pricing__rates-chevron { transition: none; }
}

@media (min-width: 1024px) {
    :lang(kk) [data-pricing-service="extras"] .pricing__cta {
        width: auto;
        white-space: nowrap;
    }

    .pricing__summary-action .contact-dropdown__menu {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 1199px) {
    .pricing__eyebrow { font-size: var(--font-size-100); }
    /* Share a value axis while retaining room for six-digit code counts beside the stepper. */
    .pricing__calculator .pricing__stepper {
        grid-template-columns: calc(var(--space-400) + var(--space-050)) minmax(var(--space-150), 1fr) min(calc(var(--space-400) * 2), calc(100% - var(--space-500) - var(--space-100)));
        padding-inline: var(--space-050);
    }
    .pricing__calculator .pricing__codes-entry .pricing__input {
        padding-inline: var(--space-150) max(var(--space-150), min(var(--space-450), calc(100% - var(--space-450) * 2 - var(--space-100))));
    }
    .pricing__context,
    .pricing__layout { grid-template-columns: 200px minmax(0, 1fr) 320px; gap: var(--space-200); }
}

@media (min-width: 1024px) and (max-height: 864px) {
    /* Retain a compact rhythm when multiple services must fit a short rail. */
    .pricing__summary:has(.pricing__summary-service:nth-child(2 of :not([hidden]))) {
        padding-block: var(--space-300);
        gap: var(--space-100);
    }
    .pricing__summary:has(.pricing__summary-service:nth-child(2 of :not([hidden]))) .pricing__summary-services { gap: var(--space-100); }
    .pricing__summary:has(.pricing__summary-service:nth-child(2 of :not([hidden]))) .pricing__summary-detail { gap: calc(var(--space-050) / 2); padding-top: calc(var(--space-050) / 2); }
    .pricing__summary:has(.pricing__summary-service:nth-child(2 of :not([hidden]))) .pricing__summary-totals { gap: var(--space-050); padding-top: var(--space-100); }
    .pricing__summary:has(.pricing__summary-service:nth-child(2 of :not([hidden]))) .pricing__summary-total { gap: calc(var(--space-050) / 2); }
    .pricing__summary:has(.pricing__summary-service:nth-child(2 of :not([hidden]))) .pricing__summary-action { margin-top: 0; }
}

@media (max-width: 1023px) {
    .pricing__context { top: var(--header-height); }
    .pricing__calculator { --pricing-control-price-width: 10.5rem; }
    .pricing__context,
    .pricing__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-300); }
    .pricing__context-title { grid-column: 1; }

    .pricing__nav { display: none; }
    .pricing__summary { position: static; height: auto; }

    .pricing__summary-action .contact-dropdown__menu,
    [data-pricing-service="extras"] .contact-dropdown__menu {
        top: auto;
        bottom: calc(100% + var(--space-100));
        left: 50%;
        transform: translateX(-50%);
    }

}

@media (max-width: 399px) {
    .pricing__context-title { padding-inline-start: calc(var(--space-200) + var(--border-width)); }
    .pricing__content .pricing__option-copy { display: flex; flex-direction: column; }
    .pricing__card { padding-inline: var(--space-200); }
}