.arch-support-map {
    --support-connector:var(--theme-connector,#91a575);
    margin:32px 0 0;
    padding:30px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--theme-soft,#edf1e5);
}

.arch-support-heading { margin-bottom:28px; }
.arch-support-heading .eyebrow { margin-bottom:10px; }
.arch-support-heading h3 { font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.25; }
.arch-support-description {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

.arch-support-layers {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:0 0 24px;
    padding:0;
    list-style:none;
    position:relative;
}
.arch-support-layers::after {
    content:"";
    position:absolute;
    height:1px;
    left:calc((100% - 48px) / 8);
    right:calc((100% - 48px) / 8);
    bottom:-13px;
    background:var(--support-connector);
}
.arch-support-layers li {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:0;
    padding:13px 10px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--theme-surface,#fff);
    font-size:.875rem;
    font-weight:600;
    line-height:1.4;
}
.arch-support-layers li::after {
    content:"";
    position:absolute;
    width:1px;
    height:13px;
    left:50%;
    bottom:-14px;
    background:var(--support-connector);
}
.arch-support-layer-mark { width:9px; height:9px; border:1px solid currentColor; border-radius:2px; flex-shrink:0; }
.arch-support-bronze .arch-support-layer-mark { background:#d0a273; color:#a87543; }
.arch-support-silver .arch-support-layer-mark { background:#c3cdc7; color:#718479; }
.arch-support-gold .arch-support-layer-mark { background:#e8ce6c; color:#ae8e26; }
.arch-support-semantic .arch-support-layer-mark { background:#a4c66e; color:#6a903b; }

.arch-support-foundation { position:relative; }
.arch-support-foundation::before {
    content:"";
    position:absolute;
    left:50%;
    top:-12px;
    height:12px;
    width:1px;
    background:var(--support-connector);
}
.arch-support-rail { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 20px; color:var(--theme-accent,var(--forest)); text-align:center; font-size:.69rem; font-weight:700; letter-spacing:.06em; line-height:1.5; }
.arch-support-rail::before,.arch-support-rail::after { content:""; flex:1; height:1px; background:var(--support-connector); }
.arch-support-rail span { padding:8px 0; }
.arch-support-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.arch-support-capabilities li { display:flex; align-items:flex-start; gap:15px; padding:20px 18px; border:1px solid var(--line); border-radius:7px; background:var(--theme-surface,#fff); }
.arch-support-capabilities li>div { min-width:0; }
.arch-support-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; color:var(--theme-accent,var(--forest)); }
.arch-support-icon svg { display:block; width:32px; height:32px; }
.arch-support-capabilities h4 { margin:0 0 6px; color:var(--ink); font-size:.85rem; font-weight:600; line-height:1.4; }
.arch-support-capabilities p { margin:0; color:var(--muted); font-size:.77rem; line-height:1.65; }

@media(max-width:1000px) {
    .arch-support-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
    .arch-support-map { padding:24px 18px; }
    .arch-support-layers { gap:8px; }
    .arch-support-layers::after { left:calc((100% - 24px) / 8); right:calc((100% - 24px) / 8); }
    .arch-support-layers li { flex-direction:column; gap:7px; padding:11px 4px; font-size:.7rem; }
    .arch-support-rail { gap:8px; font-size:.64rem; }
    .arch-support-rail span { max-width:185px; }
    .arch-support-capabilities { grid-template-columns:1fr; gap:10px; }
    .arch-support-capabilities li { padding:17px 14px; }
    .arch-support-capabilities h4 { font-size:.875rem; }
    .arch-support-capabilities p { font-size:.8rem; }
}
@media print {
    .arch-support-map { padding:18px; background:#fff; }
    .arch-support-heading { break-after:avoid; }
    .arch-support-capabilities { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .arch-support-capabilities li { padding:12px; gap:10px; break-inside:avoid; }
    .arch-support-capabilities h4 { font-size:9pt; }
    .arch-support-capabilities p { font-size:8pt; }
    .arch-support-icon { width:28px; height:28px; flex-basis:28px; }
    .arch-support-icon svg { width:26px; height:26px; }
}