/* Reference-directory layout: dated strip, masthead, three columns. System fonts only: the CSP allows no font downloads. */
:root {
  --paper: #f6f5ee;
  --paper-2: #efede3;
  --ink: #1f2b29;
  --ink-2: #47524f;
  --ink-3: #69726f;
  --rule: rgba(31, 43, 41, 0.16);
  --accent: #8a2b1f;
  --accent-ink: #ffffff;
  --serif: Georgia, "Iowan Old Style", "Charter", Cambria, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light dark;
}
/* Each site prints in its own ink. All pass 4.5:1 on the paper colour. */
[data-site="bestmmps"] { --accent: #8a2b1f; }
[data-site="bestmmpplatform"] { --accent: #1d4f8a; }
[data-site="bestattributionplatform"] { --accent: #1f5c3f; }
[data-site="bestattributiontool"] { --accent: #5b2a5e; }
[data-site="bestmmpalternative"] { --accent: #7a4a00; }
[data-site="bestmobileattribution"] { --accent: #135e63; }
[data-site="bestmobileattributiontools"] { --accent: #9a3b12; }
[data-site="bestappattribution"] { --accent: #22356b; }
[data-site="bestmmpattribution"] { --accent: #36592a; }
[data-site="bestattributionsoftware"] { --accent: #3d4a5c; }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161816;
    --paper-2: #1e211e;
    --ink: #e8ebe6;
    --ink-2: #bcc3bd;
    --ink-3: #939b95;
    --rule: rgba(232, 235, 230, 0.16);
    --accent-ink: #161816;
  }
  /* Same ink, lightened for dark paper. */
  [data-site] { --accent: var(--accent-light); }
  [data-site="bestmmps"] { --accent-light: #f0a898; }
  [data-site="bestmmpplatform"] { --accent-light: #9cc0f0; }
  [data-site="bestattributionplatform"] { --accent-light: #8fd0ae; }
  [data-site="bestattributiontool"] { --accent-light: #d7a8d9; }
  [data-site="bestmmpalternative"] { --accent-light: #e8c27a; }
  [data-site="bestmobileattribution"] { --accent-light: #84cfd3; }
  [data-site="bestmobileattributiontools"] { --accent-light: #f0a77f; }
  [data-site="bestappattribution"] { --accent-light: #a8b8ef; }
  [data-site="bestmmpattribution"] { --accent-light: #a9d395; }
  [data-site="bestattributionsoftware"] { --accent-light: #b8c3d3; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--sans); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 120ms var(--ease); }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Small labels, as in a printed directory. */
.kicker, .brief h2, .side-title, .rail-label, .rail dt, .card-label, .toc-title, .site-head .sub {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Dated strip with the disclosure. */
.disclosure { border-bottom: 1px solid var(--rule); font: 12px/1.5 var(--sans); color: var(--ink-2); padding: 8px 0; }
.disclosure .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
.disclosure a { color: var(--ink-2); }
.disclosure .edition { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Masthead. */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 24px; padding-bottom: 24px; }
.brand { display: flex; flex-direction: column; gap: 4px; }
.site-head .name { font: 700 24px/1.15 var(--serif); color: var(--ink); text-decoration: none; }
.site-head .name:hover { color: var(--accent); }
.site-head nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 14px; }
.site-head nav a { color: var(--ink); text-decoration: none; }
.site-head nav a:hover { color: var(--accent); }
.head-link { font-size: 14px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

.crumbs { font-size: 12px; color: var(--ink-3); margin: 24px 0 0; overflow-wrap: anywhere; }
.crumbs a { color: var(--ink-3); }

/* Three columns: site index, entry, fact card. */
.page { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 48px; padding: 32px 0 72px; }
.page.no-rail { grid-template-columns: 200px minmax(0, 1fr); }
.page.no-rail .col { max-width: 760px; }
.col { min-width: 0; }

.side { border-right: 1px solid var(--rule); padding-right: 24px; align-self: start; position: sticky; top: 24px; }
.side-title { margin: 0 0 12px; }
.side ul { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.45; }
.side li { margin: 0 0 10px; }
.side a { color: var(--ink); text-decoration: none; }
.side a:hover, .side a[aria-current="page"] { color: var(--accent); }
.side a[aria-current="page"] { font-weight: 600; }
.side .side-more { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 16px; }

.rail { align-self: start; border-top: 3px solid var(--ink); padding-top: 16px; position: sticky; top: 24px; }
.rail-label { margin: 0 0 4px; }
.rail-title { font: 400 32px/1.15 var(--serif); margin: 0 0 16px; }
.rail dl { margin: 0; }
.rail dt { color: var(--ink-3); margin: 16px 0 4px; }
.rail dd { margin: 0; font-size: 14px; line-height: 1.5; }
.rail ul { list-style: none; padding: 0; margin: 20px 0 0; font-size: 14px; }
.rail li { padding: 8px 0; border-top: 1px solid var(--rule); }

/* The entry. */
header.hero { padding: 0 0 8px; }
.kicker { margin: 0 0 12px; }
h1 { font: 400 clamp(36px, 4.6vw, 56px)/1.08 var(--serif); letter-spacing: -0.01em; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 2px solid var(--accent); text-wrap: balance; }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.meta { font-size: 12px; color: var(--ink-3); margin: 0; }

main p, main li { text-wrap: pretty; }
main h2 { font: 400 30px/1.2 var(--serif); margin: 48px 0 16px; padding-top: 32px; border-top: 1px solid var(--rule); text-wrap: balance; }
main h3 { font: 400 22px/1.3 var(--serif); margin: 28px 0 8px; }
main > h2:first-child { margin-top: 24px; padding-top: 0; border-top: 0; }
main ul, main ol { padding-left: 24px; }
main li { margin: 6px 0; }
main strong { font-weight: 600; }

.brief { margin: 24px 0 0; }
.brief h2 { margin: 0 0 8px; padding: 0; border: 0; }
.brief p { font-size: 19px; line-height: 1.6; margin: 0 0 16px; }

/* In this entry: a numbered box in two columns. */
.toc { border: 1px solid var(--rule); padding: 20px 24px; margin: 28px 0 8px; }
.toc-title { margin: 0 0 12px; color: var(--ink); }
.toc ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 24px; font-size: 13px; }
.toc li { margin: 0 0 6px; break-inside: avoid; }
.toc li::marker { color: var(--ink-3); }

/* Tables. */
.table-scroll { overflow-x: auto; margin: 24px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.55; min-width: 560px; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
thead th { font-weight: 600; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 600; white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }

.card { border: 1px solid var(--rule); padding: 20px 24px 8px; margin: 24px 0; }
.card h3 { margin-top: 0; }

/* The shortlist. */
.rank { counter-reset: rank; list-style: none; padding: 0; margin: 24px 0; }
.rank > li { counter-increment: rank; position: relative; padding: 24px 0 12px 64px; margin: 0; border-top: 1px solid var(--rule); }
.rank > li::before { content: counter(rank); position: absolute; left: 0; top: 18px; font: 400 44px/1 var(--serif); color: var(--accent); }
.rank h3 { margin: 0 0 6px; font-size: 24px; }
.score { font-variant-numeric: tabular-nums; font-weight: 600; }
.note { font-size: 13px; color: var(--ink-3); }
sup.ref { font-size: 10px; line-height: 0; }
sup.ref a { text-decoration: none; padding: 0 1px; }

/* Q&A that open on click. */
#questions + details, details { border-bottom: 1px solid var(--rule); }
details:first-of-type { border-top: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: baseline; padding: 14px 0; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "\25B8"; color: var(--ink-3); font-size: 12px; transition: transform 150ms var(--ease); }
details[open] summary::before { transform: rotate(90deg); }
summary h3 { font: 500 16px/1.45 var(--sans); margin: 0; }
summary:hover h3 { color: var(--accent); }
details p { margin: 0 0 16px 24px; }

/* Entries shown as cards. */
.cards { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cards li { margin: 0; border: 1px solid var(--rule); padding: 20px; }
.card-label { margin: 0 0 8px; }
.cards a { font: 400 20px/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.cards a:hover { color: var(--accent); }
.card-note { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }

/* The one call to action. */
.cta { border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 24px; margin: 48px 0 8px; }
.cta h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 24px; }
.cta p { margin: 0 0 20px; }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 500; font-size: 15px; line-height: 1; padding: 14px 20px; text-decoration: none; transition: background-color 120ms var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: scale(0.98); }
.cta .fine { font-size: 12px; color: var(--ink-3); margin: 16px 0 0; }

/* Back matter. */
.sources { font-size: 14px; color: var(--ink-2); }
.sources ol { padding-left: 24px; }
.sources li { margin: 6px 0; overflow-wrap: anywhere; }
.sources .checked { color: var(--ink-3); white-space: nowrap; }
ul.links { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
ul.links li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
ul.links a { text-decoration: none; }
ul.links a:hover { text-decoration: underline; }
ul.links .note { display: block; margin: 4px 0 0; }
dl.terms dt { font-weight: 600; margin-top: 20px; }
dl.terms dd { margin: 4px 0 0; color: var(--ink-2); }

footer { border-top: 1px solid var(--rule); padding: 28px 0 56px; font-size: 12px; color: var(--ink-3); }
footer p { margin: 6px 0; max-width: 760px; }
footer a { color: var(--ink-2); }

/* Long domain names and unbroken terms wrap instead of pushing a phone screen sideways. */
h1, h2, h3, p, li, dt, dd, .crumbs, .site-head .name { overflow-wrap: anywhere; }

/* Medium screens: the fact card moves under the entry. */
@media (max-width: 1100px) {
  .page { grid-template-columns: 200px minmax(0, 1fr); }
  .rail { grid-column: 2; position: static; }
}
/* Small screens: one column; the site index moves below the entry. */
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .page, .page.no-rail { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .col { order: 1; }
  .rail { order: 2; grid-column: auto; }
  .side { order: 3; position: static; border-right: 0; border-top: 1px solid var(--rule); padding: 20px 0 0; }
  .site-head .wrap { padding-top: 20px; padding-bottom: 20px; }
  .site-head nav { gap: 4px 20px; }
  .head-link { display: none; }
  h1 { font-size: 34px; }
  main h2 { font-size: 25px; }
  .brief p { font-size: 17px; }
  .toc ol { columns: 1; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .rank > li { padding-left: 48px; }
  .rank > li::before { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .disclosure, .site-head nav, .side, .toc { display: none; }
  .page { display: block; }
  details { display: block; }
  .btn { border: 1px solid #000; }
}