/* codeMeter SEO landing pages (seo/codemeter.py). Loaded only on these pages.
   Same quiet style as the meter page: tiles, short copy, dark only for the screen. */

/* breadcrumbs + related links (not in styles.css yet) */
.crumbs { font-size: 15px; color: var(--ink-3); margin-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); }
.related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related a { display: block; padding: 18px 22px; background: var(--bg); border-radius: var(--r-in); text-decoration: none; font-weight: 600; transition: box-shadow .3s; }
.related a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* prose: one or two short paragraphs, readable width */
.cm-prose { max-width: 760px; display: grid; gap: 16px; color: var(--ink-2); }
.cm-prose b { color: var(--ink); }
.cm-prose a, .cm-tbl a, .cm-list a { color: var(--accent-ink); }

/* plan / comparison tables */
.cm-tbl-wrap { overflow-x: auto; border-radius: var(--r-in); background: var(--bg); }
.cm-tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.cm-tbl th, .cm-tbl td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cm-tbl tr:last-child td { border-bottom: 0; }
.cm-tbl th { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.cm-tbl td:first-child { font-weight: 600; }
.cm-tbl td { color: var(--ink-2); }

/* bullet list with a thin rule, like the facts list */
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 760px; }
.cm-list li { padding-left: 20px; border-left: 2px solid var(--accent); color: var(--ink-2); }
.cm-list li b { display: block; color: var(--ink); font-size: 19px; letter-spacing: -.01em; margin-bottom: 2px; }

/* screens without the stand: flat firmware renders in a black bezel */
.cm-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cm-figs.two { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.cm-fig { margin: 0; }
.cm-frame { background: #000; border-radius: 10px; padding: 10px; box-shadow: 0 0 0 1px #2a2723; }
.cm-frame img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 3px; }
.cm-fig figcaption { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.cm-fig figcaption b { color: var(--ink); display: block; }

/* phone screenshots of the setup page */
.cm-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); gap: 28px; }
.cm-phones figure { margin: 0; }
.cm-phones img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 8px var(--ink), 0 18px 40px -18px rgba(0,0,0,.4); }
.cm-phones figcaption { margin-top: 20px; font-size: 15px; color: var(--ink-2); }

/* hub cards */
.cm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cm-cards a { display: grid; gap: 6px; align-content: start; padding: 24px; background: var(--bg); border-radius: var(--r); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cm-cards a:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(0,0,0,.35); }
.cm-cards b { font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.cm-cards span { color: var(--ink-2); font-size: 16px; }
.cm-cards small { color: var(--accent-ink); font-weight: 600; font-size: 14px; margin-top: 6px; }
.cm-group + .cm-group { margin-top: 64px; }
.cm-group h3 { font-size: 15px; font-weight: 600; color: var(--ink-3); margin: 0 0 18px; text-transform: none; }

/* release timeline */
.cm-rel { list-style: none; margin: 0; padding: 0; max-width: 820px; border-top: 1px solid var(--line); }
.cm-rel li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cm-rel .date { margin: 0; }
.cm-rel p { color: var(--ink-2); }
.cm-rel p b { color: var(--ink); }

/* pace check: a firmware-faithful screen + three inputs */
.cm-pace { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.cm-pace form { display: grid; gap: 22px; }
.cm-pace label { display: grid; gap: 8px; font-weight: 600; font-size: 16px; }
.cm-pace label small { font-weight: 400; color: var(--ink-3); }
.cm-pace .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-pace input[type=number], .cm-pace select { height: 48px; width: 100%; border-radius: 999px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); padding: 0 18px; font: 500 16px var(--font); }
.cm-pace input[type=range] { width: 100%; accent-color: var(--accent); }
.cm-pace output { display: block; font-size: 19px; line-height: 1.45; color: var(--ink); min-height: 4.4em; }
.cm-pace .seg { display: flex; gap: 6px; padding: 5px; background: var(--bg-soft); border-radius: 999px; flex-wrap: wrap; }
.cm-pace .seg button { flex: 1; background: none; border: 0; color: var(--ink-2); font: 600 15px var(--font); padding: 10px 12px; border-radius: 999px; cursor: pointer; }
.cm-pace .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* the screen itself (positions in 320x240 panel pixels, like render.html) */
.cm-scr { font-family: Arial, Helvetica, sans-serif; }
.cm-scr div { position: absolute; white-space: pre; line-height: 1; }
.cm-scr .bx { border-radius: 0; }

@media (max-width: 960px) {
  .related, .cm-cards, .cm-figs { grid-template-columns: 1fr 1fr; }
  .cm-pace { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .related, .cm-cards, .cm-figs, .cm-figs.two { grid-template-columns: 1fr; }
  .cm-rel li { grid-template-columns: 1fr; gap: 4px; }
  .cm-tbl { font-size: 15px; }
  .cm-tbl th, .cm-tbl td { padding: 12px 12px; }
  .cm-phones { grid-template-columns: 1fr 1fr; gap: 18px; }
}