/* ==========================================================================
   Covan — page-level refinements
   ========================================================================== */

/* hero capability strip */
.meta-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: 18px;
}
.meta-strip__item {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 18px;
  font-size: .82rem; color: var(--muted);
  border-left: 1px solid var(--line);
}
.meta-strip__item:first-child { border-left: 0; padding-left: 0; }
.meta-strip__item svg { color: var(--ember-2); flex: none; }

/* floating stat cards inside the hero need an explicit size (outside container) */
.hero__visual .ui-float { font-size: 12px; }
.hero__visual .ui-float .v { font-size: 1.35em; }

/* cream sections: slightly softer cards */
.section--cream .card { background: #fffdf9; border-color: rgba(20, 17, 13, .12); }
.section--cream .card p { color: #4e463c; }
.section--cream .card:hover { border-color: rgba(20, 17, 13, .2); }
.section--cream .panel { background: #fff; }
.section--cream .eyebrow { color: #a2511b; }
.section--cream .sec-head__row + * { margin-top: 0; }

/* active language chip */
.chip.is-on { border-color: rgba(255, 106, 42, .5); color: var(--text); }

/* landing hero visual should not overflow on tall cards */
.hero__visual .console-wrap { position: relative; }

/* record switcher json block scrolls, never breaks layout */
.record__body .jsonline { max-width: 100%; }

/* page hero inline stats */
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 4px; }
.hero-facts div { display: flex; align-items: baseline; gap: 8px; }
.hero-facts b { font-size: 1.06rem; font-weight: 600; letter-spacing: -.03em; }
.hero-facts span { font-size: .82rem; color: var(--faint); }

/* deployment diagram */
.stack-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.stack-list > div {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.stack-list b { font-size: .95rem; font-weight: 500; }
.stack-list span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* three-column detail lists on cream */
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(20,17,13,.12); border-radius: var(--radius); overflow: hidden; }
.detail-grid > div { padding: 24px; border-right: 1px solid rgba(20,17,13,.1); }
.detail-grid > div:last-child { border-right: 0; }
.detail-grid h4 { font-size: .98rem; margin-bottom: 8px; }
.detail-grid p { font-size: .87rem; line-height: 1.6; color: var(--on-cream-2); }

/* demo layout */
.demo-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.demo-aside { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 28px); }

/* agents */
.agent {
  display: grid; gap: 12px; padding: 24px; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  transition: border-color .3s, transform .5s var(--ease-out);
}
.agent:hover { border-color: var(--line-3); transform: translateY(-2px); }
.agent__top { display: flex; align-items: center; gap: 12px; }
.agent__top h3 { font-size: 1rem; }
.agent__role { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.agent p { font-size: .87rem; line-height: 1.58; color: var(--muted); }
.agent__tool { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-2); }

/* source grid on cmdb page */
.srcgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.srcgrid .src-pill { justify-content: center; background: rgba(255,255,255,.03); }

/* compare page sticky first column on wide screens */
@media (min-width: 1021px) {
  .cmp--full td:first-child, .cmp--full th:first-child { position: sticky; left: 0; background: #0b0d10; z-index: 1; }
  .cmp--full thead th:first-child { z-index: 3; }
}

/* roadmap list */
.roadmap { display: flex; flex-wrap: wrap; gap: 8px; }

/* pricing / contact callout */
.contact-card { display: grid; gap: 16px; }
.contact-card a { font-size: 1.06rem; font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--line-2); padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.contact-card a:hover { border-color: var(--ember); color: var(--ember-2); }

@media (max-width: 1180px) {
  .meta-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meta-strip__item:nth-child(4) { border-left: 0; padding-left: 0; }
  .srcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-aside { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > div { border-right: 0; border-bottom: 1px solid rgba(20,17,13,.1); }
  .detail-grid > div:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .meta-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .srcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__visual .ui-float { display: none; }
}


/* home compare split: wider table column on desktop only */
.split--compare { grid-template-columns: 1fr 1.18fr; }
@media (max-width: 1020px) { .split--compare { grid-template-columns: 1fr; } }