/* Comparison pages: the side-by-side matrix */

/* ───── G2 ratings ─────
   coralogix.com shows this as a light table with a coloured bar per vendor. Here the two columns
   are told apart by colour alone on live, which is the one thing a bar chart must not rely on, so
   ours also labels every value and sets the competitor's bar to its own brand colour (--them) at a
   weight that still reads on the dark panel. */
.g2 { max-width: 920px; margin: 0 auto; padding: 36px 38px 30px; border: 1px solid var(--line-2); border-radius: 20px; background: rgb(var(--ink) / .02); }
.g2-mark { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; }
.g2-mark svg { width: 28px; height: 28px; flex: none; }
.g2-mark b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.g2-stars { color: #f5b942; font-size: 17px; letter-spacing: 2px; }
.g2-stars i { opacity: .45; font-style: normal; }

.g2-table { display: flex; flex-direction: column; }
.g2-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.g2-row:last-child { border-bottom: 0; }
.g2-head { padding-top: 0; font-family: var(--mono); font-size: 12.5px; }
.g2-head .g2-us { color: var(--accent); }
.g2-head .g2-them span { color: var(--them); }
.g2-label { font-size: 15px; color: var(--fg); }
.g2-val { display: flex; align-items: center; gap: 12px; }
.g2-val b { min-width: 42px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.g2-bar { flex: 1; height: 8px; border-radius: 999px; background: rgb(var(--ink) / .08); overflow: hidden; }
.g2-bar i { display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--accent); }
.g2-them .g2-bar i { background: var(--them); }
.g2-foot { padding-bottom: 0; font-size: 17px; font-weight: 560; }
.g2-foot .g2-label { font-weight: 560; }
.g2-foot .g2-us { color: var(--accent); }
.g2-foot .g2-them span { color: var(--them); }
.g2-note { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--fg-3); }

@media (max-width: 860px) {
  .g2 { padding: 28px 20px 24px; }
  .g2-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  .g2-head { display: none; }  /* with one column per row the labels would outnumber the data */
  .g2-label { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }
  /* the column header is gone, so each value says whose it is */
  .g2-val::before { content: "Coralogix"; min-width: 72px; font-size: 12px; color: var(--accent); }
  .g2-them::before { content: var(--them-name); color: var(--them); }
}

/* .sr-only lives in the careers page's own stylesheet, not in styles.css, so it has to be
   restated here — the G2 mark's "4.6 out of 5 on G2" is for screen readers and renders as
   visible text without it. Worth hoisting into styles.css the next time that file is touched. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Four "how we are different" cards in a three-up grid strand the fourth on a row of its own. */
.personas:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .personas:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .personas:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: minmax(0, 1fr); }
}

/* ───── Migration benchmarks ─────
   Figures from benchmarks.coralogix.com/migration-benchmarks. The chart shows all four timed
   sources with this page's vendor at full strength and the rest dimmed, so the number has context
   instead of standing on its own. Everything is one inline SVG scaled by its viewBox — no chart
   library, and it stays crisp at any width. */
.bench .section-head p { max-width: 70ch; }
.bk { max-width: 1040px; margin: 0 auto; padding: 30px 32px 24px; border: 1px solid var(--line-2); border-radius: 20px; background: rgb(var(--ink) / .02); }
.bk-key { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }
.bk-k { display: inline-flex; align-items: center; gap: 8px; }
.bk-k::before { content: ""; width: 14px; height: 8px; border-radius: 4px; background: rgb(var(--ink) / .22); }
.bk-k-after::before { background: var(--accent); }

.bk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.bk-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 62px; gap: 18px; align-items: center; opacity: .42; }
.bk-row.is-on { opacity: 1; }
.bk-name { font-family: var(--mono); font-size: 13.5px; color: var(--fg-2); }
.bk-row.is-on .bk-name { color: var(--fg-0); }
.bk-bars { display: grid; gap: 7px; }
.bk-bar { display: flex; align-items: center; gap: 10px; }
.bk-bar i { display: block; width: var(--w); min-width: 4px; height: 15px; border-radius: 8px; background: rgb(var(--ink) / .22); }
.bk-after i { background: var(--accent); }
.bk-bar b { font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--fg-3); white-space: nowrap; }
.bk-after b { color: var(--mint); }
.bk-x { font-family: var(--mono); font-size: 15px; color: var(--fg-3); text-align: right; }
.bk-row.is-on .bk-x { font-size: 19px; color: var(--accent); }
.bk figcaption { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--fg-3); }

