@font-face {
  font-family: 'Redacted';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/Redacted/Redacted-Regular.woff2') format('woff2');
}

/**
 * Shared skeleton tokens for the landing page blocks.
 *
 * Every block concatenates this with its own `style.css` into
 * `makeElement({ style })` — via `./skeleton.ts`, which also prepends the
 * Redacted @font-face — so a block carries everything `[skeleton]` needs and
 * nothing has to be linked globally for the mode to work.
 *
 * The values are the wireframe's grey ramp expressed against `--text` /
 * `--background` rather than the flat hexes it was drawn with, so a skeleton
 * follows the site into dark mode instead of staying a light-mode artifact.
 */
:root {
  /* Redacted has no italic or bold cut — the fallback keeps metrics sane if the
     woff2 is missing, in which case a skeleton degrades to plain grey text. */
  --landing-skeleton-font: 'Redacted', var(--font-primary, sans-serif);

  --landing-skeleton-heading: color-mix(in srgb, var(--background), var(--text) 70%);
  --landing-skeleton-copy: color-mix(in srgb, var(--background), var(--text) 30%);
  --landing-skeleton-kicker: color-mix(in srgb, var(--background), var(--text) 24%);
  --landing-skeleton-media: color-mix(in srgb, var(--background), var(--text) 38%);
  --landing-skeleton-rule: color-mix(in srgb, var(--background), var(--text) 12%);
  --landing-skeleton-surface: color-mix(in srgb, var(--background), var(--text) 2%);
}

/**
 * The design's comparison: a bordered frame, mono type throughout, and the last
 * column — yours — filled and inked while the alternatives stay muted. There is
 * no rounding and no zebra; the hairlines do all the separating.
 *
 * The last column is the highlighted one by convention rather than by attribute:
 * a comparison table is written alternatives-first, and the column you are
 * arguing for is the one you end on.
 */
landing-comparison-table {
  --comparison-columns: 3;
  --comparison-muted: color-mix(in srgb, var(--background), var(--text) 65%);
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: clamp(28px, 4vh, 44px) 28px 0;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  landing-comparison-table {
    padding: 24px 20px 0;
  }
}

/* The frame scrolls, not the page: eight rows of four columns will not fit a
   phone, and a table that widens the document takes every section with it. */
landing-comparison-table [frame] {
  width: 100%;
  max-width: var(--max-page-width, 1400px);
  border: 1px solid var(--light);
  overflow-x: auto;
}

landing-comparison-table [comparison] {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-mono);
}

/* The visible title is the corner cell — see `logic.ts`. This is the one a
   screen reader reads, so it stays in the document and out of the picture. */
landing-comparison-table [caption] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

landing-comparison-table thead th {
  padding: 14px 16px;
  text-align: left;
  vertical-align: bottom;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2);
}

landing-comparison-table thead th:last-child {
  background: var(--light0);
  color: var(--text);
}

landing-comparison-table tbody th,
landing-comparison-table tbody td {
  border-top: 1px solid var(--light);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--comparison-muted);
}

/* The row's own subject, and the last column's answer to it, are the two things
   in the table set in the page's ink. Everything else is what you would be
   doing instead. */
landing-comparison-table [label] {
  color: var(--text);
}

landing-comparison-table tbody td:last-child {
  background: var(--light0);
  color: var(--text);
}

/* Boolean cells, for pages that use them: a filled or hollow square in the same
   family as the ticker's bullet, with the word beside it for screen readers. */
landing-comparison-table [mark] {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--comparison-muted);
  background: transparent;
}

landing-comparison-table [mark][on] {
  background: var(--text);
  border-color: var(--text);
}

landing-comparison-table [said] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

landing-comparison-table :is([caption], thead th, [label]):empty {
  display: revert;
}

/* ---------------- SKELETON ---------------- */

landing-comparison-table[skeleton],
landing-comparison-table[skeleton] * {
  font-family: var(--landing-skeleton-font);
  font-weight: 400;
  letter-spacing: normal;
}

landing-comparison-table[skeleton] {
  background: var(--landing-skeleton-surface);
  pointer-events: none;
  user-select: none;
}

landing-comparison-table[skeleton] :is([caption], thead th, [label]):empty {
  display: revert;
}

landing-comparison-table[skeleton] thead th {
  color: var(--landing-skeleton-heading);
}

/* The highlighted column is an argument, and a wireframe is not making one. */
landing-comparison-table[skeleton] :is(thead th, tbody td):last-child {
  background: transparent;
  color: var(--landing-skeleton-copy);
}

landing-comparison-table[skeleton] [caption] {
  color: var(--landing-skeleton-heading);
}

landing-comparison-table[skeleton] [caption]:empty::before {
  content: 'How the plans compare';
}

landing-comparison-table[skeleton] [label] {
  color: var(--landing-skeleton-copy);
}

/* A cell holding a written value ("2 weeks") rather than a tick redacts to the
   same tone as the row labels. Left on `--text` it draws near-black, and the
   one row that happens to use words dominates a table of grey. */
landing-comparison-table[skeleton] tbody td {
  color: var(--landing-skeleton-copy);
}

landing-comparison-table[skeleton] [mark] {
  background: var(--landing-skeleton-rule);
}

landing-comparison-table[skeleton] [mark][on] {
  background: var(--landing-skeleton-heading);
}

landing-comparison-table[skeleton] thead th:nth-child(3n + 2):empty::before {
  content: 'Standard';
}

landing-comparison-table[skeleton] thead th:nth-child(3n + 3):empty::before {
  content: 'Plus';
}

landing-comparison-table[skeleton] thead th:nth-child(3n + 4):empty::before {
  content: 'Trade';
}

landing-comparison-table[skeleton] tr:nth-child(3n + 1) [label]:empty::before {
  content: 'What this row compares';
}

landing-comparison-table[skeleton] tr:nth-child(3n + 2) [label]:empty::before {
  content: 'A shorter row';
}

landing-comparison-table[skeleton] tr:nth-child(3n + 3) [label]:empty::before {
  content: 'A row with a longer label on it';
}