:root {
  --bg: #ffffff;
  --surface: #F4F1EC;
  --surface-soft: #fbfaf5;
  --ink: #181816;
  --muted: #555047;
  --subtle: #777064;
  --line: rgba(24, 24, 22, 0.12);
  --brand: #fee500;
  --brand-soft: #fff7b8;
  --green: #174b35;

  /* The card shadow, named because the category accent below has to re-declare
     box-shadow to sit inside the card, and a second copy of this value would
     drift the first time one of them was tuned. */
  --card-shadow: 0 10px 24px rgba(24, 24, 22, 0.05);

  /* One hue per blog section. Deep and desaturated on purpose: these sit on a
     warm paper surface next to body text, and seven saturated colours would
     turn a reading page into a toy. They are an ACCENT, never a background,
     so nothing here is ever behind text and no contrast ratio depends on them.
     The hue is a second cue, not the only one: every group still carries its
     heading, so the page reads identically for someone who cannot tell these
     apart. Two of them are semantic rather than arbitrary (Canada red, money
     gold) because a colour a reader can guess is one they do not have to
     learn. Status colours from the app (danger/warning/success) are
     deliberately NOT reused: importing red-means-bad into an editorial index
     would say something about the section that is not true. */
  --cat-start: #174b35;
  --cat-pays: #8a6500;
  --cat-canada: #a3232b;
  --cat-kinds: #4a3d8f;
  --cat-trust: #2f4858;
  --cat-unclaimed: #1f6e6e;
  --cat-detail: #8a4b2a;
  /* The automated weekday posts. Ink rather than a hue: it is not a subject
     category like the others, it is "newest", and it should read as the top of
     the page rather than as an eighth topic. Kept for pages built before
     2026-09-16; generated posts are now filed under their category. */
  --cat-latest: #1a1a1a;
  /* Weekly roundups and dated catalogue counts: a sequence over time rather
     than a subject, so ink again. */
  --cat-weekly: #1a1a1a;
}

/* Set once, consumed by both the heading marker and the cards under it, so a
   section's colour is declared in exactly one place. */
.cat-start { --cat: var(--cat-start); }
.cat-pays { --cat: var(--cat-pays); }
.cat-canada { --cat: var(--cat-canada); }
.cat-kinds { --cat: var(--cat-kinds); }
.cat-trust { --cat: var(--cat-trust); }
.cat-unclaimed { --cat: var(--cat-unclaimed); }
.cat-detail { --cat: var(--cat-detail); }
.cat-latest { --cat: var(--cat-latest); }
.cat-weekly { --cat: var(--cat-weekly); }

* {
  box-sizing: border-box;
}

@font-face {
  font-family: Archivo;
  src: url(/fonts/Archivo_500Medium.ttf) format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url(/fonts/Archivo_700Bold.ttf) format('truetype');
  font-weight: 700;
  font-display: swap;
}

body {
  margin: 0;
  /* Was a yellow wash fading over the top 220px, on a warm paper ground. Both
     are gone. These pages are long-form reading reached from a search result,
     and they now sit on the same white the marketing pages use, so arriving from
     Google and arriving from the homepage no longer look like two companies. */
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.72 Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 72px;
  overflow-x: hidden;
}

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 34px;
  padding: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

/* The real mark, not a drawing of one.
   This used to be a CSS box: a yellow square with a black outline and an offset
   shadow. It was invented here and it was not the logo. The actual mark is the
   opposite way round, a dark tile carrying a yellow glyph. Since 2026-09-26 the
   mark is Wallet Bro, the app's mascot, as in the app header and the favicon. A header
   that draws its own approximation of a logo is the one place a brand cannot
   afford to be approximate.
   Loaded as a background rather than an <img> so the fix is one rule instead of
   an edit to the header of all twenty-two pages, and because the mark is
   decorative here: the word PayUpBro sits right beside it, so a screen reader
   announcing it twice would be worse than not announcing it at all. */
.brand::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: none;
  background-image: url("/brand/payupbro-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink);
}

/* The language switch (added by build-static-pages.mjs to every post that has a
   twin). Pushed right so it sits beside the app button, quiet next to it. */
