/* One visible lead-in presentation for regular Features. Numbered lists
   describe real sequences; the Legacy table compares parallel benefits. */
#features .mb-feature-reading {
    --mb-reading-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
    width: 100%; min-width: 0; max-width: 76ch;
    color: var(--mb-body); font: 400 17px/1.65 var(--mb-reading-font);
    overflow-wrap: break-word;
}
#features .mb-feature-reading [hidden] { display: none !important; }
#features .mb-feature-reading p { margin: 0; }
#features .mb-feature-guide h3 {
    margin: 10px 0 13px; color: var(--mb-head);
    font: 600 clamp(23px, 2.2vw, 30px)/1.3 var(--mb-display);
    letter-spacing: 0; text-transform: none;
}
#features .mb-reading-kicker {
    color: #b8b1a2; font: 500 11px/1.6 var(--mb-reading-font);
    letter-spacing: .09em; text-transform: uppercase;
}
#features .mb-reading-kicker span { padding: 0 8px; color: var(--mb-gold); }
#features .mb-feature-guide .mb-guide-hook {
    color: #e6d6b3; font: italic 400 20px/1.5 var(--mb-text);
}
#codex-microbot .mb-guide-overview { margin-top: 24px; }
#codex-microbot .mb-guide-overview p + p { margin-top: 14px; }
#codex-microbot .mb-guide-overview p:last-child {
    margin-top: 24px; color: var(--mb-head); text-align: center;
    font: italic 400 20px/1.6 var(--mb-text);
}
#features .mb-guide-group { margin-top: 22px; }
#features .mb-guide-group h4 {
    margin: 0 0 2px; color: var(--mb-gold-hi);
    font: 600 13px/1.4 var(--mb-display); letter-spacing: .08em;
    text-transform: uppercase;
}
#features .mb-guide-lines { list-style: none; margin: 0; padding: 0; }
#features .mb-guide-lines li { position: relative; padding: 6px 0 6px 24px; }
#features .mb-guide-lines li::before {
    content: ''; position: absolute; left: 3px; top: 16px;
    width: 7px; height: 7px; background: var(--mb-gold); transform: rotate(45deg);
}
#features .mb-guide-steps { counter-reset: mb-guide-step; }
#features .mb-guide-steps li { counter-increment: mb-guide-step; padding-left: 28px; }
#features .mb-guide-steps li::before {
    content: counter(mb-guide-step) '.'; left: 0; top: 6px;
    width: auto; height: auto; background: none; transform: none;
    color: var(--mb-gold-hi); font-weight: 600;
}
#features .mb-guide-lines strong { color: var(--mb-head); font-weight: 600; }
#features .mb-feature-guide a,
#features .mb-feature-guide a:hover { color: #FFA500; font-weight: 600; text-decoration: none; }
#features .mb-feature-guide a:focus-visible,
#wiki .mb-guide-landing a:focus-visible { outline: 2px solid var(--mb-gold-hi); outline-offset: 4px; }
#features .mb-guide-value,
#wiki .mb-guide-answer .mb-guide-value { color: #7FFF00; font-weight: 600; }
#wiki .mb-guide-landing { margin: 8px 0 16px; font: 400 15px/1.55 system-ui, sans-serif; }
#wiki .mb-guide-landing[hidden], #wiki .mb-guide-landing [hidden] { display: none !important; }
#wiki .mb-guide-return {
    display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
    margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--mb-line);
    background: rgba(217,164,65,.07); font-size: 13px;
}
#wiki .mb-guide-return a { color: #FFA500; text-decoration: none; font-weight: 600; }
#wiki .mb-guide-return span { color: #b8b1a2; }
#wiki .mb-guide-answer {
    margin: 0; padding: 10px 12px; border-left: 2px solid var(--mb-gold-hi);
    background: rgba(217,164,65,.055); color: var(--mb-body);
}
#wiki .mb-guide-answer a { color: #FFA500; text-decoration: none; font-weight: 600; }
#wiki .mb-wiki-page > h3 { scroll-margin-top: 96px; }
#wiki .is-feature-arrival { color: var(--mb-gold-hi); }

#features .mb-reading-table {
    width: 100%;
    table-layout: fixed;
    margin: 26px 0;
    border-collapse: collapse;
    font: 400 14px/1.5 var(--mb-reading-font);
}
#features .mb-reading-table caption {
    margin-bottom: 14px;
    color: var(--mb-head);
    text-align: left;
    font-weight: 600;
    font-size: 17px;
}
#features .mb-reading-table th,
#features .mb-reading-table td { padding: 12px 10px; border-bottom: 1px solid var(--mb-line); text-align: left; vertical-align: top; }
#features .mb-reading-table th { color: var(--mb-head); font-weight: 500; }
#features .mb-reading-table thead th { background: var(--mb-soft); font-size: 12px; }
#features .mb-reading-table th:first-child { width: 30%; padding-left: 0; }
#features .mb-reading-table thead th:first-child { padding-left: 10px; }


@media (max-width: 620px) {
    #features .mb-feature-guide .mb-guide-hook { font-size: 18px; }
    #features .mb-reading-table { font-size: 13px; }
    #features .mb-reading-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    #features .mb-reading-table tbody { display: block; }
    #features .mb-reading-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 13px 0; border-bottom: 1px solid var(--mb-line); }
    #features .mb-reading-table tbody th { grid-column: 1 / -1; padding: 0 0 10px; font-size: 15px; font-weight: 600; }
    #features .mb-reading-table tbody td { padding: 0; border: 0; }
    #features .mb-reading-table tbody th:first-child { width: auto; border: 0; }
    #features .mb-reading-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #b8b1a2; font-size: 11px; }
}
