/* "Our CMS" page, shared by the new site (CmsPage.tsx) and the landing page (cms.html). Plain CSS, no Tailwind. */
.cms { max-width: 1100px; }
.cms-eyebrow { display: inline-block; margin-bottom: 14px; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; color: #5e5e5e; }
.cms h1 { margin: 0 0 20px; font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; }
.cms h2 { margin: 56px 0 16px; font-weight: 700; font-size: 22px; }
.cms-intro { max-width: 680px; margin: 0; font-size: 19px; line-height: 1.55; color: #3d3d3d; }
.cms-hint { margin: 0 0 14px; font-size: 15px; color: #5e5e5e; }
.cms-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; }
.cms-pane-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #e6e6e6; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; color: #5e5e5e; }
.cms-admin { background: #f4f4f2; border-right: 1px solid #e6e6e6; }
.cms-fields { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cms-fields label { display: flex; flex-direction: column; gap: 6px; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; color: #5e5e5e; }
.cms-fields input, .cms-fields textarea { width: 100%; padding: 10px 12px; border: 1px solid #d0d0cc; border-radius: 6px; background: #fff; font: 400 16px/1.4 inherit; font-family: inherit; color: #111; resize: vertical; }
.cms-fields input:focus, .cms-fields textarea:focus { outline: 2px solid #0072c4; outline-offset: 1px; }
.cms-langs { display: flex; gap: 2px; }
.cms-langs button { min-width: 34px; min-height: 28px; border: 0; border-radius: 14px; background: none; font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; color: #5e5e5e; cursor: pointer; }
.cms-langs button[aria-pressed="true"] { background: #fff; color: #111; }
.cms-site { background: #fff; }
.cms-preview { padding: 28px 28px 36px; }
.cms-preview .bar { height: 6px; width: 60px; margin-bottom: 18px; background: #009600; }
.cms-preview h3 { margin: 0 0 10px; font-weight: 700; font-size: clamp(22px, 3vw, 32px); line-height: 1.1; letter-spacing: -.01em; word-break: break-word; }
.cms-preview p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: #3d3d3d; word-break: break-word; }
.cms-preview .img { aspect-ratio: 8 / 3; border-radius: 4px; background: #f4f4f2; }
.cms-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 0; padding: 0; list-style: none; }
.cms-features li { padding-top: 14px; border-top: 6px solid #e6e6e6; }
.cms-features b { display: block; margin-bottom: 6px; font-size: 17px; }
.cms-features span { font-size: 15px; line-height: 1.5; color: #3d3d3d; }
.cms-systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cms-systems div { padding: 20px 22px; border-radius: 8px; background: #f4f4f2; }
.cms-systems b { display: block; margin-bottom: 6px; font-size: 17px; }
.cms-systems span { font-size: 15px; line-height: 1.5; color: #3d3d3d; }
.cms-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 56px; padding: 28px; border-radius: 8px; border: 1px solid #e6e6e6; }
.cms-cta h2 { margin: 0 0 6px; }
.cms-cta p { margin: 0; max-width: 560px; font-size: 16px; color: #3d3d3d; }
.cms-cta .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cms-cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid #111; border-radius: 24px; color: #111; text-decoration: none; font-weight: 500; }
.cms-cta a.primary { background: #111; color: #fff; }
@media (max-width: 760px) {
  .cms-demo { grid-template-columns: minmax(0, 1fr); }
  .cms-admin { border-right: 0; border-bottom: 1px solid #e6e6e6; }
  .cms-features { grid-template-columns: minmax(0, 1fr); }
  .cms-systems { grid-template-columns: minmax(0, 1fr); }
}