.lang {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang:hover {
  color: var(--ink);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff !important;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

h1,
h2,
h3 {
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  max-width: 780px;
  margin: 0 0 14px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02;
}

h2 {
  margin: 44px 0 14px;
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.18;
}

h3 {
  margin: 28px 0 9px;
  font-size: 19px;
  line-height: 1.25;
}

p {
  max-width: 760px;
  margin: 0 0 17px;
  color: var(--muted);
}

p.lede {
  max-width: 740px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
}

.dateline {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  margin: 0 0 30px;
  padding: 7px 12px;
  color: var(--subtle);
  font-size: 14px;
}

.card {
  max-width: 800px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 24px 26px;
  margin: 0 0 22px;
  box-shadow: 0 12px 28px rgba(24, 24, 22, 0.06);
}

.card p {
  margin-bottom: 10px;
}

.card p:last-child {
  margin-bottom: 0;
}

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

ul.posts li,
ul.list li {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 22px 24px;
  /* inset rather than a border-left: a border would widen the box and shift
     every title 3px, and :hover already rewrites border-color, which would
     wipe the accent on the way past. */
  box-shadow: inset 3px 0 0 var(--cat, transparent), var(--card-shadow);
}

ul.posts li:hover,
ul.list li:hover {
  border-color: rgba(24, 24, 22, 0.28);
  transform: translateY(-1px);
}

ul.posts a,
ul.list a {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

ul.posts .sub,
ul.list .sub {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

ul.list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts {
  max-width: 800px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.facts li {
  display: flex;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15.5px;
}

.facts li:last-child {
  border-bottom: none;
}

.facts b {
  min-width: 130px;
  flex: none;
  color: var(--ink);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 7px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.chip.warn {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--brand);
}

.official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  background: var(--green);
  color: #ffffff;
  padding: 13px 20px;
  font-weight: 700;
  text-decoration: none;
}

.scroll {
  max-width: 860px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin: 0 0 22px;
}

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  color: var(--muted);
  text-align: left;
  vertical-align: top;
}

th,
td b,
ol.steps b,
ol.checks b,
dt,
.note strong {
  color: var(--ink);
}

th {
  background: var(--surface-soft);
  font-size: 14px;
  font-weight: 700;
}

tr:last-child td {
  border-bottom: none;
}

ol.steps,
ol.checks {
  max-width: 800px;
  margin: 0 0 22px;
  padding-left: 24px;
}

ol.steps li,
ol.checks li {
  margin-bottom: 13px;
  color: var(--muted);
}

dl {
  max-width: 800px;
}

dt {
  margin-top: 20px;
  font-weight: 700;
}

dd {
  margin: 7px 0 0;
  color: var(--muted);
}

.note {
  max-width: 840px;
  border-top: 1px solid var(--line);
  margin-top: 50px;
  padding-top: 22px;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .wrap {
    padding: 18px 16px 56px;
  }

  header.top {
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .nav {
    width: 100%;
    justify-content: space-between;
  }

  h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  ul.posts {
    grid-template-columns: 1fr;
  }

  .card,
  ul.posts li,
  ul.list li {
    padding: 20px;
  }

  .facts li {
    display: block;
  }

  .facts b {
    display: block;
    margin-bottom: 4px;
  }
}

/* The heading marker. Attribute-scoped so it only appears on the seven section
   headings of the index: h2 is also an in-article heading on all twenty-one
   post pages, and an empty 22px bar in front of each of those would be a
   layout change on every page in the blog. */
h2[class*="cat-"] {
  display: flex;
  align-items: center;
  gap: 11px;
}

h2[class*="cat-"]::before {
  content: '';
  flex: none;
  width: 5px;
  height: 0.86em;
  border-radius: 999px;
  background: var(--cat);
}

/* Foldable groups on the index. Native <details>, so it works with no script,
   and a folded group's posts are still in the HTML a crawler reads. The whole
   heading row is the button; the count stays visible so a folded group still
   says what is inside it. */
details.cat-group > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 44px 0 14px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}

details.cat-group > summary::-webkit-details-marker {
  display: none;
}

details.cat-group > summary h2 {
  margin: 0;
}

details.cat-group > summary .count {
  flex: none;
  min-width: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 1px 9px;
  color: var(--subtle);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* A chevron drawn from two borders, pointing down when open, right when folded. */
details.cat-group > summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 6px 4px auto;
  border-right: 2px solid var(--subtle);
  border-bottom: 2px solid var(--subtle);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

details.cat-group:not([open]) > summary::after {
  margin-bottom: 0;
  transform: rotate(-45deg);
}

details.cat-group > summary:hover::after {
  border-color: var(--ink);
}

details.cat-group > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  details.cat-group > summary::after {
    transition: none;
  }
}