/* The blog (TAP-481), on top of /styles.css: the same dark ground and measure as the legal pages,
   with a little more room for reading. */
.blog .lede { font-size: 18px; color: var(--ink-2); margin: 0 0 28px; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-item { padding: 22px 0; border-bottom: 1px solid var(--line); margin: 0; }
.post-item:first-child { padding-top: 6px; }
.post-item h2 { margin: 4px 0 8px; font-size: 22px; }
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover, .post-item h2 a:focus-visible { text-decoration: underline; }
.post-item p { margin: 0; }
.post-kicker { font-size: 14px; color: var(--ink-3); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.post-kicker a { color: var(--ink-3); text-decoration: none; }
.post-kicker a:hover { color: var(--ink-2); text-decoration: underline; }
.post .updated { margin-bottom: 24px; }
.post-hero { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 28px; background: var(--surface); }
.post-body { font-size: 18px; }
.post-body p, .post-body li { color: #D9CCCF; }
.post-body h2 { margin-top: 44px; font-size: 24px; }
.post-body h3 { margin-top: 30px; font-size: 19px; }
.post-body ol, .post-body ul { padding-left: 26px; }
.post-body li { margin-bottom: 10px; }
.post-body blockquote { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.post-body code { background: var(--surface); padding: 1px 5px; border-radius: 5px; font-size: 0.92em; }
.post-cta { margin: 48px 0 0; padding: 22px; background: var(--surface); border-radius: 12px; }
.post-cta-lead { color: var(--ink); font-weight: 600; font-size: 18px; margin: 0 0 6px; }
.post-cta .contact { margin-top: 4px; }
.draft-flag { background: #3A2A12; color: #F2D29B; border-radius: 9px; padding: 10px 14px; font-size: 15px; margin: 0 0 24px; }
.draft-tag { color: #F2D29B; }
/* Comparison tables in switching posts. display:block lets a wide table scroll inside itself at
   phone width instead of pushing the page sideways. */
.post-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--line); color: #D9CCCF; }
.post-body th:first-child, .post-body td:first-child { padding-left: 0; }
.post-body th { color: var(--ink); font-weight: 600; }
.post-body td:first-child { color: var(--ink); font-weight: 600; }
@media (max-width: 480px) { .post-body table { font-size: 15px; } .post-body th, .post-body td { padding: 8px 6px; } .post-body th:first-child, .post-body td:first-child { padding-left: 0; } }
.post-body table + p { font-size: 15px; color: var(--ink-3); }
/* App screenshots: a phone-shaped image at full column width would be taller than the screen, so
   cap the height and centre it. */
.post-body p > img { display: block; margin: 20px auto 28px; width: auto; max-width: 100%; max-height: 70vh; }