/* GDI-Table: the project's .compare tables. Ported from site.css section 11 (Comparison), the v10 and
   v11 tick / cross / emphasis passes, .compare--plain, .compare--wide and the mobile label overrides.
   Differences from the static site, both for screen readers: the first cell of each body row is a
   <th scope="row">, and the caption is always present (visually hidden). Selectors therefore use
   "tr > :first-child" where site.css used "td:first-child". */
.gdi-table.compare {
  border: 1px solid var(--gdi-line); border-radius: var(--gdi-r-card); overflow: hidden; background: var(--gdi-white);
  box-shadow: 0 24px 60px -28px rgba(24,43,61,.3);
}
.gdi-table table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; background: transparent; }
.gdi-table caption { caption-side: top; }
.gdi-table th, .gdi-table td {
  padding: 1.05rem 1.25rem; text-align: left; font-size: .95rem; line-height: 1.6; vertical-align: top;
  border: 0; background: transparent; color: var(--gdi-body); font-weight: 400;
}
.gdi-table thead th {
  font-family: var(--gdi-font-display); font-stretch: 95%; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; font-size: .86rem; color: var(--gdi-ink); background: var(--gdi-grey);
}
.gdi-table tbody tr { border-top: 1px solid var(--gdi-line); }
.gdi-table tbody tr:nth-child(odd) > *, .gdi-table tbody tr:nth-child(even) > * { background-color: transparent; }
.gdi-table.compare--bold-first tbody tr > :first-child { font-weight: 700; color: var(--gdi-ink); }
.gdi-table tbody th a, .gdi-table tbody td a { color: var(--gdi-navy); text-underline-offset: 3px; }

/* The "through us" column: navy header, sky cells, a tick and a blue rule */
.gdi-table thead th:last-child { background: linear-gradient(90deg, var(--gdi-navy), #1f3a52); color: #fff; }
.gdi-table tbody tr > td:last-child { background: var(--gdi-sky); color: var(--gdi-ink); font-weight: 500; border-left: 2px solid var(--gdi-blue); }
.gdi-table tbody tr > td:last-child::before { content: "\2713"; color: var(--gdi-blue); font-weight: 800; margin-right: .5rem; }
/* The "without us" column: a muted cross */
.gdi-table td.no { color: var(--gdi-mute); }
.gdi-table td.no::before { content: "\2715"; color: var(--gdi-mute); font-weight: 700; margin-right: .5rem; opacity: .7; }

/* Plain: options we never rank, so no column wins */
.gdi-table.compare--plain thead th:last-child { background: var(--gdi-grey); color: var(--gdi-ink); }
.gdi-table.compare--plain tbody tr > td:last-child { background: transparent; color: var(--gdi-body); font-weight: 400; border-left: 0; }
.gdi-table.compare--plain tbody tr > td:last-child::before { content: none; }

/* Wide: a link in the first column */
.gdi-table.compare--wide tbody tr > :first-child a { color: var(--gdi-navy); text-decoration: none; }
.gdi-table.compare--wide tbody tr > :first-child a:hover { text-decoration: underline; }

/* ---- Phones: service and wide tables become one card per row, each value labelled ---- */
@media (max-width: 720px) {
  .gdi-table.compare--service, .gdi-table.compare--wide { overflow: visible; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .gdi-table.compare--service table, .gdi-table.compare--service tbody,
  .gdi-table.compare--wide table, .gdi-table.compare--wide tbody { display: block; width: 100%; min-width: 0; }
  .gdi-table.compare--service thead, .gdi-table.compare--wide thead { display: none; }
  .gdi-table.compare--service tbody { display: grid; gap: .9rem; }
  .gdi-table.compare--wide tbody { display: grid; gap: 1rem; }
  .gdi-table.compare--service tbody tr, .gdi-table.compare--wide tbody tr {
    display: grid; overflow: hidden; border: 1px solid var(--gdi-line); border-radius: var(--gdi-r-card); background: var(--gdi-white);
  }
  .gdi-table.compare--service tbody tr > * { display: grid; grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr); gap: .8rem; padding: .9rem 1rem; font-size: .9rem; border: 0; }
  .gdi-table.compare--wide tbody tr > * { display: grid; grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); gap: .8rem; padding: .85rem 1rem; border: 0; font-size: .9rem; }
  .gdi-table.compare--service tbody tr > * + *, .gdi-table.compare--wide tbody tr > * + * { border-top: 1px solid var(--gdi-line); }
  .gdi-table.compare--service tbody tr > :first-child { display: block; padding: .9rem 1rem; background: var(--gdi-navy); color: #fff; }
  .gdi-table.compare--wide tbody tr > :first-child { display: block; padding: .95rem 1rem; background: var(--gdi-navy); color: #fff; }
  .gdi-table.compare--wide tbody tr > :first-child a, .gdi-table.compare--wide tbody tr > :first-child a:hover { color: #fff; }
  /* :nth-child(n) lifts these over the desktop tick, cross and .compare--plain "content: none" rules. */
  .gdi-table.compare--service tbody tr > td:nth-child(n)::before, .gdi-table.compare--wide tbody tr > td:nth-child(n)::before {
    content: attr(data-label); color: var(--gdi-ink); font-weight: 700; margin: 0; opacity: 1;
  }
  .gdi-table.compare--service tbody tr > td:last-child { border-left: 0; background: var(--gdi-sky); }
  .gdi-table.compare--wide:not(.compare--plain) tbody tr > td:last-child { border-left: 0; }
}