/* ============================================================
   Attachment Hippo — article.css
   The article stylesheet: tokens + every content block.
   Load after reset.css and variables.css.
   Do not add inline styles or classes not defined here.
   ============================================================ */

/* ------ Article-local tokens -------------------------------- */

:root {
  --tint-blue:       #e8f2fb;
  --tint-blue-ink:   #1a6fb5;
  --tint-pink:       #fce8f0;
  --tint-pink-ink:   #c04b7a;
  --tint-cream:      #fdf6e3;
  --tint-cream-ink:  #b07a10;
  --tint-mint:       #e6f7f2;
  --tint-mint-ink:   #1e8a65;
  --ink-rule:        2px solid var(--text-primary);
  --hairline:        1px solid var(--gray-20);
}

/* ============================================================
   Page shell
   ============================================================ */

.post-header {
  padding: 140px 0 var(--spacing-12);
  max-width: 700px;
  margin: 0 auto;
}

.post-eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-4);
}

.post-title {
  font-family: var(--font-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-6);
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.post-meta-item + .post-meta-item::before {
  content: "·";
  padding: 0 var(--spacing-3);
  color: var(--gray-30);
}

.post-featured-image {
  max-width: 1000px;
  margin: 0 auto var(--spacing-12);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.post-featured-image img {
  width: 100%;
  aspect-ratio: 1000 / 480;
  object-fit: cover;
  display: block;
}

/* Never widen post-content past 700px. */
.post-content {
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: var(--spacing-16);
}

/* Text column — 680px reading measure */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote,
.post-content pre,
.post-content .post-lead,
.post-content .post-toc,
.post-content .callout,
.post-content .stat,
.post-content .takeaways,
.post-content .cta-inline,
.post-content .faq,
.post-content .author-box,
.post-content .post-sources {
  max-width: 680px;
}

/* ============================================================
   Lead paragraph
   ============================================================ */

.post-content .post-lead {
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: var(--spacing-8);

}

/* ============================================================
   Table of contents  (use on posts with 4+ H2 sections)
   ============================================================ */

.post-content .post-toc {
  border-top: var(--ink-rule);
  padding-top: var(--spacing-4);
  margin: var(--spacing-10) 0;

}

.post-toc-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-3);
}

.post-toc ol {
  list-style: none;
  padding: 0;
  counter-reset: toc;
}

.post-toc li {
  counter-increment: toc;
  border-top: var(--hairline);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
}

.post-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  padding: var(--spacing-3) 0;
}

.post-toc a {
  display: block;
  padding: var(--spacing-3) 0;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  text-decoration: none;
  line-height: var(--line-height-normal);
  transition: opacity var(--transition-fast);
}

.post-toc a:hover {
  opacity: 0.65;
}

/* ============================================================
   Headings
   H2s are auto-numbered by CSS — never type the numbers.
   ============================================================ */

.post-content {
  counter-reset: section;
}

.post-content h2 {
  counter-increment: section;
  border-top: var(--ink-rule);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);

}

.post-content h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--spacing-2);
}

.post-content h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-3);
  line-height: var(--line-height-tight);

}

.post-content h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-2);

}

/* ============================================================
   Body text & inline emphasis
   ============================================================ */

.post-content p {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-6);

}

.post-content strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.post-content em {
  font-style: italic;
}

/* max 2 marks per post */
.post-content mark {
  background-color: #fff3b0;
  color: var(--text-primary);
  padding: 0 2px;
  border-radius: 2px;
}

/* <code> for paths, filenames, settings */
.post-content :not(pre) > code {
  background-color: var(--gray-10);
  color: var(--text-primary);
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-sm);
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.875em;
}

.post-content a:not(.btn) {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--transition-fast);
}

.post-content a:not(.btn):hover {
  opacity: 0.65;
}

/* ============================================================
   Lists  (ul / ol / checklist)
   ============================================================ */

/* Restore styles removed by reset */
.post-content ul,
.post-content ol {
  padding-left: var(--spacing-6);
  margin-bottom: var(--spacing-6);

}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }

