/* content-tables.css — shared look for content / comparison / data tables on public pages.
 * Markup (emitted by scripts/content-tables.js, which every page generator runs):
 *   <div class="ct-wrap ct-cN"><table class="ct">…</table></div>
 *   cells of the AutoApplyMax column: .ct-us · AutoApplyMax row: tr.ct-us-row
 *   numeric columns: .ct-num · yes/no cells: .ct-y / .ct-n · glyphs: span.ct-ic(.ct-ic-y|.ct-ic-n)
 *   source line under a table: p.ct-src
 * Not used by the pricing plan matrix (plans-table.css) or the compare hero card (compare-hero.css). */

.ct-wrap {
  --ct-line: #e6ebf2;
  --ct-line-soft: #eef2f7;
  --ct-head: #f6f8fb;
  --ct-zebra: #fbfcfe;
  --ct-hover: #f2f7fd;
  --ct-ink: #0f172a;
  --ct-text: #334155;
  --ct-muted: #64748b;
  --ct-blue: #0a66c2;
  --ct-us: #f1f7fe;
  --ct-us-head: #e3eefc;
  --ct-us-line: #c9dcf6;
  position: relative;
  margin: 1.25rem 0 1.5rem;
  border: 1px solid var(--ct-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.ct-wrap:focus-visible { outline: 2px solid var(--ct-blue); outline-offset: 2px; }

.ct-wrap .ct {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  display: table;
  max-width: none;
  overflow: visible;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: .925rem;
  line-height: 1.5;
  color: var(--ct-text);
  text-align: left;
}

/* caption */
.ct-wrap .ct caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px 10px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ct-ink);
  background: #fff;
  border-bottom: 1px solid var(--ct-line-soft);
}

/* cells */
.ct-wrap .ct th,
.ct-wrap .ct td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--ct-line-soft);
  vertical-align: top;
  text-align: left;
  background: transparent;
  color: inherit;
  font-size: inherit;
  min-width: 0;
}
.ct-wrap .ct tbody tr:last-child > * { border-bottom: 0; }
.ct-wrap .ct p { margin: 0; }
.ct-wrap .ct a { color: var(--ct-blue); text-decoration: underline; text-decoration-color: rgba(10, 102, 194, .35); text-underline-offset: 2px; }
.ct-wrap .ct a:hover { text-decoration-color: currentColor; }
.ct-wrap .ct small { display: block; color: var(--ct-muted); font-size: .8em; }

/* header row */
.ct-wrap .ct thead th,
.ct-wrap .ct thead td {
  background: var(--ct-head);
  color: #475569;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.35;
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ct-line);
  vertical-align: bottom;
  white-space: normal;
  text-transform: none;
}

.ct-wrap .ct td.barc { vertical-align: middle; }

/* row labels: first column */
.ct-wrap .ct tbody tr > :first-child { color: var(--ct-ink); font-weight: 600; }
.ct-wrap .ct tbody th { font-weight: 600; color: var(--ct-ink); }

/* zebra + hover */
.ct-wrap .ct tbody tr:nth-child(even) > * { background: var(--ct-zebra); }
.ct-wrap .ct tbody tr:hover > * { background: var(--ct-hover); }

/* numbers and prices */
.ct-wrap .ct .ct-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-wrap .ct thead .ct-num { text-align: right; white-space: normal; }

