/* Support & solutions: the two test centres side by side with an illustration on
   the right, white with a hairline so they stand out. Premium support sits with
   the other supports further down: full width, smaller heading, grey fill. */
#supports.supports-2025 {
    background-color: #fff;
    border-radius: var(--sec-br) var(--sec-br) 0 0;
    padding: var(--sec-padding1);
}
#supports.supports-2025 ul.support-solutions {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
}
#supports.supports-2025 .support-solution {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Text from the top, link on the bottom edge, so both cards in a row line up
       whatever their text length. */
    grid-template-rows: 1fr auto;
    align-items: start;
    column-gap: 32px;
    padding: 32px 28px 28px;
    border: 1px solid #d5d5dc;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.25s;
    position: relative;
    .support-solution__body {
        grid-column: 1;
    }
    .need {
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.02em;
        color: #6b7280;
    }
    h3 {
        margin: 2px 0 20px;
        font-size: clamp(22px, 2vw, 26px);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.02em;
        color: #2a3037;
        a {
            color: inherit;
            text-decoration: none;
            &::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
            }
            &:focus-visible {
                outline: none;
            }
        }
    }
    p.common-p-2 {
        margin: 0;
    }
    .support-solution__visual {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        display: block;
        width: 160px;
        height: auto;
    }
    /* Text plus the arrow in a dark circle, the same circle as the site's buttons,
       so it reads as an action without becoming a full button. */
    .more {
        grid-column: 1;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        margin: 12px -12px -8px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.02em;
        color: #2a3037;
        text-decoration: none;
        white-space: nowrap;
        i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2a3037;
            color: #fff;
            font-size: 10px;
            transition: transform 0.25s;
        }
    }
    &:has(h3 a:hover) {
        border-color: #2a3037;
        .more i {
            transform: translateX(4px);
        }
    }
    &:has(h3 a:focus-visible) {
        outline: 2px solid #2a3037;
        outline-offset: 2px;
    }
}
/* Premium support heads the other supports, above their tiles, with its icon on
   the left at the same size and tone as theirs (the crown the old support grid
   used for premium support). */
#supports.supports-2025 .support-solution--sub {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    margin-bottom: 8px;
    padding: 20px 28px 16px 20px;
    border-color: transparent;
    background: #f8f8fc;
    .support-solution__icon {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        width: 40px;
        height: 40px;
        filter: grayscale(1);
    }
    .support-solution__body {
        grid-column: 2;
    }
    h3 {
        font-size: 19px;
        margin: 4px 0 12px;
    }
}
@media screen and (max-width: 1023px) {
    #supports.supports-2025 ul.support-solutions {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 480px) {
    #supports.supports-2025 .support-solution {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 20px 20px;
        .need {
            font-size: 13px;
            letter-spacing: 0;
        }
        .support-solution__visual {
            grid-column: 1;
            grid-row: auto;
            width: 140px;
            margin: 16px auto 0;
        }
        /* The illustration sits centred above, so the link moves to the right. */
        .more {
            justify-self: end;
        }
    }
    #supports.supports-2025 .support-solution--sub {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px 20px 14px 16px;
        h3 {
            font-size: 17px;
        }
        .support-solution__icon {
            align-self: start;
            width: 34px;
            height: 34px;
        }
    }
}

/* Link to the support page under the other supports. The shared .sec_footer adds
   36px below, which stacked on the next subheading's 56px left a 90px gap. */
#supports.supports-2025 .sec_footer {
    padding: 28px 0 0;
    a.btn-common {
        max-width: 100%;
    }
}

/* Support figures: a dark band, a change of pace after the run of light grey cards.
   Same width as the card grid so it reads as part of the same block. */
#supports.supports-2025 .support-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 0;
    padding: 36px 24px;
    border-radius: 8px;
    background: #fff;
    color: #313145;
    .stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 24px;
    }
    .stat + .stat {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
    /* Breaks only at the <wbr>, not mid-word, when the column is narrow. */
    dt {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.6;
        letter-spacing: 0.02em;
        color: #313145;
        word-break: keep-all;
    }
    dd {
        margin: 6px 0 0;
        display: flex;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
    }
    .num {
        font-family: "Roboto", "Noto Sans JP", sans-serif;
        font-size: clamp(56px, 6vw, 68px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.01em;
    }
    .unit {
        margin-left: 6px;
        font-size: 30px;
        font-weight: 700;
    }
    .note {
        margin-left: 4px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
    }
    /* Breaks only at the <wbr>s, not mid-word, when the column is narrow. */
    dd.source {
        display: block;
        word-break: keep-all;
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: #6b7280;
    }
}
/* Rating stars: five dim stars underneath and five gold stars on top, clipped to
   score / 5, so half stars come out exact. The fill width is set inline in the HTML.
   The star is a mask, so each layer takes its colour from background-color. */
#supports.supports-2025 .support-stats .stars {
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5l2.94 5.96 6.58.96-4.76 4.64 1.12 6.55L12 17.52l-5.88 3.09 1.12-6.55-4.76-4.64 6.58-.96z'/%3E%3C/svg%3E");
    --star-size: 40px;
    position: relative;
    align-self: center;
    width: calc(var(--star-size) * 5);
    height: var(--star-size);
    margin-right: 14px;
    &::before,
    .stars-fill {
        position: absolute;
        inset: 0 auto 0 0;
        -webkit-mask: var(--star) left center / var(--star-size) var(--star-size) repeat-x;
        mask: var(--star) left center / var(--star-size) var(--star-size) repeat-x;
    }
    &::before {
        content: "";
        right: 0;
        background-color: #d5d5dc;
    }
    .stars-fill {
        background-color: #fbbb0b;
    }
}

