.j-site .j-nav > a { white-space: nowrap; }
.j-site .j-price-content { padding-top: 0; }
.j-site .j-price-detail {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 24px; padding: 24px; border: 1px solid #dce4f0;
    border-radius: 16px; background: #f7f9fc;
}
.j-site .j-price-detail strong { font-size: 16px; color: #203954; }
.j-site .j-price-detail p { margin-top: 6px; font-size: 13px; line-height: 1.8; color: #52657e; }
.j-site .j-price-detail > a { flex-shrink: 0; }
/* Keep the five bottom actions within the viewport, including device safe areas. */
@media (max-width: 1024px) {
    .j-site {
        --mobile-nav-height: 65px;
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    html:has(.j-site) {
        scroll-padding-bottom: calc(81px + env(safe-area-inset-bottom, 0px));
    }

    .j-site .v-mobile-nav {
        box-sizing: border-box;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 6px max(8px, env(safe-area-inset-right, 0px), calc((100% - 600px) / 2))
            calc(6px + env(safe-area-inset-bottom, 0px))
            max(8px, env(safe-area-inset-left, 0px), calc((100% - 600px) / 2));
        border-top: 1px solid #e1e7f0;
        background: #fffffff7;
        box-shadow: 0 -4px 20px #14233c08;
    }

    .j-site .v-mobile-nav > a,
    .j-site .v-mobile-nav > button {
        box-sizing: border-box;
        min-width: 0;
        min-height: 52px;
        margin: 0;
        padding: 5px 0;
        gap: 5px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 14px;
        letter-spacing: -.2px;
        color: #52657e;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .j-site .v-mobile-nav i {
        display: grid;
        place-items: center;
        width: 24px;
        height: 22px;
        font-size: 20px;
        line-height: 1;
    }

    .j-site .v-mobile-nav > a > span,
    .j-site .v-mobile-nav > button > span {
        white-space: nowrap;
    }

    .j-site .v-mobile-nav .v-mobile-main {
        color: #fff;
        background: #153fe1;
        box-shadow: 0 3px 8px #153fe11a;
    }

    .j-site .v-mobile-nav [aria-current="page"] {
        color: #153fe1;
        background: #edf2ff;
    }

    .j-site .v-mobile-nav > :focus-visible {
        outline: 2px solid #153fe1;
        outline-offset: 2px;
    }

    .j-site .jc-panel {
        bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - var(--mobile-nav-height) - 24px - env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 650px) {
    .j-site .j-price-detail { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
    .j-site .j-price-detail > a { min-height: 48px; }
    .j-site .j-price-consult .j-form-fields { grid-template-columns: minmax(0, 1fr); }
    /* The wordmark may shrink; the consultation and menu controls must not. */
    .j-site .j-header-inner {
        width: calc(100% - 32px);
        gap: 8px;
    }

    .j-site .j-header .j-logo {
        flex: 0 1 220px;
        width: 220px;
        min-width: 0;
    }

    .j-site .j-header .j-logo img.j-wordmark {
        width: 100%;
        max-width: 220px;
        height: auto;
        min-width: 0;
    }

    .j-site .v-header-cta {
        flex-shrink: 0;
    }

    .j-site .j-menu {
        flex: 0 0 36px;
        width: 36px;
        height: 44px;
        margin-left: 0;
    }

    .j-site .j-footer {
        padding: 32px 0 0;
    }

    .j-site .j-footer .j-container {
        width: calc(100% - 32px);
    }

    .j-site .j-footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 20px;
    }

    .j-site .j-footer-top > .j-logo {
        max-width: 100%;
    }

    .j-site .j-footer-top > .j-logo img.j-wordmark {
        width: 224px;
        max-width: 100%;
        height: auto;
    }

    .j-site .j-footer-top > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 8px;
        width: 100%;
        font-size: 12px;
    }

    .j-site .j-footer-top > div > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        min-width: 0;
        line-height: 1.5;
        color: #52657e;
    }

    .j-site .j-footer-top > div > a:nth-child(4) {
        grid-column: span 2;
        color: #203954;
    }

    .j-site .j-footer-info {
        gap: 22px;
        margin: 22px 0;
    }

    .j-site .j-footer-info > div {
        min-width: 0;
        width: 100%;
    }

    .j-site .j-footer-info > div > span {
        display: block;
        font-size: 11px;
        line-height: 1.85;
        overflow-wrap: anywhere;
    }

    .j-site .j-footer-contact {
        padding: 18px;
        border: 1px solid #e2e8f1;
        border-radius: 14px;
        background: #f7f9fc;
    }

    .j-site .j-footer-contact > a:not(.j-textlink) {
        width: fit-content;
        font-size: 28px;
        line-height: 1.5;
    }

    .j-site .j-footer-contact .j-textlink {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin-top: 14px;
        padding: 10px 8px;
        font-size: 12px;
        white-space: normal;
        text-align: center;
    }

    .j-site .j-footer-social:empty {
        display: none;
    }

    .j-site .j-footer-social {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .j-site .j-copyright {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 16px;
        margin-top: 0;
        padding: 18px 0 22px;
        line-height: 1.7;
    }

    .j-site .j-copyright > span {
        flex: 1 1 200px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .j-site .j-copyright > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .j-site .v-quick-dialog {
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
        scroll-padding-block: 20px;
        overscroll-behavior: contain;
    }

    .j-site .v-dialog-head {
        gap: 8px;
    }

    .j-site .v-dialog-head > div {
        min-width: 0;
    }

    .j-site .v-dialog-head h2 {
        font-size: clamp(23px, 6.4vw, 27px);
        line-height: 1.4;
        word-break: keep-all;
    }

    .j-site .v-dialog-head > button {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .j-site .v-quick-dialog .j-form-fields > * {
        min-width: 0;
    }

    .j-site .v-quick-dialog input:not([type="checkbox"]),
    .j-site .v-quick-dialog select {
        font-size: 16px;
    }

    .j-site .v-dialog-note {
        align-items: flex-start;
        line-height: 1.7;
    }

    .j-site .v-dialog-note > i {
        flex-shrink: 0;
        margin-top: 3px;
    }

    .j-site .v-dialog-detail {
        gap: 8px;
        min-height: 44px;
        line-height: 1.5;
    }

    .j-site .v-dialog-detail > span {
        flex-shrink: 0;
    }

    .j-site .jc-panel {
        inset: auto 0 0;
        width: 100%;
        height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
    }

    .j-site .jc-head {
        padding: 16px 14px;
        gap: 10px;
    }

    .j-site .jc-head > div:nth-child(2) {
        flex: 1;
        min-width: 0;
    }

    .j-site .jc-avatar {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .j-site .jc-head small {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .j-site .jc-head h2 {
        font-size: 18px;
    }

    .j-site .jc-head p {
        font-size: 10px;
        line-height: 1.6;
        word-break: keep-all;
    }

    .j-site .jc-close {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin-left: 0;
    }

    .j-site .jc-form button {
        flex-shrink: 0;
    }

    .j-site .jc-controls {
        max-height: min(210px, 28dvh);
    }
}