/* AutoApplyMax column */
.ct-wrap .ct .ct-us { background: var(--ct-us); }
.ct-wrap .ct tbody tr:nth-child(even) > .ct-us { background: #ebf3fd; }
.ct-wrap .ct tbody tr:hover > .ct-us { background: #e4eefc; }
.ct-wrap .ct thead .ct-us {
  background: var(--ct-us-head);
  color: var(--ct-blue);
  box-shadow: inset 0 3px 0 var(--ct-blue);
}
.ct-wrap .ct thead .ct-us::after,
.ct-wrap .ct tr.ct-us-row > :first-child::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--ct-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.3 2.3 5.2-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* AutoApplyMax row */
.ct-wrap .ct tr.ct-us-row > *,
.ct-wrap .ct tbody tr.ct-us-row:nth-child(even) > * { background: var(--ct-us); }
.ct-wrap .ct tbody tr.ct-us-row:hover > * { background: #e4eefc; }
.ct-wrap .ct tr.ct-us-row > :first-child { box-shadow: inset 3px 0 0 var(--ct-blue); color: var(--ct-blue); }
.ct-wrap .ct tr.ct-us-row > :first-child a { color: var(--ct-blue); }

/* yes / no cells and glyphs */
.ct-wrap .ct .ct-y::before,
.ct-wrap .ct .ct-n::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 50%;
  background: #e5f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.2 2.2 5-5' fill='none' stroke='%23168a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ct-wrap .ct .ct-n::before {
  background: #f1f3f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ct-wrap .ct .ct-ic,
/* .check / .cross pills only on inline marks: compare pages also put these classes on the <td> itself */
.ct-wrap .ct :not(td):not(th).check,
.ct-wrap .ct :not(td):not(th).cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  margin-right: 4px;
  border-radius: 9px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: 1px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ct-wrap .ct .ct-ic-y, .ct-wrap .ct :not(td):not(th).check { background: #e5f5ec; color: #168a4a; }
.ct-wrap .ct .ct-ic-n, .ct-wrap .ct :not(td):not(th).cross { background: #fdecec; color: #c2410c; }
.ct-wrap .ct .ct-dash { color: #94a3b8; font-weight: 600; }

/* source / small-print line under a table */
p.ct-src.ct-src {
  margin: -.75rem 0 1.5rem;
  padding: 0 2px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ct-muted, #64748b);
  background: none;
  border: 0;
}
p.ct-src.ct-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* wide tables (5+ columns) on desktop */
.ct-wrap.ct-c5 .ct th, .ct-wrap.ct-c5 .ct td,
.ct-wrap.ct-c6 .ct th, .ct-wrap.ct-c6 .ct td { padding-left: 12px; padding-right: 12px; }
.ct-wrap.ct-c6 .ct { font-size: .875rem; }

/* phones: wide tables scroll inside the card with a sticky first column */
@media (max-width: 640px) {
  .ct-wrap { border-radius: 12px; margin: 1rem 0 1.25rem; }
  .ct-wrap .ct { font-size: .86rem; }
  .ct-wrap .ct th, .ct-wrap .ct td { padding: 10px 12px; }
  .ct-wrap .ct thead th, .ct-wrap .ct thead td { font-size: .74rem; }
  .ct-wrap .ct .ct-num { white-space: normal; }
  .ct-wrap.ct-c4:not(.ct-scroll) .ct th, .ct-wrap.ct-c4:not(.ct-scroll) .ct td,
  .ct-wrap.ct-c5:not(.ct-scroll) .ct th, .ct-wrap.ct-c5:not(.ct-scroll) .ct td { padding-left: 8px; padding-right: 8px; }
  .ct-wrap.ct-scroll .ct { width: max-content; min-width: 100%; }
  .ct-wrap.ct-scroll .ct th, .ct-wrap.ct-scroll .ct td { min-width: 140px; max-width: 176px; }
  .ct-wrap.ct-scroll .ct .ct-num { min-width: 96px; }
  .ct-wrap.ct-scroll .ct tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 124px;
    min-width: 124px;
    max-width: 124px;
    background: #fff;
    box-shadow: 1px 0 0 var(--ct-line);
  }
  .ct-wrap.ct-scroll .ct thead tr > :first-child { background: var(--ct-head); }
  .ct-wrap.ct-scroll .ct tbody tr:nth-child(even) > :first-child { background: var(--ct-zebra); }
  .ct-wrap.ct-scroll .ct tbody tr[style*="--ct-row"] > :first-child { background: var(--ct-row); }
  .ct-wrap.ct-scroll .ct tr.ct-us-row > :first-child { background: var(--ct-us); box-shadow: inset 3px 0 0 var(--ct-blue), 1px 0 0 var(--ct-line); }
  /* scroll hint: the right edge fades while more columns are hidden */
  .ct-wrap.ct-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, .25));
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, .25));
  }
  @supports (animation-timeline: scroll()) {
    .ct-wrap.ct-scroll { animation: ct-fade-end linear both; animation-timeline: scroll(self inline); }
    @keyframes ct-fade-end { 0%, 92% { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, .25)); } 100% { -webkit-mask-image: none; mask-image: none; } }
  }
  p.ct-src.ct-src { margin-top: -.5rem; font-size: .76rem; }
}

@media print {
  .ct-wrap { box-shadow: none; overflow: visible; }
  .ct-wrap .ct { min-width: 0 !important; }
}

/* row tint carried over from the page (e.g. a "borderline" band in a score table) */
.ct-wrap .ct tbody tr[style*="--ct-row"] > * { background: var(--ct-row); }