/* ==========================================================================
   archivers.ai — v2 product-page additions

   Four things the component canon in css/v2.css does not carry, and which the
   product pages genuinely need: a comparison / matrix table, a definition list
   for standards entries, a light code sample, and a single-rule callout for a
   claim that has to be hedged. Same tokens, same hairlines, no new colours.
   ========================================================================== */

/* ----------------------------------------------------------- 1. tables */
/* Wide tables scroll inside their own box; the page body never does. */
/* The two background layers that travel with the content fade out at the edges;
   the two that stay put show a soft shadow while there is more table to reach. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    linear-gradient(to right, var(--surface) 60%, rgba(255,255,255,0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 60%, rgba(255,255,255,0)) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(20,20,20,.12), rgba(20,20,20,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20,20,20,.12), rgba(20,20,20,0)) right center / 14px 100% no-repeat scroll,
    var(--surface);
}

.v2-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.v2-table th,
.v2-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.v2-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}

.v2-table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 12rem;
}

/* Six columns need more room before they start scrolling. */
.v2-table--wide { min-width: 860px; }

.v2-table td { color: var(--ink-2); }
.v2-table tbody tr:last-child th,
.v2-table tbody tr:last-child td { border-bottom: 0; }

/* The column that is us reads a shade warmer than the ones that are not. */
.v2-table .col-ours { background: var(--gold-tint); }

.table-note {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--ink-3);
  max-width: 44rem;
}

/* Yes / no / partial marks — drawn, never emoji. */
.mark { font-weight: 600; color: var(--ink); }
.mark--yes::before {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  background: no-repeat center/15px 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B8860B' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}
.mark--no,
.mark--part { color: var(--ink-3); font-weight: 400; }
.mark--no::before,
.mark--part::before {
  content: "";
  display: inline-block;
  width: 15px; height: 1.5px;
  margin-right: 8px;
  vertical-align: 4px;
  background: var(--line-strong);
}

/* --------------------------------------------------- 2. spec list */
/* One standard per row: name and version on the left, what we do on the right. */
.spec { border-top: 1px solid var(--line); }
.spec__item {
  display: grid;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.spec__name { margin: 0; }
.spec__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.spec__body {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 40rem;
}

@media (min-width: 760px) {
  .spec__item { grid-template-columns: 14rem minmax(0, 1fr); gap: 36px; }
}

/* --------------------------------------------------- 3. code sample */
/* A grid child defaults to its intrinsic minimum width; a pre block full of
   long lines would push the row wider than the phone. This lets it scroll. */
.feature-row__media { min-width: 0; }

.code {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
  tab-size: 2;
}
.code b { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------- 4. callout */
/* One gold rule. Used where a claim has to be held open, not asserted. */
.callout {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  font-size: 0.9375rem;
  color: var(--ink-3);
  max-width: 42rem;
}
.callout strong { color: var(--ink); font-weight: 600; }

/* A callout that closes a section needs the section's own rhythm above it. */
.feature-rows + .callout { margin-top: clamp(40px, 5vw, 64px); }
.card-grid + .callout { margin-top: clamp(28px, 3.5vw, 44px); }