/* /alternatives/* only — a thin layer over the shared styles.css and docs.css.
 *
 * A separate file because the three pages (hub, [slug], sidebar) would otherwise each
 * carry the same rules in their own Svelte scoped style, where fixing one leaves the
 * others silently out of step.
 *
 * No new design here: the values are the ones docs.css and why.css already use. */

/* ============ body width ============
 *
 * Two widths that SHARE A LEFT EDGE and differ only on the right. Centring each with
 * margin auto instead would stagger the left edges of the narrow and wide elements
 * into a visible step. So one wrapper (.alt-body) holds the wide band and only the
 * prose narrows inside it.
 *
 *   --alt-wide     the band tables, cards and headings use — the one that fills.
 *   --alt-measure  the width prose uses; a longer line stops being readable.
 *
 * In rem, not ch: .docs-lead is 19px and body text is 16px, so the same ch value
 * resolves to two different widths and the line ends stop agreeing. */
:root {
  --alt-wide: 52rem;
  /* Same as the band above: aligned line ends beat a shorter measure here. */
  --alt-measure: var(--alt-wide);
}

.docs-main > .alt-body {
  max-width: var(--alt-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Prose uses the same width as the tables.
 *
 * It was narrower for a while (the two-band layout Anthropic's docs use), but then
 * the text stops short of the table and the right edges disagree. The reviewer raised
 * that twice, so matching the line ends wins: widen the prose rather than narrow
 * the tables.
 *
 * The cost is line length, about 120 characters at 992px and 16px, against the
 * 62-74 the rest of the site uses. If that reads badly the knob to turn is
 * --alt-wide, not --alt-measure: they are the same value, so one change keeps
 * everything aligned. */
.alt-body > p,
.alt-body > ul.docs-bullets,
.alt-body > ul.alt-notes,
.alt-body > dl.docs-fields {
  max-width: var(--alt-measure);
}

/* A bullet's text starts on the paragraph line too: drop the indent and hang the
   marker outside to the left. */
.alt-body > ul.docs-bullets li,
.alt-body > ul.alt-notes li {
  padding-left: 0;
}
.alt-body > ul.docs-bullets li::before {
  left: -18px;
}
.alt-body > ul.alt-notes li::before {
  left: -15px;
}

/* Cards have to fill the wide band. In a single row, a 992px band holds cells with
   one line of text in them and reads emptier than before. docs.css's hairline grid
   (gap:1px over a background colour) works unchanged at two columns. */
.alt-body > ul.docs-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The grid equalises cell heights across a row (align-items: stretch) but the <a>
   inside a cell only grows to its content, and the leftover shows the grid's
   background, the border colour that draws the hairlines, as a grey band. Invisible
   at one column because a row held a single cell; it appeared the moment this went
   to two. Make the li a flex container so the <a> fills the cell. */
.alt-body > ul.docs-cards li {
  display: flex;
}
.alt-body > ul.docs-cards li > a {
  flex: 1;
}
/* An odd count leaves one empty cell on the last row, and the grid background shows
   through it as a grey block. The hub has six so it never shows there, but the
   "other options" list on each page has five. Span the last card across both columns
   so there is no empty cell to show. */
.alt-body > ul.docs-cards li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* .docs-kicker is inline-flex in docs.css. Block here, so it starts on the same
   line head as everything around it. */
/* docs.css caps the h1 at 22ch so it wraps into a balanced block. That is the
   look we want for the title, but the cap also has to give way on narrow screens
   (handled below), and it must never exceed the band. */
.alt-body > h1 {
  max-width: min(22ch, 100%);
}

/* Prose shares the band with the tables, so the band itself decides the measure.
   At 62rem that ran to about 120 characters against the 62-74 the rest of the site
   uses, which is what "the lines are too long" meant. Two levers, applied together:
   the band came down to 52rem, and the type goes up a step. Larger type drops the
   character count faster than narrowing does, and it costs no width, so the page
   still fills. 832px at 17px lands near 92. Leading follows the measure up. */
.alt-body > p,
.alt-body > ul.docs-bullets li,
.alt-body > ul.alt-notes li,
.alt-body > dl.docs-fields dd p {
  font-size: 17px;
  line-height: 1.75;
}
.alt-body > ul.alt-notes li {
  font-size: 13.5px;
  line-height: 1.7;
}

.alt-body > .docs-kicker {
  display: flex;
  justify-content: flex-start;
}

/* ============ the date line under the title ============
 * These pages describe someone else's product, so what they are current AS OF has to
 * be visible. */
.docs-main .a-dateline {
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
/* A date is one unit — "August 27, 2026" must not break into "August 27," /
   "2026.". */
.docs-main .a-dateline time {
  white-space: nowrap;
}

/* ============ subheadings inside a section ============
 * .docs-cat is h2-sized; used as-is on an h3 the section boundary disappears. One
 * step down. */
.docs-main h3.a-sub {
  font-size: 21px;
  margin-top: 34px;
  padding-top: 20px;
}

/* ============ FAQ questions ============
 * .docs-fields dt is monospace because it normally holds a code name. What goes here
 * is a sentence someone types into a search box, so it returns to the body face. */
.docs-main .a-q {
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* ============ the "pick this when" line inside a card ============ */
.docs-cards .pick {
  margin-top: 6px;
  color: var(--muted);
}
.docs-cards .pick b {
  color: var(--text-2);
  font-weight: 600;
}

/* ============ links that leave this group ============
 * Only the sidebar's Elsewhere links go back into the main site, and nothing shows
 * that until you click. The arrow marks it. It does not open a new tab, so it means
 * "this leaves here", not "new window". Adding icons is against the site's register,
 * so it stays small and low-contrast. */
.docs-side ul.side-out li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.docs-side ul.side-out .out {
  width: 11px;
  height: 11px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.34;
  transition: opacity 0.14s;
}
.docs-side ul.side-out li a:hover .out {
  opacity: 0.8;
}

/* The active mark for list items (.docs-side li a.on) is already in docs.css. Only
   the single-line link above it was missing one. */
.docs-side .docs-side-top.on {
  color: var(--accent-strong);
  font-weight: 500;
}


/* ============ collapsing the left panel ============
 * Collapsed by default. People arrive at these pages from search, and what a first
 * visitor needs is the body width, not a table of contents. The open state is for
 * moving between sibling pages.
 *
 * A checkbox rather than Svelte state, so a browser with JS off and a crawler both
 * get the same page (the same call the site Nav makes with <details>). The sidebar
 * stays in the DOM while collapsed, so its links remain reachable. */
.alt-nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Collapsed (the default): drop the sidebar column and let the body take the width.
 *
 * Two conditions, because the owner of the state depends on JS. With it, that owner is
 * <html data-alt-nav>, which is what survives a new tab, a refresh, or an arrival from
 * search. Without it, the checkbox drives the CSS on its own. :is() rather than
 * :where() because :where() has zero specificity and loses to docs.css's
 * .docs-shell. */
:is(
  html:not(.alt-js) .alt-nav-check:not(:checked) ~ .docs-shell,
  html.alt-js:not([data-alt-nav='open']) .docs-shell
) {
  grid-template-columns: minmax(0, 1fr);
}
:is(
  html:not(.alt-js) .alt-nav-check:not(:checked) ~ .docs-shell,
  html.alt-js:not([data-alt-nav='open']) .docs-shell
) .docs-side {
  display: none;
}

/* The open button: icon only, no label.
 *
 * Placement carries the weight. Sitting sticky on the body's first line, it covers the
 * first cell of any table that scrolls under it. Instead there is a LANE to the left of
 * the body that exists only for this button, so it never passes over the content.
 *
 * The lane is made with padding and the button is pulled into it by a negative margin
 * of the same size. Not outside the shell: at min(1280px, 94vw) the edge margin is
 * only 38px, and the button clips there.
 *
 * NOTE the selector is raised to `.docs-shell .docs-main > .alt-nav-btn`. The centring
 * rule above is 0,2,1; at 0,1,0 this rule loses margin-left to that auto and the
 * button is pulled out of its lane into the centre. */
.docs-shell .docs-main > .alt-nav-btn {
  position: sticky;
  /* The site nav is sticky at top:0 and is 70px tall until it shrinks to 56px on
     scroll, so its bottom border sits at 71px while the page is at rest. Matching
     the sidebar's 74px left only 3px of air and the button read as stuck to the
     line. 79px gives it 8px at rest and 22px once the nav shrinks. */
  top: 79px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  /* The body is centred, so the button belongs beside its left edge. At the far left it
     sits too far from the content and reads as floating on its own.
     50% = half the body box, less half the content width and a 52px gap.
     A negative bottom margin keeps it from taking vertical space, so the breadcrumb
     arrives at its own height. */
  margin: 0 0 -34px calc(50% - (var(--alt-wide) / 2) - 90px);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  background: var(--bg);
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.alt-nav-btn:hover {
  border-color: var(--border-2);
  color: var(--text);
  background: var(--surface);
}
.alt-nav-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.75;
}
/* Collapsed: the body box takes the full width and the content centres inside it. The
   button reaches the content through the calc below rather than the padding lane. */
:is(
  html:not(.alt-js) .alt-nav-check:not(:checked) ~ .docs-shell,
  html.alt-js:not([data-alt-nav='open']) .docs-shell
) .docs-main {
  padding-left: 0;
}
/* Open: remove the floating button. An open button next to a visible sidebar is
   redundant; closing is the side-close control in the sidebar header. */
:is(
  html:not(.alt-js) .alt-nav-check:checked ~ .docs-shell,
  html.alt-js[data-alt-nav='open'] .docs-shell
) .alt-nav-btn {
  display: none;
}

/* sidebar header: title and close control on one line */
.docs-side .side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.docs-side .side-head .docs-side-home {
  margin: 0;
}
.docs-side .side-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  margin-right: -4px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
.docs-side .side-close:hover {
  color: var(--text);
  background: #00000008;
}
.docs-side .side-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.docs-side .side-close span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The label is hidden visually only — a screen reader still needs to know whether
   this opens or closes. */
.alt-nav-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* the screen-reader label follows the state too */
:is(
  html:not(.alt-js) .alt-nav-check:not(:checked) ~ .docs-shell,
  html.alt-js:not([data-alt-nav='open']) .docs-shell
) .alt-nav-btn .open,
:is(
  html:not(.alt-js) .alt-nav-check:checked ~ .docs-shell,
  html.alt-js[data-alt-nav='open'] .docs-shell
) .alt-nav-btn .closed {
  display: none;
}
/* the button has to show focus when the checkbox takes it from the keyboard */
.alt-nav-check:focus-visible ~ .docs-shell .alt-nav-btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============ side-by-side table ============
 * A comparison grid, not prose set in columns. Ruled on both axes and boxed, the way
 * the model tables in Claude's and OpenAI's documentation are. With horizontal rules
 * only, the eye runs down one column and never crosses to the other — and crossing is
 * the one thing this table exists for.
 *
 * .p-table's first cell is monospace + nowrap because it normally holds a code name.
 * Here it holds a sentence ("Correcting a stored fact"), so that rule is undone. */
.alt-matrix {
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
}
/* The corner cells are rounded themselves rather than clipped by overflow on the
   table: overflow on a display:table box is honoured unevenly, and the tinted header
   row and label column would square off the corners wherever it is not. */
.alt-matrix thead th:first-child {
  border-top-left-radius: 9px;
}
.alt-matrix thead th:last-child {
  border-top-right-radius: 9px;
}
.alt-matrix tbody tr:last-child td:first-child {
  border-bottom-left-radius: 9px;
}
.alt-matrix tbody tr:last-child td:last-child {
  border-bottom-right-radius: 9px;
}
/* .docs-main strips the outer padding off .p-table so a plain table lines up with the
   body text. A boxed table needs that padding back on both edges. */
.docs-main .alt-matrix th:first-child,
.docs-main .alt-matrix td:first-child {
  padding-left: 16px;
}
.docs-main .alt-matrix th:last-child,
.docs-main .alt-matrix td:last-child {
  padding-right: 16px;
}
.docs-main .alt-matrix tbody tr:last-child td {
  border-bottom: 0;
}
/* the column rules — what makes it read as a table */
.alt-matrix th + th,
.alt-matrix td + td {
  border-left: 1px solid var(--border);
}
.alt-matrix td:first-child {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: normal;
  width: 23%;
  color: var(--text-2);
}
.alt-matrix th:nth-child(2),
.alt-matrix td:nth-child(2),
.alt-matrix th:last-child,
.alt-matrix td:last-child {
  width: 38.5%;
}
/* Our column is not tinted. At the same weight as theirs, the rows where they win
   (licence, self-hosting) still read plainly — and those rows are what make the rest
   of the table believable. */
.alt-matrix thead th {
  color: var(--text-2);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-2);
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Thirteen rows three columns wide: without a row tint the eye loses the line it is
   on somewhere around the middle column.
 *
 * The tint is the accent, not another cream. Every fill in this table was a beige a
 * few units from the last one, so a hovered row was indistinguishable from a band —
 * it read as the table having grown a heading under the cursor. Furniture is cream,
 * the cursor is blue: nothing to tell apart. */
.alt-matrix tbody tr:hover td {
  background: var(--accent-soft);
}
/* ============ group bands ============
 * The two halves of the table answer different questions. A single rule between them
 * left the reader to work that out, so the bands say it. */
.alt-matrix tr.band td,
.alt-matrix tbody tr.band:hover td {
  /* a border colour used as a fill: the bands cut the table in two and have to be the
     heaviest rule on it, which --bg-2 was not once it sat next to a tinted column */
  background: var(--border);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding-top: 7px;
  padding-bottom: 7px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: normal;
  width: auto;
}
.alt-matrix tbody tr.band:first-child td {
  border-top: 0;
}


/* ============ number cells in the combined table ============
 * Design properties and published numbers share one table, so the value styling has to
 * live on that table. One figure set large with its qualifier small underneath — the
 * same call as the benchmark cells on /docs/models. */
.alt-matrix .v {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.01em;
}
/* A cell with no number ("Not published", "Not run") set at the size of a real one
   draws the eye before the values do. Body size, and the colour pulled back. */
.alt-matrix .v.na {
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0;
}
.alt-matrix .sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}


/* ============ footnotes under a table ============
 * A list, not paragraphs. As paragraphs they read as another piece of writing rather
 * than as part of the table, and the table stops leading the page. */
.docs-main ul.alt-notes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.docs-main ul.alt-notes li {
  position: relative;
  padding-left: 15px;
  margin: 0 0 5px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.docs-main ul.alt-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--border-2);
}
.docs-main ul.alt-notes li b {
  color: var(--text-2);
  font-weight: 600;
}
.docs-main ul.alt-notes.foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}


/* ============ row height ============
 * Same vertical padding on design rows and number rows. The number rows are two lines
 * tall and will be taller regardless; differing padding on top of that makes the whole
 * table look uneven. */
.alt-matrix td {
  padding-top: 11px;
  padding-bottom: 11px;
  vertical-align: top;
}
.alt-matrix .sub:empty {
  display: none;
}

/* ============ why people look at alternatives ============
 * Heading-and-sentence pairs, which is exactly a table's shape — one with no head. */
.alt-why td:first-child {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: normal;
  width: 30%;
  color: var(--text);
}
.alt-why td:last-child {
  font-size: 13.5px;
}


/* ============================================================
 * narrow screens
 *
 * NOTE these pages (/alternatives/*) are the only responsive ones. The rest of the
 * site pins its viewport to width=1280 and stays that way. It is relaxed here because
 * this is where people arrive from search and Google indexes mobile-first. This file
 * loads on these seven pages only, so nothing below reaches another page.
 * ============================================================ */

/* The floating button needs a lane to the left of the band, and below about
   1240px there is not one: the shell is min(1280px, 94vw), so the outer gutter
   shrinks faster than the band does and the button ends up clipped by the viewport
   edge. Measured, the old 52px offset was already off-screen under ~1150px. Put it
   back in the flow before that happens rather than let it hang off the side. */
@media (max-width: 1240px) {
  .docs-shell .docs-main > .alt-nav-btn {
    position: static;
    margin: 0 0 14px;
  }
}

@media (max-width: 900px) {
  .docs-main > .alt-body {
    max-width: 100%;
  }
  /* On a narrow screen there is no reason to constrain prose — the screen already
   does it. */
  .alt-body > p,
  .alt-body > ul.docs-bullets,
  .alt-body > ul.alt-notes,
  .alt-body > dl.docs-fields {
    max-width: 100%;
  }
  .docs-shell {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 760px) {
  /* The table does not scroll sideways. Pushing a three-column comparison across on a
     phone means never seeing two columns at once, which is the comparison itself.
     Each row stacks vertically and each cell takes the label held in data-col. */
  .alt-body table.p-table,
  .alt-body table.p-table tbody,
  .alt-body table.p-table tr,
  .alt-body table.p-table td {
    display: block;
    width: auto;
  }
  .alt-body table.p-table thead {
    display: none;
  }
  .alt-body table.p-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .alt-body table.p-table tr:last-child {
    border-bottom: 0;
  }
  .alt-body table.p-table td {
    border: 0;
    padding: 0 0 9px;
  }
  .alt-body table.p-table tr td:last-child {
    padding-bottom: 0;
  }
  .alt-body table.p-table td[data-col]::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* the row name is set as that row's heading */
  .alt-matrix td:first-child,
  .alt-why td:first-child {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    padding-bottom: 10px;
  }
  /* Stacked, the boxed grid's own paddings and tints double up with the row's. The
     label column stops being a column here, so it stops being tinted too. */
  .docs-main .alt-matrix th:first-child,
  .docs-main .alt-matrix td:first-child,
  .docs-main .alt-matrix th:last-child,
  .docs-main .alt-matrix td:last-child {
    padding-left: 0;
    padding-right: 0;
  }
  /* no cursor on a phone, so the hover tint is only ever a flash after a tap */
  .alt-matrix tbody tr:hover td {
    background: transparent;
  }
  /* the band keeps its fill: stacked, it is the only thing separating the two halves */
  .alt-matrix tr.band {
    padding: 0;
    border-bottom: 0;
  }
  .docs-main .alt-matrix tr.band td {
    padding: 7px 16px;
    background: var(--border);
  }
  .alt-fit td {
    padding: 0 0 14px;
  }

  /* The footer is built for 1280 and its five columns overflow here. It wraps on these
     pages only; the footer everywhere else is untouched. */
  footer .foot-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
  footer .foot {
    display: block;
  }

  .docs-main h1 {
    max-width: 100%;
    font-size: clamp(26px, 7vw, 34px);
  }
  .alt-body > .docs-cat {
    font-size: 22px;
  }
  .alt-body > ul.docs-cards {
    grid-template-columns: 1fr;
  }
}


/* ============ what WOS does (the strengths band) ============
 * Sixteen strengths as one flat column of rows ran past a screen and a half, and a
 * list that long gets skimmed instead of read. Two to a row inside four named bands:
 * roughly half the height, and the bands give someone scanning a way in.
 *
 * Not a table any more. There was no second column to compare against — it was a list
 * wearing a table's clothes, next to a real comparison table that now looks like one. */
.alt-caps {
  margin: 22px 0 0;
}
/* The one entry nobody else has copied, set above the bands and across both columns. */
.docs-main .alt-caps .cap-lead {
  margin: 0 0 4px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  max-width: none;
}
.alt-caps .cap-lead b {
  color: var(--accent-strong);
  font-weight: 600;
}
.alt-caps .cap-lead b::after {
  content: " · ";
  color: var(--border-2);
  font-weight: 400;
}
.docs-main .alt-caps .cap-band {
  margin: 22px 0 0;
  padding: 0 0 7px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border-2);
}
.docs-main ul.cap-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* the gap is the rule: a hairline between the two columns and under each pair */
  gap: 1px;
  background: var(--border);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.docs-main ul.cap-grid li {
  margin: 0;
  padding: 11px 14px 12px;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
/* An odd item would leave a hole in the grid that the gap colour shows through. */
.docs-main ul.cap-grid li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.docs-main ul.cap-grid li b {
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 760px) {
  .docs-main ul.cap-grid {
    grid-template-columns: 1fr;
  }
  .docs-main ul.cap-grid li:last-child:nth-child(odd) {
    grid-column: auto;
  }
}


/* ============ where they are the better answer ============
 * Their strengths, listed plainly. Our side follows on the same line only where there
 * is one, set quieter: it is context, not a rebuttal. The counterweight for this whole
 * section is the paired footnote under it, which is where the strengths of equal size
 * live. Arguing back on every row would say them twice and read as defensiveness. */
.docs-main ul.alt-fit-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.docs-main ul.alt-fit-list li {
  margin: 0;
  padding: 11px 0;
  font-size: 13.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.docs-main ul.alt-fit-list li b {
  font-weight: 600;
  color: var(--text);
}
/* the separator is drawn rather than typed, so it never lands at a line break */
.docs-main ul.alt-fit-list li span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin: 0 8px 4px;
  background: var(--border-2);
}
.docs-main ul.alt-fit-list li span {
  color: var(--muted);
}


/* ============ the first screen ============
 * Someone arriving from "mem0 alternatives" decides in about eight seconds, and what
 * was in those eight seconds was the competitor's name twice and no number of ours.
 * The comparisons the reader would otherwise have to work out by dividing (7x the
 * context, 8x the latency) are stated here, above the table, before anything else.
 *
 * Only the axes we lead on, and the line under it says so. The complete picture is
 * the table directly below, which is what makes this legitimate rather than a pitch. */
.docs-main ul.alt-head {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  margin: 26px 0 0;
  padding: 0;
  overflow: hidden;
}
.docs-main ul.alt-head li {
  margin: 0;
  padding: 16px 16px 15px;
  background: var(--surface);
}
.docs-main ul.alt-head li b {
  display: block;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.docs-main ul.alt-head li .l {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.docs-main ul.alt-head li .s {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}
/* The disclaimer sits with the strip, not with the table, so it is read as part of
   the claim rather than as a footnote nobody reaches. */
.docs-main p.alt-head-note {
  margin-top: 9px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 760px) {
  .docs-main ul.alt-head {
    grid-template-columns: 1fr;
  }
  .docs-main ul.alt-head li b {
    font-size: 26px;
  }
}