.banner-toolbar{display:flex;justify-content:flex-end;padding:2px 12px 6px;gap:8px}.banner-toolbar a{display:inline-block;padding:5px 10px;background:#ffe56b;color:#332b08;border:1px solid #c5a52e;border-radius:4px;font:600 11px/1.4 system-ui,sans-serif;text-align:center;text-decoration:none}.banner-toolbar a small{display:none}.banner-toolbar a:focus-visible,.managed-banner:focus-visible{outline:3px solid #ffe56b;outline-offset:3px}
.board-banners[hidden]{display:none!important}.board-banners{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0 12px;margin:10px 0 5px;width:100%}
.board-banners .managed-banner{height:108px;min-height:0;min-width:0;padding:6px;background:#f2f4eb;border:1px solid #b5c2ac;color:#233c2e;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-align:center;text-decoration:none;border-radius:5px}
.board-banners .managed-banner img{display:block;width:100%;height:58px;object-fit:contain;background:#e8ecdf}.board-banners .managed-banner img[hidden]{display:none}
.board-banners .managed-banner.oguk-banner img{flex:1 1 0;height:0;min-height:0;object-fit:contain}
.board-banners .oguk-banner strong{flex:none}
.board-banners .managed-banner strong{display:block;max-width:100%;color:#233c2e;font-size:12px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-banners .managed-banner strong.banner-domain{font-family:Arial,sans-serif;font-size:clamp(7px,2vw,12px);letter-spacing:-.15px}
.board-banners .managed-banner small{color:#53694c;display:block;max-width:100%;font-size:10px;line-height:1.2;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-banners .banner-empty{border:1px dashed #a5b6a0;background:#edf0e6}
.board-banners .banner-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:58px;background:repeating-linear-gradient(135deg,#e0e8d8 0,#e0e8d8 9px,#e8eee1 9px,#e8eee1 18px);color:#607857;font:bold 22px/1 system-ui,sans-serif;letter-spacing:2px;border-radius:3px}
.board-banners .managed-banner:hover{border-color:#ffe56b;background:#fff8d8}
@media(max-width:700px){.board-banners{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:0 8px;margin-top:8px}.board-banners .managed-banner{height:86px;padding:4px;gap:3px}.board-banners .managed-banner img,.board-banners .banner-placeholder{height:42px}.board-banners .banner-placeholder{font-size:18px}.board-banners .managed-banner strong{font-size:10px}.board-banners .managed-banner small{font-size:8px}.banner-toolbar{padding-right:8px}}

/* Five stacked slots on each side of the spatial board. */
.board-banner-layout{display:grid;grid-template-columns:clamp(100px,12vw,190px) minmax(0,1fr) clamp(100px,12vw,190px);gap:12px;align-items:stretch;width:100%;min-width:0}
.board-banner-layout>.stage{min-width:0;width:100%;margin:0}
.board-banner-layout>.board-banners{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr));gap:8px;padding:0;margin:0;width:100%;min-width:0}
.board-banners .managed-banner{height:100%;min-height:95px;width:100%}
.home-layout .hero>.board-intro-row{flex-wrap:wrap}.home-layout .board-intro-row .intro{white-space:normal}
@media(max-width:700px){.board-banner-layout{grid-template-columns:62px minmax(0,1fr) 62px;gap:5px}.board-banner-layout>.board-banners{gap:5px;padding:0;margin:0}.board-banners .managed-banner{height:100%;min-height:75px;padding:3px}.board-banners .managed-banner img,.board-banners .banner-placeholder{height:38px}.board-banners .managed-banner strong{font-size:9px}.board-banners .managed-banner small{font-size:8px}.board-banners .managed-banner strong.banner-domain{font-size:7px}.stagehead{padding:8px 5px;font-size:10px}.stagefoot{padding:7px 5px}.stagefoot>span{min-width:0}.home-layout .hero{padding:6px}}

.board-banner-layout{grid-column:1 / -1}
/* Transparent vacant advertising slots, with readable bilingual text and crisp edges. */
.board-banners .managed-banner{border:2px solid #d1d1d1;box-shadow:0 0 0 1px #15171c99,inset 0 0 0 1px #ffffff26}
.board-banners .managed-banner.banner-empty,.board-banners .managed-banner.banner-empty:hover{background:transparent;border:2px solid #d1d1d1}
.board-banners .banner-empty .banner-placeholder{background:transparent;color:#fff4f8;text-shadow:0 1px 3px #000,0 0 5px #000;font-weight:800}
.board-banners .banner-empty strong,.board-banners .banner-empty small{color:#fff4f8;font-weight:700;text-shadow:0 1px 3px #000,0 0 5px #000;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.board-banners .banner-empty .en{display:block;margin-top:2px;font-size:9px;opacity:1;letter-spacing:0}
.board-banners .managed-banner:hover{border-color:#e6e6e6}
@media(max-width:700px){.board-banners .banner-empty .en{font-size:8px}.board-banners .banner-empty strong{font-size:10px}.board-banners .banner-placeholder{height:24px;font-size:16px}.board-banners .managed-banner.banner-empty{gap:2px}}

/* Adjacent homepage panels and advertising cells share their edges. */
body .home-layout{margin-top:0;margin-bottom:0}
body .home-layout .hero{padding:0;gap:0}
body .board-banner-layout{gap:0}
body .board-banner-layout>.board-banners{gap:0}
body .board-banner-layout>.stage,body .board-banners .managed-banner,body .home-layout>main{border-radius:0}
body .company-top{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
body .company-footer{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
body .home-layout .hero>.board-intro-row{gap:0}

/* Explanatory life/death view sits below, never over, the main board. */
.demo-case-dock{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding:0;background:#d2d3cd}
.stage .demo-case-canvas{display:block;flex:none;width:200px;height:190px;max-width:100%;border:1px solid #a97822;box-sizing:content-box}

.demo-case-row{display:flex;align-items:flex-end;background:#d2d3cd;gap:0}.demo-case-row #boardInfo{flex:1;min-width:0;margin:0}.demo-case-row .demo-case-dock{flex:0 0 202px;width:202px;max-width:100%}@media(max-width:450px){.demo-case-row{flex-wrap:wrap}.demo-case-row #boardInfo{flex-basis:100%}.demo-case-row .demo-case-dock{margin-left:auto}}

/* Equal-height summary columns: demo above coordinates beside the clear diagram. */
.demo-case-row{display:grid;grid-template-columns:minmax(0,1fr) 202px;align-items:stretch}
.demo-status-stack{display:grid;grid-template-rows:1fr 1fr;height:192px;min-width:0;background:#e6e5e0}
.demo-status-panel,.demo-status-stack #boardInfo{box-sizing:border-box;display:flex;align-items:center;white-space:pre-line;overflow-wrap:anywhere;line-height:1.55;font:13px/1.55 system-ui,sans-serif;color:#29342d;background:#e6e5e0;border:1px solid #a97822;padding:8px 12px;margin:0;min-width:0}
.demo-status-stack #boardInfo{width:auto;min-height:0}
.demo-case-row .demo-case-dock{width:202px;margin:0}
@media(max-width:450px){.demo-case-row{display:grid;grid-template-columns:minmax(0,1fr) 202px;flex-wrap:nowrap}.demo-status-panel,.demo-status-stack #boardInfo{font-size:10px;line-height:1.35;padding:5px}.demo-status-stack{height:192px}.demo-case-row .demo-case-dock{margin:0}}