/* Blog posts and index — layered on ../styles.css (same tokens, header and
   footer as the rest of the site; see how-it-works/index.html). */
.post {
  /* top/bottom only: .wrap supplies the side gutters */
  padding-top: 48px;
  padding-bottom: 88px;
  max-width: 760px;
  margin: 0 auto;
}
.post .eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 0.8em;
}
.post .eyebrow a { color: inherit; text-decoration: none; }
.post h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 0.4em;
}
.post .byline {
  font-size: 0.88rem;
  color: var(--slate);
  margin: 0 0 1.8em;
}
.post .lede {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--slate);
  margin: 0 0 1.6em;
}
.post h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 2.2em 0 0.6em;
  padding-top: 0.8em;
  border-top: 1px solid var(--line);
}
.post h3 {
  font-size: 1.12rem;
  margin: 1.6em 0 0.4em;
}
.post p, .post li {
  font-size: 1rem;
  line-height: 1.75;
}
.post ul, .post ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.post li { margin: 0 0 0.45em; }
.post strong { color: var(--ink); font-weight: 700; }
.post a.inline-link {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post .callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 1.6em 0;
}
.post .disclosure {
  border-left: 4px solid var(--green-deep);
}
.post figure {
  margin: 1.6em auto;
  text-align: center;
}
.post figure img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -14px rgba(27, 42, 65, 0.35);
}
.post figcaption {
  font-size: 0.84rem;
  color: var(--slate);
  margin-top: 0.7em;
}

/* Comparison table — scrolls sideways on phones instead of squashing. */
.table-scroll {
  overflow-x: auto;
  margin: 1.4em 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 0.9rem;
}
.compare th, .compare td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.compare thead th {
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }

.app-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 1.4em 0;
}
.app-card h3 { margin-top: 0; }
.app-card .meta {
  font-size: 0.86rem;
  color: var(--slate);
  margin: -0.2em 0 0.8em;
}
.app-card.ours { border-color: var(--green-deep); border-width: 2px; }

.post .cta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 1.2em;
}

/* Blog index */
.post-list { list-style: none; padding: 0; margin: 1.4em 0 0; }
.post-list li {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 14px;
}
.post-list a.title {
  font-family: var(--display, inherit);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.post-list a.title:hover { color: var(--green-deep); }
.post-list p { margin: 0.4em 0 0; color: var(--slate); font-size: 0.95rem; }

/* App icons — official App Store artwork (or a plain lettered tile for
   web-only tools without one), on comparison cards and table rows. */
.app-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.8em;
}
.app-card-head h3 { margin: 0; }
.app-card-head .meta { margin: 3px 0 0; }
.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  object-fit: cover;
}
.table-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  object-fit: cover;
}
.app-icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6B7A8F;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.table-icon.app-icon-text { font-size: 0.6rem; }
.app-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Three-step screenshot strip in our card; swipes sideways on phones. */
.shot-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.2em 0 1.4em;
}
.post .shot-strip figure { margin: 0; text-align: left; }
.post .shot-strip img {
  max-width: none;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px -12px rgba(27, 42, 65, 0.35);
}
.post .shot-strip figcaption {
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 0.6em;
}
@media (max-width: 600px) {
  .shot-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .post .shot-strip figure { scroll-snap-align: start; }
}
.compare tr.ours td { background: #EEF5EA; }

/* Two app screenshots side by side (stacks on phones). */
.shot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin: 1.4em 0;
}
.post .shot-pair figure { margin: 0; }
.post .shot-pair img { max-width: none; }
@media (max-width: 600px) {
  .shot-pair { grid-template-columns: 1fr; }
  .post .shot-pair img { max-width: 320px; }
}

/* Branded touches: "GFC tip" boxes, the usual-way vs GFC comparison,
   and the closing download banner. */
.brand-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #EEF5EA;
  border: 1px solid #CFE3C6;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 1.4em 0;
}
.brand-tip img { width: 40px; height: auto; flex-shrink: 0; margin-top: 2px; }
.post .brand-tip p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

.post ol.emoji-steps { list-style: none; padding-left: 0; }
.post ol.emoji-steps li { padding-left: 0; }

.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.4em 0;
}
.vs-col {
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
}
.vs-col h3 { margin: 0 0 0.5em; font-size: 1.05rem; }
.post .vs-col ul { list-style: none; padding: 0; margin: 0; }
.post .vs-col li { font-size: 0.95rem; margin: 0 0 0.45em; }
.vs-old { background: #F7F5F2; }
.vs-new { background: #EEF5EA; border: 2px solid var(--green-deep); }
@media (max-width: 600px) {
  .vs-grid { grid-template-columns: 1fr; }
}

.post .fine-print { font-size: 0.82rem; color: var(--slate); line-height: 1.55; }

.cta-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--green-deep), #1F5C33);
  color: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  margin: 2.2em 0 1.6em;
}
.cta-banner-icon { width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.4); }
.post .cta-banner p { margin: 0 0 0.3em; color: #fff; }
.post .cta-banner .cta-banner-title { font-size: 1.2rem; font-weight: 800; }
@media (max-width: 520px) {
  .cta-banner { flex-direction: column; align-items: flex-start; }
}
.post ul.emoji-list { list-style: none; padding-left: 0; }