/* Pose guides. Loaded after site.css, which supplies the colours, type and motion. */
.crumbs { padding: 8px 0 0; font-size: 14px; }
.crumbs a { color: var(--accent); text-decoration: none; font-weight: 600; }
.crumbs span { opacity: 0.6; }

article { padding: 24px 0 72px; }
.lede { max-width: 42em; }
.lede h1 { font-size: 48px; letter-spacing: -1.4px; }
.meta { margin: 16px 0 0; font-size: 14px; opacity: 0.75; }

.hero-shot { display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 40px; max-width: 42em; margin: 40px 0 8px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.hero-shot .phone { max-width: 250px; }
.hero-shot p { margin: 0; font-size: 18px; }

.prose { max-width: 42em; }
.prose h2 { margin: 48px 0 0; font-size: 30px; letter-spacing: -0.8px; }
.prose h3 { margin: 32px 0 0; font-size: 20px; }
.prose p { margin: 14px 0 0; }
.prose ul { margin: 14px 0 0; padding: 0; list-style: none; }
.prose li { position: relative; margin: 10px 0; padding-left: 28px; }
.prose li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
.prose .pull { margin: 32px 0 0; padding: 20px 24px; border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0; background: var(--card); font-size: 18px; }

/* The App Store block that closes every guide. */
.try { margin: 56px 0 0; padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); text-align: center; }
.try h2 { margin: 0; font-size: 28px; }
.try p { margin: 10px auto 0; max-width: 28em; }
.try .badge, .try .cta { margin-top: 24px; }

.more-guides { padding: 0 0 72px; }
.more-guides h2 { font-size: 28px; }

@media (max-width: 860px) {
  .lede h1 { font-size: 34px; letter-spacing: -1px; }
  .hero-shot { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .hero-shot .phone { margin: 0 auto; }
  .prose h2 { font-size: 25px; }
}