/* ═══════════════════════════════════════════════════════════════
   Alternatives cluster (DS) — /alternatives (hub) + 17 comparison
   spokes. One stylesheet for both, like the other clusters.
   Replaces the pre-DS alternatives.css (deleted).

   The benchmark on the spokes is the SHARED DS exhibit
   (components/ui/benchmark.html), the same component the home page renders —
   see the `.alt__bm-*` tombstone below. An earlier version of this file
   argued here for a second, static presentation instead; that call was
   reversed, because both surfaces render the same
   `build_benchmark_context()` and the static copy had already lost content.
   docs/DESIGN_SYSTEM.md keeps the record of the wrong call.
   ═══════════════════════════════════════════════════════════════ */

/* The article band. 1200px/32px — the SAME box as `.ds-section`, so this
   cluster sits on the same measure as every other DS marketing page (it was
   1040/20 — a 1000px content column with no reason to be narrower than its
   siblings, and which held the split below to a 59ch prose track where
   theirs is 68ch). Phones keep 20px gutters rather than `.ds-section`'s 32px: at 375px
   that is 335px of content instead of 311px, and the 7-column table's card
   stack needs every one of them. */
.alt {
  width: min(1200px, 100%);
  margin: 0 auto;
  /* 124px, matching the other migrated pages: the DS navbar is fixed and
     there is no body-level offset any more (the legacy 80px was deleted at
     the source in marketing.css, stage 5), so a migrated page carries its
     own clearance from the fixed navbar. */
  padding: 124px 32px clamp(3rem, 5vw, 4.5rem);
}

@media (max-width: 768px) {
  .alt { padding-top: 108px; padding-inline: 20px; }
}

/* ── Editorial split ─────────────────────────────────────────────
   This page uses `.ds-split` (ds.css). Its own `.alt__split` was added and
   removed within this branch and never shipped. The wrappers below are
   composition, not the primitive. */

/* Left rail wrapper — needed only where the rail is more than one element
   (the masthead's overline + h1 pair). A product section's <h2> is a single
   grid child and needs no wrapper. */
.alt__split-head,
.alt__body { min-width: 0; }

/* In a split, the heading owns no bottom gutter — the grid gap is the gutter,
   and a margin here only pushes the two columns' first lines out of step. */
.ds-split > .alt__h2 { margin-bottom: 0; }

/* The body column's first block starts on the heading's own row. */
.alt__split-head > :first-child,
.alt__body > :first-child { margin-top: 0; }

/* 1080px, matching `.ds-split`'s own collapse in ds.css — NOT the 860px the
   page-local `.alt__split` used before the promotion. Left at 860 this
   opened a 220px dead band (861-1080) where the split was already stacked
   but the body's first block had only the grid gap, no breathing room. Same
   class of bug as the `.ds-mcp__copy` height that got left behind: a
   companion rule keyed to a breakpoint that moved. If `.ds-split`'s collapse
   point changes, this follows it. */
/* Scoped to `.ds-split`: `.alt__body` is ALSO the product sections' wrapper,
   which is deliberately not a split, so an unscoped rule gave those six
   sections an extra 12px under their h2 below 1080 for no reason. */
@media (max-width: 1080px) {
  .ds-split > .alt__body > :first-child { margin-top: 12px; }
}

/* ── Header ─────────────────────────────────────────────────────── */

.alt__header {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.alt__h1 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 10px 0 0;
}

.alt__intro {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.68;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  margin: 16px 0 0;
  /* Inert inside the split's 662px body track (72ch is 749px here); it is the
     measure once `.ds-split` collapses at 1080px, where the body column
     becomes the full content width. Before the split existed, the cap lived
     on `.alt__header` as 68ch — which is what left ~300px of dead space to
     the masthead's right at every desktop width. */
  max-width: 72ch;
}

/* ── Sections ───────────────────────────────────────────────────── */

.alt__section {
  padding-top: clamp(2rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--border);
  scroll-margin-top: 6rem;
}

.alt__h2 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0 0 14px;
}

.alt__p {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.72;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  margin: 0 0 12px;
  /* The measure is back. It was removed on the reasoning that the split's
     grid track bounds it — true while the product sections WERE splits, and
     false the moment the same change un-split them. Between those two edits
     `.alt__p` ran the full 1136px band: ~145 characters a line, on six
     sections of all 17 spokes, at every width above ~810px. Widening the
     description was the point; removing every bound was not. */
  max-width: 90ch;
}

.alt__p strong { color: var(--foreground); font-weight: 600; }

.alt__example {
  border-left: 2px solid var(--border);
  padding-left: 14px;
  color: var(--muted-foreground);
}

/* ── Comparison table ───────────────────────────────────────────
   Rendered by the DS table() macro; `.alt__table` is its wrapper and
   `.alt__table-el` the <table> (a table-only property set on the wrapper is
   silently inert — the pricing table shipped that way once). */

.alt__table .table th,
.alt__table .table td {
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  vertical-align: top;
  white-space: normal;
}

