/* Blog */
.crumbs { font-size: 13px; color: var(--mute); margin: 0; }
.crumbs a { color: var(--mute); }
.post-hero { min-height: auto; padding-top: 48px; padding-bottom: 40px; }
.post-hero h1 { font-size: clamp(2.1rem, 8vw, 4.2rem); max-width: 20ch; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.post { padding: 8px 18px 56px; }
.post .wrap { max-width: 760px; }
.post h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); max-width: 22ch; margin-top: 48px; }
.post h3 { margin-top: 28px; }
.post p, .post li { color: var(--mute); font-size: 1.08rem; line-height: 1.65; }
.post strong { color: var(--paper); }
.post ul, .post ol { padding-left: 1.2em; display: grid; gap: 8px; }
.post li::marker { color: var(--amber); }
.post .card { margin-top: 18px; }
.post .card p { font-size: 1rem; }
.post .ctas { margin-top: 18px; }
.post figure { margin: 28px 0; }
.post figcaption { color: var(--mute); font-size: 13px; text-align: center; margin-top: 10px; }
.callout {
  border: 1px solid rgba(111,191,122,.4);
  background: radial-gradient(circle at 90% 0%, rgba(111,191,122,.18), transparent 50%), var(--panel);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 24px;
}
.callout p { margin: 0; color: var(--paper); }
.steps { counter-reset: step; list-style: none; padding: 0 !important; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 48px;
  border-top: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
}
.phone-pos { background: #f7efe0; color: #22180e; }
.phone-pos .pos-bar { border-radius: 0; }
.phone-pos .add {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: #1f6a3a; color: #eaffef; font-weight: 700;
}
.phone-pos .sku { border-top: 1px solid #e4d6bb; color: #22180e; }
.phone-pos .sku small { color: #6b5a44; }
.phone-pos .billbar {
  margin: 12px; padding: 12px 14px; border-radius: 10px;
  background: #1f6a3a; color: #eaffef; font-weight: 700;
  display: flex; justify-content: space-between;
}
.post-list { display: grid; gap: 14px; margin-top: 22px; }
.post-list a { text-decoration: none; color: inherit; display: block; }
.post-list .card h3 { color: var(--paper-bright); }
.post-list .go { color: var(--amber); font-weight: 700; display: inline-block; margin-top: 12px; }
@media (min-width: 820px) {
  .post { padding-left: 7vw; padding-right: 7vw; }
}