/* Preserve the original <=768px mobile presentation, including its A to Z and CTA. */
.selfcos-hero-v2 .hero-desktop-only,
.selfcos-hero-v2 .hero-desktop-arrow,
.selfcos-hero-v2 .hero-partners,
.selfcos-home-promo {
    display: none;
}

@media (min-width:769px) {
    .selfcos-hero-v2 .hero-original-only { display: none; }
    .selfcos-hero-v2 .hero-desktop-arrow { display: inline; }
    /* Approved desktop values; only the bounded query below scales smaller screens. */
    .selfcos-mobile-home-v1 .main-visual-area.selfcos-hero-v2 {
        padding: 108px 0 88px;
        background: #fff;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 > .con {
        display: grid;
        /* Inherit the shared .con width/padding to align with the logo and sections. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 48px;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area {
        width: 100%;
        min-width: 0;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .main-visual-text-swiper-box {
        height: 69px;
        margin-top: 0;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .main-visual-text-swiper-box .swiper-slide {
        align-items: center;
        background: transparent;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area h1,
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .main-visual-text-swiper-box .swiper .swiper-slide h1 {
        color: #161a20;
        font-size: 50px;
        font-weight: 700;
        line-height: 1.38;
        letter-spacing: -0.045em;
        white-space: nowrap;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area > .main-visual-text-swiper {
        height: auto;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area > .main-visual-text-swiper h1 {
        font-size: 50px;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-proof {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 10px;
        margin: 32px 0 8px;
        color: #333;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.65;
    }
    .selfcos-hero-v2 .hero-proof strong {
        color: #242c39;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-description {
        display: block;
        margin: 0;
        color: #333;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-matching-btn {
        box-sizing: border-box;
        justify-content: space-between;
        gap: 20px;
        width: 296px;
        max-width: 100%;
        height: 64px;
        margin-top: 36px;
        padding: 0 26px;
        border: 0;
        border-radius: 6px;
        background: #327ee2;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.025em;
        box-shadow: 0 6px 15px rgba(50, 126, 226, 0.12);
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-matching-btn::after {
        content: none;
    }
    .selfcos-hero-v2 .hero-matching-btn span {
        font-size: 26px;
        font-weight: 400;
    }
    .selfcos-hero-v2 .hero-matching-btn:focus-visible,
    .selfcos-home-promo-link:focus-visible {
        outline: 3px solid #161a20;
        outline-offset: 4px;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-note {
        display: block;
        margin: 12px 0 0;
        padding-left: 26px;
        color: #444;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.65;
    }
    .selfcos-hero-v2 .hero-partners {
        display: block;
        min-width: 0;
    }
    .selfcos-hero-v2 .hero-partner-list {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        /* Keep the original left edge; leave the saved width outside the 540px cards. */
        max-width: 564px;
        gap: 16px;
        padding: 0 24px 0 0;
        margin: 0;
        list-style: none;
    }
    .selfcos-hero-v2 .hero-partner-card {
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
        padding: 16px;
        border: 1px solid #e8ecf1;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 6px 22px rgba(31, 49, 74, 0.055);
    }
    .selfcos-hero-v2 .hero-partner-card:nth-child(2) {
        transform: translateX(24px);
    }
    .selfcos-hero-v2 .hero-partner-photo {
        display: block;
        flex: 0 0 96px;
        width: 96px;
        height: 92px;
        border-radius: 4px;
        background: #f5f5f5;
        object-fit: cover;
    }
    .selfcos-hero-v2 .hero-partner-info {
        min-width: 0;
    }
    .selfcos-hero-v2 .hero-partner-kind {
        margin: 0 0 5px;
        color: #2968b8;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
    }
    .selfcos-hero-v2 .hero-partner-info h2 {
        margin: 0 0 7px;
        color: #29323e;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: -0.035em;
        white-space: nowrap;
    }
    .selfcos-hero-v2 .hero-partner-detail {
        margin: 0;
        color: #606975;
        font-size: 15px;
        line-height: 1.65;
        white-space: nowrap;
    }
    .selfcos-mobile-home-v1 .selfcos-home-promo {
        display: block;
        padding: 48px 0;
        border-bottom: 1px solid #e8ecf1;
        background: #fff;
    }
    .selfcos-home-promo .selfcos-home-promo-link {
        display: block;
        width: 400px;
        max-width: 100%;
        min-height: 254px;
        margin: 0 auto;
    }
    .selfcos-home-promo-link img {
        display: block;
        width: 100%;
        height: auto;
    }
    .selfcos-home-promo .selfcos-home-promo-link--editorial {
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 300px;
        overflow: hidden;
        border: 1px solid #e8ecf1;
        border-radius: 8px;
        background: #fff;
        text-decoration: none;
    }
    .selfcos-home-promo-copy {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        width: 57%;
        padding: 36px 48px;
    }
    .selfcos-home-promo-copy h2 {
        margin: 0;
        color: #242c39;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.035em;
        word-break: keep-all;
    }
    .selfcos-home-promo-copy p {
        margin: 12px 0 0;
        color: #444;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.65;
        word-break: keep-all;
    }
    .selfcos-home-promo-action {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
        color: #2968b8;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
    }
    .selfcos-home-promo-action-label {
        font-weight: inherit;
        border-bottom: 1px solid transparent;
        padding-bottom: 2px;
    }
    a.selfcos-home-promo-link--editorial:hover .selfcos-home-promo-action-label,
    a.selfcos-home-promo-link--editorial:focus-visible .selfcos-home-promo-action-label {
        border-bottom-color: currentColor;
    }
    .selfcos-home-promo-link--editorial .selfcos-home-promo-photo {
        position: absolute;
        top: 0;
        right: 0;
        width: 53%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Small laptops/tablets only: >=1201px desktop values and <=768px mobile stay intact. */
@media (min-width:769px) and (max-width:1200px) {
    .selfcos-mobile-home-v1 .main-visual-area.selfcos-hero-v2 {
        padding: 64px 0;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 > .con {
        gap: 24px;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .main-visual-text-swiper-box {
        height: 58px;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area h1,
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .main-visual-text-swiper-box .swiper .swiper-slide h1,
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area > .main-visual-text-swiper h1 {
        font-size: clamp(30px, 3.45vw, 41px);
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-proof {
        gap: 8px;
        margin-top: 24px;
        font-size: 16px;
    }
    .selfcos-hero-v2 .hero-proof strong { font-size: 24px; }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-description {
        font-size: clamp(16px, 1.65vw, 19px);
        white-space: normal;
        word-break: keep-all;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-matching-btn {
        width: 264px;
        height: 58px;
        margin-top: 28px;
        padding: 0 22px;
        font-size: 18px;
    }
    .selfcos-mobile-home-v1 .selfcos-hero-v2 .text-area .hero-note {
        padding-left: 0;
        font-size: 14px;
    }
    .selfcos-hero-v2 .hero-partner-list {
        max-width: none;
        gap: 12px;
        padding-right: 12px;
    }
    .selfcos-hero-v2 .hero-partner-card {
        gap: 12px;
        padding: 12px;
    }
    .selfcos-hero-v2 .hero-partner-card:nth-child(2) { transform: translateX(12px); }
    .selfcos-hero-v2 .hero-partner-photo {
        flex-basis: 64px;
        width: 64px;
        height: 72px;
    }
    .selfcos-hero-v2 .hero-partner-kind { font-size: 12px; }
    .selfcos-hero-v2 .hero-partner-info h2 {
        margin-bottom: 5px;
        font-size: 18px;
    }
    .selfcos-hero-v2 .hero-partner-detail {
        font-size: 13px;
        white-space: normal;
        word-break: keep-all;
    }
    .selfcos-mobile-home-v1 .selfcos-home-promo { padding: 32px 0; }
    .selfcos-home-promo .selfcos-home-promo-link--editorial { min-height: 250px; }
    .selfcos-home-promo-copy { padding: 28px; }
    .selfcos-home-promo-copy h2 { font-size: clamp(24px, 2.6vw, 30px); }
    .selfcos-home-promo-copy p { font-size: 15px; }
    .selfcos-home-promo-action { margin-top: 18px; }
}