.post-content li {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2);
}

/* Checklist — prerequisites, "before you start" */
.post-content ul.checklist {
  list-style: none;
  padding-left: 0;
}

.post-content ul.checklist li {
  padding-left: var(--spacing-8);
  position: relative;
}

.post-content ul.checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  color: var(--gray-40);
  font-size: 1em;
  line-height: var(--line-height-relaxed);
}

/* ============================================================
   Steps  (real how-to walkthroughs)
   Each item: <h4> + <p>
   ============================================================ */

.post-content ol.steps {
  list-style: none;
  padding: 0;
  border-top: var(--ink-rule);
  margin: var(--spacing-8) 0;
  counter-reset: step;

}

.post-content ol.steps > li {
  counter-increment: step;
  border-top: var(--hairline);
  position: relative;
  padding: var(--spacing-5) 0 var(--spacing-5) calc(2rem + var(--spacing-5));
  margin-bottom: 0;
}

.post-content ol.steps > li:first-child {
  border-top: none;
}

.post-content ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  width: 2rem;
}

.post-content ol.steps > li h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
  max-width: none;
}

.post-content ol.steps > li p {
  margin-bottom: 0;
  font-size: var(--font-size-base);
  max-width: none;
}

/* ============================================================
   Blockquote + cite
   ============================================================ */

.post-content blockquote {
  border-left: 3px solid var(--gray-20);
  padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-6);
  margin: var(--spacing-8) 0;

}

.post-content blockquote p {
  font-size: var(--font-size-xl);
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--spacing-3);
  max-width: none;
}

.post-content blockquote p:last-of-type {
  margin-bottom: 0;
}

.post-content blockquote cite {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: normal;
  margin-top: var(--spacing-3);
}

.post-content blockquote cite span {
  opacity: 0.7;
}

/* Pull quote — one per post, your own words made loud */
.post-content blockquote.pullquote {
  border-left: none;
  border-top: var(--ink-rule);
  padding-left: 0;
  padding-top: var(--spacing-6);
}

.post-content blockquote.pullquote p {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  line-height: 1.3;
  color: var(--text-primary);
}

/* ============================================================
   Callouts  (max 3 per post, never two in a row)
   Variant carries semantic meaning — pick by meaning, not color.
   ============================================================ */

.post-content .callout {
  border-radius: var(--radius-lg);
  padding: var(--spacing-5) var(--spacing-6);
  margin: var(--spacing-8) 0;

}

.callout-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-3);
}

.post-content .callout p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-3);
  max-width: none;
}

.post-content .callout p:last-child { margin-bottom: 0; }

/* tip — makes life easier, not required */
.callout.callout--tip  { background-color: var(--tint-blue); }
.callout.callout--tip  .callout-title { color: var(--tint-blue-ink); }

/* note — context, limits, edge-case behavior */
.callout.callout--note { background-color: var(--tint-cream); }
.callout.callout--note .callout-title { color: var(--tint-cream-ink); }

/* warning — costs real time or data if ignored */
.callout.callout--warning { background-color: var(--tint-pink); }
.callout.callout--warning .callout-title { color: var(--tint-pink-ink); }

/* hippo — brand voice: opinion, small joke, how the team uses it */
.callout.callout--hippo { background-color: var(--tint-mint); }
.callout.callout--hippo .callout-title { color: var(--tint-mint-ink); }

/* ============================================================
   Stat  (one figure that is the point of a section)
   ============================================================ */

.post-content .stat {
  border-top: var(--ink-rule);
  padding-top: var(--spacing-5);
  margin: var(--spacing-10) 0;

}

.stat-figure {
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1;
  display: block;
  margin-bottom: var(--spacing-3);
}

.stat-description {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  line-height: var(--line-height-normal);
  max-width: 700px;
}

.stat-source {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gray-40);
  margin-top: var(--spacing-2);
}

/* ============================================================
   Stat row  (2–4 comparable figures side by side)
   ============================================================ */

