.hwc-connector {
    --hwc-text: #24313a;
    --hwc-link: #17242c;
    --hwc-radius: 16px;
    width: 100%;
    margin: 1.5rem 0;
    color: var(--hwc-text);
    font-family: inherit;
}

.hwc-connector,
.hwc-connector * {
    box-sizing: border-box;
}

.hwc-title {
    margin: 0 0 .35rem;
    color: inherit;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.25;
}

.hwc-intro {
    margin: 0 0 1rem;
    max-width: 76ch;
    color: inherit;
    font-size: .96rem;
    line-height: 1.55;
    opacity: .86;
}

.hwc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hwc-card {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid rgba(28, 43, 52, .10);
    border-radius: var(--hwc-radius);
    box-shadow: 0 1px 2px rgba(28, 43, 52, .035);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hwc-card:hover {
    transform: translateY(-1px);
    border-color: rgba(28, 43, 52, .18);
    box-shadow: 0 4px 13px rgba(28, 43, 52, .07);
}

.hwc-copy {
    align-self: center;
    margin: 0;
    color: var(--hwc-text);
    font-size: .94rem;
    line-height: 1.52;
}

.hwc-site-name {
    display: inline;
    margin-right: .28em;
    font-weight: 750;
}

.hwc-site-name a {
    color: var(--hwc-link);
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(23, 36, 44, .28);
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
}

.hwc-site-name a:hover,
.hwc-site-name a:focus {
    color: var(--hwc-link);
    text-decoration-color: currentColor;
}

.hwc-description {
    display: inline;
}

.hwc-tone-blue-1 { background: #edf6fb; }
.hwc-tone-blue-2 { background: #e8f2f8; }
.hwc-tone-blue-3 { background: #f0f7fc; }
.hwc-tone-green-1 { background: #edf7f0; }
.hwc-tone-green-2 { background: #e8f4ee; }
.hwc-tone-green-3 { background: #f1f8f2; }
.hwc-tone-grey-1 { background: #f3f5f6; }
.hwc-tone-grey-2 { background: #eceff1; }
.hwc-tone-orange-1 { background: #fff4e8; }
.hwc-tone-orange-2 { background: #fbeedd; }

@media (max-width: 700px) {
    .hwc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
    }

    .hwc-card {
        padding: .82rem .9rem;
        border-radius: 14px;
    }

    .hwc-copy {
        font-size: .92rem;
    }
}

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

    .hwc-card:hover {
        transform: none;
    }
}