@media screen and (max-width: 1023px) {
    #supports.supports-2025 .support-stats {
        max-width: 640px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 767px) {
    #supports.supports-2025 .support-stats {
        grid-template-columns: 1fr;
        padding: 8px 20px;
        .stat {
            padding: 24px 0;
        }
        .stars {
            --star-size: 24px;
            margin-right: 8px;
        }
        /* Stars, score and "/ 5" stay on one line. */
        dd {
            flex-wrap: nowrap;
        }
        .unit {
            font-size: 24px;
        }
        .stat + .stat {
            border-left: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
        dt {
            font-size: 16px;
        }
    }
}

/* Subheadings between the blocks, with a short bar underneath, so the cards, the
   other supports and the figures read as three parts of one section. */
#supports.supports-2025 .support-subhead {
    margin: 56px 0 24px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #2a3037;
    text-align: center;
    /* &::after {
        content: "";
        display: block;
        width: 32px;
        height: 2px;
        margin: 10px auto 0;
        border-radius: 2px;
        background: #abb3bd;
    } */
}

/* Other supports: compact grey tiles, quieter than the white test-centre cards
   above. The icons are the ones the old support grid used for the same items. */
#supports.supports-2025 ul.support-others {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    li {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        border-radius: 8px;
        background: #f8f8fc;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: #2a3037;
        img {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            filter: grayscale(1);
        }
    }
}
@media screen and (max-width: 1023px) {
    #supports.supports-2025 .support-subhead,
    #supports.supports-2025 .support-solution--sub,
    #supports.supports-2025 ul.support-others {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    #supports.supports-2025 ul.support-others {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 767px) {
    #supports.supports-2025 .support-subhead {
        margin-top: 44px;
        margin-bottom: 18px;
        font-size: 16px;
    }
}
@media screen and (max-width: 480px) {
    #supports.supports-2025 ul.support-others {
        grid-template-columns: 1fr;
        li {
            padding: 12px 16px;
            img {
                width: 34px;
                height: 34px;
            }
        }
    }
}

/* Customer voices under the figures: two columns with the same 8px gap and width,
   so the figures and the quotes read as one block of evidence. Light cards with an
   oversized quote mark; the caption sits at the bottom so both cards line up. */
#supports.supports-2025 .support-voices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0 0;
}
#supports.supports-2025 .support-voice {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 64px 32px 28px;
    border-radius: 8px;
    background: #f8f8fc;
    &::before {
        content: "\201C";
        position: absolute;
        top: 18px;
        left: 28px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 72px;
        line-height: 1;
        color: #d5d5dc;
    }
    blockquote {
        margin: 0;
        padding: 0;
        border: 0;
        p {
            margin: 0;
            font-size: 15px;
            font-weight: 400;
            line-height: 1.85;
            letter-spacing: 0.02em;
            color: #2a3037;
        }
    }
    figcaption {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px 20px;
        margin-top: auto;
        padding-top: 20px;
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
    .who {
        color: #6b7280;
        > span {
            display: block;
        }
        .company {
            font-size: 14px;
            font-weight: 600;
            color: #2a3037;
        }
        /* Break long titles at the spaces between units, not mid-word. */
        .role {
            word-break: keep-all;
            overflow-wrap: anywhere;
        }
    }
    a.more {
        flex-shrink: 0;
        font-size: 14px;
        font-weight: 600;
        color: #2a3037;
        text-decoration: none;
        white-space: nowrap;
        i {
            margin-left: 8px;
            transition: transform 0.25s;
        }
        &:hover {
            text-decoration: underline;
            i {
                transform: translateX(4px);
            }
        }
    }
}
@media screen and (max-width: 1023px) {
    #supports.supports-2025 .support-voices {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 8px auto 0;
    }
}
@media screen and (max-width: 767px) {
    #supports.supports-2025 .support-voice {
        padding: 56px 20px 24px;
        &::before {
            top: 14px;
            left: 18px;
            font-size: 64px;
        }
        figcaption {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}