/* MergeSafe site styles.
 *
 * One stylesheet for every page. Each page previously carried its own
 * copy inline, which meant the document pages shipped table and hero
 * rules they never used, and any change had to be made four times.
 * Same-origin, so the pages still make no third-party request.
 */
/* Brand palette, verbatim from brand/README.md. Paper is the default
         ground and ink the type -- this identity is light-first, and dark
         mode is the inversion the kit already ships art for. */
      :root {
        --ink: #10201b;
        --paper: #f4f2ec;
        --accent: #0e8660;
        /* The brand accent is 4.08:1 on paper -- fine for large text, icons
           and borders, short of WCAG AA's 4.5:1 for normal-size text. This is
           the same hue darkened to 5.59:1, used only where accent-coloured
           text is small enough to need it. */
        --accent-text: #0b6e4f;
        --mint: #3ddc97;
        --danger: #d23b30;
        --danger-dark: #ff5f57;

        --bg: var(--paper);
        --fg: var(--ink);
        --rule: color-mix(in srgb, var(--ink) 14%, transparent);
        --soft: color-mix(in srgb, var(--ink) 62%, transparent);
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          --bg: var(--ink);
          --fg: var(--paper);
          --rule: color-mix(in srgb, var(--paper) 16%, transparent);
          --soft: color-mix(in srgb, var(--paper) 66%, transparent);
        }
      }
      :root[data-theme="dark"] {
        --bg: var(--ink);
        --fg: var(--paper);
        --rule: color-mix(in srgb, var(--paper) 16%, transparent);
        --soft: color-mix(in srgb, var(--paper) 66%, transparent);
      }

      * { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; }

      body {
        margin: 0;
        min-height: 100svh;
        background: var(--bg);
        color: var(--fg);
        font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        display: grid;
        grid-template-rows: 1fr auto;
        /* `minmax(0, 1fr)` is load-bearing: without an explicit column the
           implicit `auto` track sizes to the content's max-content width,
           so the 46ch paragraph pushed past a phone viewport and was
           clipped. This pins the column to the viewport instead. */
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 16px 0;
      }

      main {
        width: 100%;
        max-width: 57rem;
        margin: 0 auto;
        align-self: center;
        padding-bottom: 40px;
      }

      /* The lockup is the brand kit's own artwork, swapped by scheme --
         the wordmark is outlined, so no webfont is fetched and the page
         makes no external request at all. */
      .logo {
        display: block;
        width: min(310px, 74vw);
        height: auto;
        margin-inline: auto;
      }

      h1 {
        font-size: clamp(1.875rem, 5.4vw, 2.875rem);
        line-height: 1.12;
        letter-spacing: -0.023em;
        font-weight: 640;
        margin: 52px auto 0;
        max-width: 19ch;
        text-wrap: balance;
        text-align: center;
      }

      h1 em {
        font-style: normal;
        color: var(--accent);
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) h1 em { color: var(--mint); }
      }
      :root[data-theme="dark"] h1 em { color: var(--mint); }

      p {
        font-size: clamp(1rem, 2.2vw, 1.125rem);
        line-height: 1.65;
        color: var(--soft);
        margin: 20px auto 0;
        max-width: 46ch;
        text-wrap: pretty;
        text-align: center;
      }


      /* ---- comparison ---------------------------------------------- */
      .compare { margin: 66px 0 0; }
      .compare h2 {
        font-size: clamp(1.25rem, 3vw, 1.5rem);
        font-weight: 650;
        letter-spacing: -0.015em;
        margin: 0 0 8px;
        text-align: center;
      }
      .compare .note {
        font-size: 0.9375rem;
        color: var(--soft);
        margin: 0 auto 26px;
        max-width: 54ch;
        line-height: 1.6;
        text-align: center;
      }

      .tablewrap { container-type: inline-size; }

      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.9375rem;
      }
      caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

      th, td { padding: 15px 9px; text-align: center; }
      tbody th, thead th:first-child { text-align: left; padding-left: 0; }

      thead th {
        font-size: 0.8125rem;
        font-weight: 640;
        color: var(--soft);
        padding-bottom: 12px;
      }
      thead th.us { color: var(--fg); font-size: 0.9375rem; }

      tbody th {
        font-weight: 450;
        color: var(--fg);
        width: 24%;
        padding-right: 16px;
      }
      /* Equal shares for the vendors, so no column looks favoured by width. */
      thead th:not(:first-child), tbody td { width: 19%; }
      tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--rule); }

      /* Our column is one continuous tinted panel rather than tinted cells,
         so it reads as a column and not as striping. */
      .us {
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border-left: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
        border-right: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
      }
      thead .us { border-radius: 10px 10px 0 0; border-top: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
      tbody tr:last-child .us { border-radius: 0 0 10px 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .us {
          background: color-mix(in srgb, var(--mint) 11%, transparent);
          border-left-color: color-mix(in srgb, var(--mint) 30%, transparent);
          border-right-color: color-mix(in srgb, var(--mint) 30%, transparent);
        }
        :root:not([data-theme="light"]) thead .us { border-top-color: color-mix(in srgb, var(--mint) 30%, transparent); }
        :root:not([data-theme="light"]) tbody tr:last-child .us { border-bottom-color: color-mix(in srgb, var(--mint) 30%, transparent); }
      }

      .icon { width: 19px; height: 19px; display: inline-block; vertical-align: -3px; }
      .yes { color: var(--accent); }
      .no  { color: var(--danger); }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .yes { color: var(--mint); }
        :root:not([data-theme="light"]) .no { color: var(--danger-dark); }
      }
      /* The qualifier under a cross carries the fact; the cross alone
         would be an assertion with nothing behind it. */
      .fig {
        display: block;
        font-size: 1.0625rem;
        font-weight: 620;
        letter-spacing: -0.01em;
        /* Normal-size text, so it takes the contrast-safe accent. */
        color: var(--accent-text);
      }
      .fig-bad { color: var(--soft); font-weight: 560; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .fig { color: var(--mint); }
        :root:not([data-theme="light"]) .fig-bad { color: var(--soft); }
      }
      :root[data-theme="dark"] .fig { color: var(--mint); }
      :root[data-theme="dark"] .no { color: var(--danger-dark); }
      :root[data-theme="dark"] .fig-bad { color: var(--soft); }
      .qual { display: block; font-size: 0.75rem; color: var(--soft); margin-top: 3px; }
      .price { display: block; font-size: 0.8125rem; line-height: 1.5; }
      .row-price th, .row-price td { vertical-align: top; }
      .row-price th { padding-top: 22px; }
      .price b { font-weight: 600; font-size: 0.9375rem; display: block; }

      /* Tooltip: hover and keyboard focus, no JS. The trigger is
         focusable so the method behind the numbers is reachable without a
         pointer -- it is the evidence for the row, not decoration. */
      .tiplabel { position: relative; display: inline; }
      .tip {
        display: inline-grid;
        place-items: center;
        width: 15px; height: 15px;
        margin-left: 6px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--fg) 34%, transparent);
        color: var(--soft);
        font-size: 0.625rem;
        font-style: italic;
        font-weight: 700;
        cursor: help;
        vertical-align: 1px;
      }
      .tipbody {
        position: absolute;
        bottom: calc(100% + 9px);
        left: 0;
        z-index: 5;
        width: max-content;
        max-width: 19rem;
        padding: 11px 13px;
        border-radius: 9px;
        background: var(--fg);
        color: var(--bg);
        font-size: 0.75rem;
        font-weight: 400;
        font-style: normal;
        line-height: 1.5;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.12s ease;
        box-shadow: 0 8px 24px rgb(0 0 0 / 0.22);
      }
      .tipbody b { display: block; margin-bottom: 4px; }
      .tipbody .tiprepos { display: block; margin-top: 6px; opacity: 0.75; }
      .tip:hover .tipbody, .tip:focus-visible .tipbody,
      .tip:focus .tipbody { opacity: 1; visibility: visible; }

      .src {
        font-size: 0.8125rem;
        color: var(--soft);
        margin: 22px auto 0;
        line-height: 1.6;
        max-width: 62ch;
        text-align: center;
      }
      .src a { color: inherit; }

      /* Icons stay legible in three narrow columns, so the table keeps its
         shape on a phone; only the type and padding tighten. */
      /* Four vendors will not fit a phone at a legible size, so below this
         the table scrolls sideways instead of crushing every column. The
         criterion column stays put, because a value with no visible row
         label is not a comparison. */
      @container (max-width: 700px) {
        .tablewrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          /* Bleed into the page gutter so the scroll starts at the edge and
             it is obvious there is more to the right. */
          margin-inline: -16px;
          padding-inline: 16px;
        }
        table { min-width: 34rem; font-size: 0.8125rem; }
        th, td { padding: 12px 8px; }
        tbody th,
        thead th:first-child {
          position: sticky;
          left: 0;
          z-index: 2;
          width: 9.5rem;
          min-width: 9.5rem;
          background: var(--bg);
          font-size: 0.75rem;
        }
        thead th { font-size: 0.6875rem; }
        .price { font-size: 0.6875rem; }
        .price b { font-size: 0.8125rem; }
        .qual { font-size: 0.625rem; }
      }

      footer {
        border-top: 1px solid var(--rule);
        padding: 20px 0 28px;
        width: 100%;
        max-width: 57rem;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 20px;
        align-items: baseline;
        justify-content: space-between;
        font-size: 0.8125rem;
        color: var(--soft);
      }

      footer a { color: inherit; }
      footer .status {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
      }
      footer .status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-1px);
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) footer .status::before {
          background: var(--mint);
        }
      }
      :root[data-theme="dark"] footer .status::before { background: var(--mint); }

      /* ---- document pages (privacy, thanks, signup-error) -------------
         These were written inline in privacy.html and were dropped when the
         stylesheet was extracted from index.html, which never had them. The
         pages stayed readable on the base rules alone, which is why it was
         not obvious -- headings fell back to browser defaults and the prose
         inherited the hero's centred, narrow measure. */
      .doc {
        max-width: 40rem;
        margin: 0 auto;
        padding: 8px 0 56px;
      }
      .doc .back {
        font-size: 0.875rem;
        color: var(--soft);
        text-decoration: none;
      }
      .doc .back:hover { color: var(--fg); }
      .doc h1 {
        font-size: clamp(1.75rem, 4.4vw, 2.25rem);
        margin: 26px 0 6px;
        max-width: none;
        text-align: left;
      }
      .doc .updated {
        font-size: 0.8125rem;
        color: var(--soft);
        margin: 0 0 30px;
      }
      .doc h2 {
        font-size: 1.0625rem;
        font-weight: 640;
        letter-spacing: -0.01em;
        margin: 34px 0 8px;
        text-align: left;
      }
      /* Body copy reads left-aligned; centring is for the hero, not a policy. */
      .doc p,
      .doc li {
        font-size: 0.9375rem;
        line-height: 1.68;
        color: var(--soft);
        max-width: none;
        text-align: left;
        margin-inline: 0;
      }
      .doc p { margin-bottom: 12px; }
      .doc ul { margin: 0 0 12px; padding-left: 20px; }
      .doc li { margin-bottom: 7px; }
      .doc strong { color: var(--fg); font-weight: 600; }
      .doc a { color: var(--fg); }
      .doc code {
        font-size: 0.875em;
        padding: 1px 5px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--fg) 9%, transparent);
      }