.zx-index { margin: 0; background: #f6f3ee; color: #1b1a18; font: 16px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.zx-head { padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid #ddd6cb; display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.zx-home { font-weight: 700; color: inherit; text-decoration: none; }
.zx-sep { color: #999; }
.zx-main { max-width: 68rem; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem; }
.zx-main h1 { font: 600 clamp(1.8rem, 4vw, 2.6rem)/1.15 Georgia, "Iowan Old Style", serif; margin: 0 0 .75rem; max-width: 30ch; }
.zx-lede { max-width: 60ch; color: #4a463f; margin-bottom: 2rem; }
.zx-section { margin-top: 2rem; }
.zx-section-title { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #6b655b; margin: 0 0 1rem; border-top: 1px solid #ddd6cb; padding-top: 1.25rem; }
.zx-layouts { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem; font-size: .95rem; }
.zx-layouts li { padding: .65rem .9rem; background: #fff; border: 1px solid #ddd6cb; border-radius: 4px; line-height: 1.4; }
.zx-layout-meta { display: block; font-size: .85rem; color: #555; margin-top: .2rem; }
.zx-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.zx-door { background: #fff; border: 1px solid #ddd6cb; border-radius: 4px; padding: 1.25rem; display: flex; flex-direction: column; }
.zx-door-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.zx-door-top h2 { margin: 0; font-size: 1.2rem; }
.zx-door-top a { color: inherit; text-decoration: none; }
.zx-door-top a:hover { text-decoration: underline; }
.zx-door-count { font-size: .8rem; color: #777; }
.zx-door-biz-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.zx-door-biz-list a { color: inherit; text-decoration: none; font-size: .95rem; }
.zx-door-biz-list a:hover strong { text-decoration: underline; }
.zx-door-biz-list span { color: #6b655b; font-size: .85rem; }
.zx-door-action { margin-top: auto; font-size: .9rem; font-weight: 600; color: #1b1a18; text-decoration: none; }
.zx-door-action:hover { text-decoration: underline; }

/* Sector page */
.zx-sector-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 2rem; font-size: .9rem; color: #6b655b; }
.zx-sector-nav a { color: #1b1a18; text-decoration: underline; }
.zx-cur-sector { color: #111; font-weight: 700; }
.zx-sector-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
.zx-biz-card { background: #fff; border: 1px solid #ddd6cb; border-radius: 4px; padding: 1.25rem; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.zx-biz-meta h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.zx-biz-meta h3 a { color: inherit; text-decoration: none; }
.zx-biz-meta h3 a:hover { text-decoration: underline; }
.zx-biz-name { font-size: .9rem; color: #6b655b; margin: 0 0 .5rem; }
.zx-biz-lede { font-size: .92rem; color: #333; margin: 0; line-height: 1.45; }
.zx-biz-layouts { margin-top: auto; padding-top: 1rem; border-top: 1px dashed #ddd6cb; }
.zx-layouts-heading { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin-bottom: .4rem; }
.zx-layout-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.zx-layout-tag { padding: .2rem .5rem; border: 1px solid #ccc; border-radius: 3px; font-size: .82rem; color: #1b1a18; text-decoration: none; background: #faf8f5; }
.zx-layout-tag:hover { background: #eee; }
.zx-layout-tag.zx-rec { border-color: #c99c35; background: #fffdf5; font-weight: 600; }
.zx-layout-tag small { font-size: 9px; text-transform: uppercase; color: #8a6a1f; margin-left: .2rem; }
.zx-back { margin-top: 2.5rem; }
.zx-back a { color: #1b1a18; text-decoration: none; font-weight: 500; }
.zx-back a:hover { text-decoration: underline; }

/* Preview page */
.zx-preview-page { margin: 0; background: #1c1c1c; color: #eee; min-height: 100vh; display: flex; flex-direction: column; font: 14px/1.4 ui-sans-serif, -apple-system, sans-serif; }
.zx-preview-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .6rem 1.2rem; background: #111; border-bottom: 1px solid #333; }
.zx-preview-nav { display: flex; align-items: center; gap: 1rem; }
.zx-preview-back { color: #ffd27a; text-decoration: none; font-weight: 600; font-size: 13px; }
.zx-preview-back:hover { text-decoration: underline; }
.zx-preview-title { font-size: 13px; color: #999; }
.zx-viewport-controls { display: flex; gap: 2px; background: #2a2a2a; border-radius: 4px; padding: 2px; }
.zx-vp-btn { background: transparent; color: #ccc; border: 0; padding: .35rem .75rem; border-radius: 3px; font: 500 12px/1 ui-sans-serif, sans-serif; cursor: pointer; }
.zx-vp-btn:hover { color: #fff; background: #3a3a3a; }
.zx-vp-btn.is-active { background: #ffd27a; color: #111; font-weight: 600; }
.zx-preview-actions a { color: #ccc; font-size: 12px; text-decoration: none; }
.zx-preview-actions a:hover { color: #fff; text-decoration: underline; }
.zx-preview-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; box-sizing: border-box; }
.zx-preview-stage { display: flex; justify-content: center; width: 100%; height: calc(100vh - 110px); min-height: 520px; }
.zx-preview-iframe { height: 100%; max-width: 100%; border: 1px solid #444; border-radius: 6px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.zx-preview-fallback { background: #fff; color: #111; padding: 2.5rem; border-radius: 6px; max-width: 28rem; text-align: center; margin: 4rem auto; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.zx-preview-fallback h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.zx-preview-fallback p { color: #555; margin: .5rem 0; }
.zx-fallback-link { display: inline-block; margin-top: 1rem; padding: .5rem 1rem; background: #111; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 500; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Legacy section */
.zx-legacy { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #ddd6cb; }
.zx-legacy h2 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #6b655b; }
.zx-legacy ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.zx-legacy a { color: #1b1a18; text-decoration: underline; }