.post-content .stat-row {
  border-top: var(--ink-rule);
  padding-top: 0;
  margin: var(--spacing-10) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.post-content .stat-card {
  border-top: var(--hairline);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-5) 0;
}

.post-content .stat-card + .stat-card {
  border-left: var(--hairline);
  padding-left: var(--spacing-5);
}

.stat-card .stat-number {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: block;
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.stat-card .stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-normal);
}

/* ============================================================
   Takeaways  (end of long section or end of post — not both)
   ============================================================ */

.post-content .takeaways {
  border-top: var(--ink-rule);
  padding-top: var(--spacing-4);
  margin: var(--spacing-10) 0;

}

.takeaways-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-3);
}

.takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.takeaways ul li {
  border-top: var(--hairline);
  padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  position: relative;
  margin-bottom: 0;
}

.takeaways ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--gray-40);
}

/* ============================================================
   Table  (always wrap; wrapper handles mobile scroll)
   ============================================================ */

.post-content .table-wrap {
  border-top: var(--ink-rule);
  padding-top: var(--spacing-4);
  margin: var(--spacing-10) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-content .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.post-content .table-wrap th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--spacing-3) var(--spacing-6) var(--spacing-3) 0;
  border-bottom: var(--hairline);
}

.post-content .table-wrap td {
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) 0;
  border-top: var(--hairline);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  vertical-align: top;
  white-space: normal;
}

.post-content .table-wrap th:last-child,
.post-content .table-wrap td:last-child {
  padding-right: 0;
}

/* ============================================================
   Compare  (two-way trade-offs only)
   ============================================================ */

.post-content .compare {
  border-top: var(--ink-rule);
  padding-top: 0;
  margin: var(--spacing-10) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.compare-col {
  border-top: var(--hairline);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-5) 0;
}

.compare-col + .compare-col {
  border-left: var(--hairline);
  padding-left: var(--spacing-5);
  padding-right: 0;
}

.compare-col-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-4);
}

.compare-col.compare-pro .compare-col-label { color: var(--tint-mint-ink); }
.compare-col.compare-con .compare-col-label { color: var(--tint-pink-ink); }

.compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.compare-col li {
  border-top: var(--hairline);
  padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  position: relative;
  margin-bottom: 0;
}

.compare-col.compare-pro li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--tint-mint-ink);
  font-weight: var(--font-weight-semibold);
}

.compare-col.compare-con li::before {
  content: "−";
  position: absolute;
  left: 0;
  color: var(--tint-pink-ink);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   Figure + figcaption
   ============================================================ */

.post-content figure {
  margin: var(--spacing-10) 0;
}

.post-content figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.post-content figcaption {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--spacing-3);
  line-height: var(--line-height-normal);
}

/* ============================================================
   Code block  (rule definitions, config, paths)
   ============================================================ */

.post-content pre {
  background-color: var(--gray-80);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  overflow-x: auto;
  margin: var(--spacing-6) 0;

}

.post-content pre code {
  background: none;
  padding: 0;
  color: var(--gray-10);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  border-radius: 0;
}

/* ============================================================
   Inline CTA  (mid-article, right after section that made the case)
   ============================================================ */

.post-content .cta-inline {
  background-color: var(--tint-blue);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
  margin: var(--spacing-10) 0;

}

.cta-inline-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-3);
  line-height: var(--line-height-tight);
}

.post-content .cta-inline p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-5);
  max-width: none;
}

.post-content .cta-inline p:last-child { margin-bottom: 0; }

/* ============================================================
   FAQ  (3–6 questions; first one open)
   ============================================================ */

.post-content .faq {
  border-top: var(--ink-rule);
  padding-top: var(--spacing-4);
  margin: var(--spacing-10) 0;

}

.faq-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-3);
}

.post-content .faq details {
  border-top: var(--hairline);
}

.post-content .faq details:last-of-type {
  border-bottom: var(--hairline);
}

