/* ------------------------------------------------------------
   Message-specific hero overrides
   ------------------------------------------------------------ */



.landing-msg-type-label {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.32);
}

/* ------------------------------------------------------------
   Segment structure table
   ------------------------------------------------------------ */

.landing-msg-structure {
    background: #fff;
    padding: 100px 48px;
}


.landing-msg-table-wrap {
    max-width: 960px;
    margin: 0 auto;
    overflow-x: auto;
}

.landing-msg-table {
    min-width: 720px;
}

.landing-msg-td-seg a,
.landing-msg-td-seg a:link,
.landing-msg-td-seg a:visited {
    text-decoration: none;
    color: inherit;
}

.landing-msg-td-seg a:hover code {
    background: rgba(59, 130, 246, 0.12);
}

.landing-msg-td-human {
    color: var(--landing-text-dark-muted);
    font-size: var(--landing-font-body-sm);
}

.landing-msg-group-badge {
    display: inline-block;
    font-size: var(--landing-font-badge);
    font-weight: 600;
    font-family: ZatoMainFontMedium, sans-serif;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.landing-msg-row-grouped {
    background: #faf8ff;
}

.landing-msg-row-grouped:hover {
    background: #f3f0ff !important;
}

/* ------------------------------------------------------------
   Code examples
   ------------------------------------------------------------ */

.landing-msg-examples {
    background: #f9fafb;
    padding: 100px 48px;
}




/* ------------------------------------------------------------
   Message-specific responsive
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    .landing-msg-structure,
    .landing-msg-examples {
        padding-left: 24px;
        padding-right: 24px;
    }
}