/* Container is inline-block so text-align on parent works */
.dot-heading {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #fff;
    border-radius: 30px;
}

/* Dot is now 8×8px */
.dot-heading .dot {
    width: 8px;
    height: 8px;
    margin-right: 10px;
    /* border-radius comes from the SELECT control */
}

/* Text fallback styling */
.dot-heading .text {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: #1f3266;
}