/* Shared contact-method contour for the calculation and discount forms. */
:is(#sendmail, #discount-form) .contact-method-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) repeat(3, minmax(0, 1fr));
    min-width: 0;
    height: 40px;
    margin: 0;
}
:is(#sendmail, #discount-form) .contact-method-tab {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 40px;
    padding: 3px 4px;
    border: 1px solid #d9dfed;
    border-bottom: 0;
    border-radius: 13px 13px 0 0;
    color: #647398;
    background: #f3f5fa;
    font: 600 13px/1.2 Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
:is(#sendmail, #discount-form) .contact-method-tab + .contact-method-tab { margin-left: -1px; }
:is(#sendmail, #discount-form) .contact-method-tab.is-active {
    position: relative;
    z-index: 3;
    border-color: #a9b8d9;
    color: #172967;
    background: #fff;
}
:is(#sendmail, #discount-form) .contact-method-tab.is-active::after {
    content: "";
    position: absolute;
    z-index: 0;
    /* Overlap the curved joins by 1px so antialiasing cannot leave a seam. */
    left: -12px;
    right: -12px;
    bottom: -5px;
    height: 6px;
    background: #fff;
    pointer-events: none;
}
:is(#sendmail, #discount-form) .contact-method-tab:first-child.is-active::after { left: 0; }
:is(#sendmail, #discount-form) .contact-method-tab:last-child.is-active::after { right: 0; }
:is(#sendmail, #discount-form):has(.contact-method-field input[name="user_phone"]:focus) .contact-method-tab.is-active {
    border-color: #172967;
}
:is(#sendmail, #discount-form) .contact-method-tab-join { display: none; }
:is(#sendmail, #discount-form) .contact-method-tab.is-active .contact-method-tab-join {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}
:is(#sendmail, #discount-form) .contact-method-tab-join::before,
:is(#sendmail, #discount-form) .contact-method-tab-join::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 15px;
    height: 15px;
    pointer-events: none;
}
/* Extend each arc into the tab side and the field line so WebKit cannot
   leave a rasterization gap at either end of the curve. */
:is(#sendmail, #discount-form) .contact-method-tab-join::before {
    left: -14px;
    background:
        linear-gradient(#a9b8d9, #a9b8d9) 14px 0 / 1px 4px no-repeat,
        linear-gradient(#a9b8d9, #a9b8d9) 0 14px / 4px 1px no-repeat,
        radial-gradient(circle at 1px 1px, #f3f5fa 13px, #a9b8d9 13px 14px, #fff 14px);
}
:is(#sendmail, #discount-form) .contact-method-tab-join::after {
    right: -14px;
    background:
        linear-gradient(#a9b8d9, #a9b8d9) 1px 0 / 1px 4px no-repeat,
        linear-gradient(#a9b8d9, #a9b8d9) 11px 14px / 4px 1px no-repeat,
        radial-gradient(circle at calc(100% - 1px) 1px, #f3f5fa 13px, #a9b8d9 13px 14px, #fff 14px);
}
:is(#sendmail, #discount-form):has(.contact-method-field input[name="user_phone"]:focus) .contact-method-tab-join::before {
    background:
        linear-gradient(#172967, #172967) 14px 0 / 1px 4px no-repeat,
        linear-gradient(#172967, #172967) 0 14px / 4px 1px no-repeat,
        radial-gradient(circle at 1px 1px, #f3f5fa 13px, #172967 13px 14px, #fff 14px);
}
:is(#sendmail, #discount-form):has(.contact-method-field input[name="user_phone"]:focus) .contact-method-tab-join::after {
    background:
        linear-gradient(#172967, #172967) 1px 0 / 1px 4px no-repeat,
        linear-gradient(#172967, #172967) 11px 14px / 4px 1px no-repeat,
        radial-gradient(circle at calc(100% - 1px) 1px, #f3f5fa 13px, #172967 13px 14px, #fff 14px);
}
:is(#sendmail, #discount-form) .contact-method-tab:first-child .contact-method-tab-join::before,
:is(#sendmail, #discount-form) .contact-method-tab:last-child .contact-method-tab-join::after { content: none; }
:is(#sendmail, #discount-form) .contact-method-tab img {
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain;
}
:is(#sendmail, #discount-form) .contact-method-tab:disabled {
    cursor: not-allowed;
    opacity: .5;
}
:is(#sendmail, #discount-form) .contact-method-tab:focus-visible {
    position: relative;
    z-index: 2;
    border-color: #172967;
    outline: none;
}
:is(#sendmail, #discount-form) .contact-method-field > .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
:is(#sendmail, #discount-form) .contact-method-field input[name="user_phone"] {
    width: 100%;
    border-color: #a9b8d9 !important;
    border-radius: 13px !important;
}
:is(#sendmail, #discount-form):has(.contact-method-tab:first-child.is-active) .contact-method-field input[name="user_phone"] {
    border-top-left-radius: 0 !important;
}
:is(#sendmail, #discount-form):has(.contact-method-tab:last-child.is-active) .contact-method-field input[name="user_phone"] {
    border-top-right-radius: 0 !important;
}
:is(#sendmail, #discount-form) .contact-method-field input[name="user_phone"]:focus {
    border-color: #172967 !important;
    outline: none !important;
}
/* A single SVG stroke replaces independently rasterized tab, arc and field borders. */
:is(#sendmail, #discount-form) { position: relative; }
:is(#sendmail, #discount-form) .contact-method-contour {
    position: absolute;
    z-index: 4;
    display: block;
    overflow: visible;
    color: #a9b8d9;
    pointer-events: none;
}
:is(#sendmail, #discount-form):has(.contact-method-field input[name="user_phone"]:focus) .contact-method-contour,
:is(#sendmail, #discount-form):has(.contact-method-tab.is-active:focus-visible) .contact-method-contour {
    color: #172967;
}
:is(#sendmail, #discount-form).has-vector-contour .contact-method-tab.is-active,
:is(#sendmail, #discount-form).has-vector-contour:has(.contact-method-field input[name="user_phone"]:focus) .contact-method-tab.is-active,
:is(#sendmail, #discount-form).has-vector-contour .contact-method-tab.is-active:focus-visible {
    border-color: transparent;
}
:is(#sendmail, #discount-form).has-vector-contour .contact-method-tab.is-active::after,
:is(#sendmail, #discount-form).has-vector-contour .contact-method-tab.is-active .contact-method-tab-join { display: none; }
:is(#sendmail, #discount-form).has-vector-contour .contact-method-field input[name="user_phone"],
:is(#sendmail, #discount-form).has-vector-contour .contact-method-field input[name="user_phone"]:focus {
    border-color: transparent !important;
}
/* Keep the disabled-to-ready repaint a single opaque shape while typing. */
:is(#sendmail, #discount-form) .conversion-submit,
:is(#sendmail, #discount-form) .conversion-submit:disabled {
    opacity: 1;
    transition: none;
}
:is(#sendmail, #discount-form) .conversion-submit:disabled {
    background: #566592;
    box-shadow: 0 5px 0 #293c78;
}
@media (max-width: 360px) {
    :is(#sendmail, #discount-form) .contact-method-tab img { width: 24px; height: 24px; }
}
@media (max-width: 767px) {
    body:has(.conversion-hero-form.is-open) .mobile-sticky-cta { display: none; }
}

/* The discount card is narrower: give the contact tabs the full field width. */
#discount-form.conversion-discount-form {
    padding-top: 0;
    border-top: 0;
}
#discount-form .conversion-discount-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
#discount-form .conversion-quantity-field input { max-width: 120px; }
#discount-form .contact-method-tabs { width: 100%; }
:is(#sendmail, #discount-form) .contact-method-tabs { position: relative; }
/* Fill only the space outside the field's rounded corners. A solid strip here
   would cover the white field and break its join with the active tab. */
:is(#sendmail, #discount-form) .contact-method-tabs::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    right: 0;
    height: 13px;
    background:
        linear-gradient(#d9dfed, #d9dfed) left top / 1px 13px no-repeat,
        linear-gradient(#d9dfed, #d9dfed) right top / 1px 13px no-repeat,
        radial-gradient(circle at 13px 13px, transparent 0 12px, #a9b8d9 12px 13px, #f3f5fa 13px) left top / 13px 13px no-repeat,
        radial-gradient(circle at 0 13px, transparent 0 12px, #a9b8d9 12px 13px, #f3f5fa 13px) right top / 13px 13px no-repeat;
    pointer-events: none;
}
:is(#sendmail, #discount-form):has(.contact-method-tab:first-child.is-active) .contact-method-tabs::before {
    background:
        linear-gradient(#d9dfed, #d9dfed) right top / 1px 13px no-repeat,
        radial-gradient(circle at 0 13px, transparent 0 12px, #a9b8d9 12px 13px, #f3f5fa 13px) right top / 13px 13px no-repeat;
}
:is(#sendmail, #discount-form):has(.contact-method-tab:last-child.is-active) .contact-method-tabs::before {
    background:
        linear-gradient(#d9dfed, #d9dfed) left top / 1px 13px no-repeat,
        radial-gradient(circle at 13px 13px, transparent 0 12px, #a9b8d9 12px 13px, #f3f5fa 13px) left top / 13px 13px no-repeat;
}

/* Keep MAX inactive without blending the dark card through its tab. */
#discount-form .contact-method-tab:disabled { opacity: 1; }
#discount-form .contact-method-tab:disabled img { opacity: .5; }