.bk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1040px; margin: 48px auto 0; }
.bk-stats div { padding-left: 24px; border-left: 1px solid rgba(19,233,137,.4); }
.bk-stats b { display: block; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -0.04em;
  color: var(--accent); }
.bk-stats span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--fg-2); }
.bk-src { margin: 34px 0 0; text-align: center; }

@media (max-width: 860px) {
  .bk { padding: 24px 18px 20px; }
  /* label above the bars with the × beside it: three columns stop fitting well before the bars do */
  .bk-row, .bk-row.is-on { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .bk-name { grid-column: 1; }
  .bk-x, .bk-row.is-on .bk-x { grid-column: 2; grid-row: 1; }
  .bk-bars { grid-column: 1 / -1; }
  .bk-rows { gap: 22px; }
  .bk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .bk-stats div { padding-left: 14px; }
}
@media (max-width: 560px) {
  .bk-stats { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* pages.css sizes .quote-logo by height alone. Claroty's wordmark is 700x80 — nearly 9:1 — so at
   38px tall it came out 333px wide and would run past the card on a narrow screen. Cap the width
   too and let height follow, which leaves the other four untouched. */
.quote-logo { max-width: 200px; height: auto; max-height: 38px; }

/* ───── The hub's tabbed G2 ─────
   Five vendors in one table. The tabs are radio inputs with sibling selectors, so switching vendor
   needs no script; the inputs come first in the markup so `~` can reach both the tab row and the
   panels. Each panel sets its own --them, so the bars take the vendor's brand colour as on the
   single-vendor pages. */
.g2-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.g2-tablist label { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 14px; color: var(--fg-2); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s; }
.g2-tablist label:hover { color: var(--fg); border-color: rgb(var(--ink) / .25); }
.g2-panel { display: none; }
.g2-tabs > input:nth-of-type(1):checked ~ .g2-panels > .g2-panel:nth-child(1),
.g2-tabs > input:nth-of-type(2):checked ~ .g2-panels > .g2-panel:nth-child(2),
.g2-tabs > input:nth-of-type(3):checked ~ .g2-panels > .g2-panel:nth-child(3),
.g2-tabs > input:nth-of-type(4):checked ~ .g2-panels > .g2-panel:nth-child(4),
.g2-tabs > input:nth-of-type(5):checked ~ .g2-panels > .g2-panel:nth-child(5) { display: block; }
.g2-tabs > input:nth-of-type(1):checked ~ .g2-tablist > label:nth-child(1),
.g2-tabs > input:nth-of-type(2):checked ~ .g2-tablist > label:nth-child(2),
.g2-tabs > input:nth-of-type(3):checked ~ .g2-tablist > label:nth-child(3),
.g2-tabs > input:nth-of-type(4):checked ~ .g2-tablist > label:nth-child(4),
.g2-tabs > input:nth-of-type(5):checked ~ .g2-tablist > label:nth-child(5) {
  color: var(--fg); border-color: rgba(19,233,137,.6); background: rgba(19,233,137,.1); }
.g2-tabs > input:focus-visible ~ .g2-tablist > label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ───── The hub's links to the five comparison pages ───── */
.alt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.alt-card { padding: 26px; display: block; }
.alt-card h3 { font-size: 19px; font-weight: 560; letter-spacing: -0.02em; margin-bottom: 10px; }
.alt-card p { font-size: 14.5px; color: var(--fg-2); margin-bottom: 16px; }
.alt-card .link { font-size: 14px; }
.alt-card:hover h3 { color: var(--mint); }
@media (max-width: 860px) { .alt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .alt-grid { grid-template-columns: minmax(0, 1fr); } }
:root[data-theme="light"] .g2-stars { color: var(--amber); }
:root[data-theme="light"] :is(.g2-head, .g2-foot) .g2-them span { color: color-mix(in srgb, var(--them) 72%, #000); }

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .g2-head .g2-us,
:root[data-theme="light"] .g2-foot .g2-us,
:root[data-theme="light"] /* the column header is gone,
:root[data-theme="light"] so each value says whose it is */
  .g2-val::before,
:root[data-theme="light"] .bk-row.is-on .bk-x { color: var(--mint); }