.alt__table .table td { color: var(--body-foreground); }

/* The row header is the product name — ink, and never broken mid-name. */
.alt__table .table tbody th[scope="row"] {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground);
  text-transform: none;
  letter-spacing: -0.01em;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* Our own row, marked so the reader can find it in a 7-column grid. */
.alt__table .table tbody tr.alt__row-own { background: var(--muted); }
.alt__table .table tbody tr.alt__row-own th[scope="row"] { background: var(--muted); }

.alt__try {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.alt__try:hover { text-decoration: underline; text-underline-offset: 2px; }

.alt__table-note {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin: 10px 0 0;
}

/* Phones: SEVEN columns cannot fit 375px, and per hard rule 6 an
   inner-scrolling wrapper is not enough for a table visible at load —
   mobile Chrome counts its full box into the root scroll area and pans the
   whole page. Each row becomes a stacked card, with the column name coming
   from the cell's data-label.

   Overriding `display` off the table parts drops the implicit table roles in
   every engine, so table() is called with stack_roles to state them
   explicitly; the <thead> stays visually hidden rather than removed so the
   columnheader-to-cell association survives. */
@media (max-width: 720px) {
  .alt__table-el { display: block; min-width: 0; }

  .alt__table .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .alt__table .table tbody,
  .alt__table .table tbody tr,
  .alt__table .table tbody th,
  .alt__table .table tbody td { display: block; }

  .alt__table .table tbody tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .alt__table .table tbody tr:last-child { border-bottom: 0; }

  .alt__table .table tbody th[scope="row"] {
    padding: 0 0 8px;
    border: 0;
    font-size: 15px;
    white-space: normal;
  }

  .alt__table .table tbody td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
    border: 0;
    font-size: 12.5px;
  }

  .alt__table .table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--muted-foreground);
  }
}

/* ── Benchmark ───────────────────────────────────────────────────
   The `.alt__bm-*` block is GONE. It was a second, static presentation of
   the same `build_benchmark_context()` the home page renders, and it had
   already drifted from it — this copy had lost the unique-finds headline and
   the per-platform "what each one found" evidence entirely. The spoke now
   renders components/ui/benchmark.html, styled by `.ds-bm__*` in ds.css.
   One dataset, one component, one design language. */

/* ── Hub card grid ──────────────────────────────────────────────── */

.alt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .alt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.alt__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 24px 26px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.alt__card:hover {
  border-color: var(--foreground);
  box-shadow: var(--shadow-card);
}

.alt__card-title {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0;
}

.alt__card-blurb {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin: 9px 0 0;
}

/* Span, not a nested <a> — the card IS the anchor, and a link inside a link
   makes the parser close the outer one early and throw the footer outside
   the card (the trap the datasets hub walked into). */
.alt__card-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--accent);
}
.alt__card-more svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.alt__card:hover .alt__card-more svg { transform: translateX(2px); }

/* ── FAQ ──
   `.alt__faq*` is GONE. The three clusters had three drifting accordions
   (different question size, padding, answer size and measure). The
   `max-width: 900px` that surfaced the drift was on `.dd__faqs` only, in
   data-delivery-ds.css — NOT on this one; an earlier version of this comment
   copied that sentence across all three files and so blamed the wrong file.
   One component now: `.ds-accordion` in ds.css,
   consumed via components/ui/accordion.html. */

/* ── Related links ──────────────────────────────────────────────── */

.alt__related {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .alt__related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Closing band ───────────────────────────────────────────────
   A WHITE band with the section header + a full CTA row, which is the home
   page's closing pattern — not the ink band the data-delivery and datasets
   clusters use. The ink band is built for exactly ONE white pill: on ink,
   `ds-btn--ghost` paints `--body-foreground` (dark grey) and a second
   `--secondary` competes with the first. These pages carry two CTAs on the
   hub and three on a spoke, so the band that can hold them is the right
   one. */

.alt__closing {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--border);
  text-align: center;
}

.alt__closing-title {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin: 10px 0 0;
}

.alt__closing-sub {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--body-foreground);
  margin: 13px auto 0;
  max-width: 60ch;
}

/* ── Phone type floor (hard rule 6) ─────────────────────────────
   Keyed at 768px to match ds.css: this file loads AFTER it, so a floor
   keyed at 640 here would win at equal specificity and reopen the
   641–768 band. The layout breakpoints above stay where they are. */

@media (max-width: 768px) {
  .alt__table-note,
  .alt__card-blurb,
  .alt__card-more,
  .alt__try { font-size: 12px; }
}

/* ── 44px tap targets for this page's OWN controls ───────────────────────
   ds.css's `any-pointer: coarse` block is keyed entirely on `.ds-*`
   selectors, so a page-local control matches nothing in it. `.alt__try` is
   the per-row "Try now →" in the comparison table — a real target, 18px
   tall, one per product row. Same pointer key and reasoning as ds.css;
   read the long comment there before changing the query. */
@media (any-pointer: coarse) {
  .alt__try { display: inline-flex; align-items: center; min-height: 44px; }
}