.post-content .faq summary {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  padding: var(--spacing-4) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
}

.post-content .faq summary::-webkit-details-marker { display: none; }

.post-content .faq summary::after {
  content: "+";
  font-size: var(--font-size-xl);
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: var(--font-weight-normal);
  transition: content var(--transition-fast);
}

.post-content .faq details[open] summary::after { content: "−"; }

.post-content .faq .faq-answer {
  padding-bottom: var(--spacing-5);
}

.post-content .faq .faq-answer p {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-3);
  max-width: none;
}

.post-content .faq .faq-answer p:last-child { margin-bottom: 0; }

/* ============================================================
   End CTA  (once, near the end)
   ============================================================ */

.post-content .post-cta {
  border-top: var(--ink-rule);
  padding: var(--spacing-12) 0;
  margin: var(--spacing-12) 0;
  text-align: center;
}

.post-cta-title {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: 0 auto var(--spacing-4);
  line-height: var(--line-height-tight);
  text-align: center;
}

.post-cta-body {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin: 0 auto var(--spacing-8);
  max-width: 700px;
  line-height: var(--line-height-relaxed);
}

/* ============================================================
   Author box  (every post)
   ============================================================ */

.post-content .author-box {
  border-top: var(--hairline);
  padding-top: var(--spacing-8);
  margin-top: var(--spacing-8);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-5);

}

.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--tint-blue);
  color: var(--tint-blue-ink);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-1);
}

.author-bio {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-relaxed);
}

/* ============================================================
   Sources  (any post containing a figure or specific number)
   ============================================================ */

.post-content .post-sources {
  border-top: var(--hairline);
  padding-top: var(--spacing-6);
  margin-top: var(--spacing-8);

}

.post-sources-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-3);
}

.post-sources ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: sources;
}

.post-sources li {
  counter-increment: sources;
  border-top: var(--hairline);
  padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-6);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-relaxed);
  position: relative;
  margin-bottom: 0;
}

.post-sources li::before {
  content: counter(sources);
  position: absolute;
  left: 0;
  color: var(--gray-40);
  font-size: var(--font-size-xs);
  padding-top: 2px;
}

.post-sources a {
  color: var(--text-muted);
}

/* ============================================================
   Related posts  (every post — exactly 3 cards)
   ============================================================ */

.post-content .related {
  border-top: var(--ink-rule);
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-12);
}

.related-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-2);
}

.related-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-4);
  align-items: center;
  border-top: var(--hairline);
  padding: var(--spacing-4) 0;
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity var(--transition-fast);
}

.related-card:hover { opacity: 0.65; }

.related-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-1);
}

.related-card-meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.related-card-arrow {
  font-size: var(--font-size-xl);
  color: var(--gray-30);
  flex-shrink: 0;
}

/* ============================================================
   Wide bleed  (desktop only — ~80px wider than text column)
   Tables, stat rows, compare, end CTA, figure.figure-wide only.
   ============================================================ */

@media (min-width: 700px) {
  .post-content .compare,
  .post-content figure.figure-wide {
    margin-left: -40px;
    margin-right: -40px;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px) {
  .post-title {
    font-size: var(--font-size-4xl);
  }

  .post-content h2 {
    font-size: var(--font-size-2xl);
    margin-top: var(--spacing-10);
  }

  .post-content h3 {
    font-size: var(--font-size-xl);
  }

  .post-content blockquote.pullquote p {
    font-size: var(--font-size-2xl);
  }

  .post-cta-title {
    font-size: var(--font-size-3xl);
  }

  .stat-figure {
    font-size: var(--font-size-5xl);
  }

  .post-content .compare {
    grid-template-columns: 1fr;
  }

  .compare-col + .compare-col {
    border-left: none;
    border-top: var(--hairline);
    padding-left: 0;
  }

  .post-content .stat-row {
    grid-template-columns: 1fr;
  }

  .post-content .stat-card + .stat-card {
    border-left: none;
    padding-left: 0;
    border-top: var(--hairline);
  }
}