/* Keystay editorial pages: blog index, articles, FAQ. Loads AFTER landing.css
   and reuses its variables, header, footer, buttons and FAQ accordion styles. */

.page-main{padding:40px 0 40px}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{margin:0 0 22px;font-size:14px;color:var(--muted)}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li+li::before{content:"/";margin:0 8px;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}

/* ---------- Page head ---------- */
.page-head{max-width:760px;margin:0 0 30px}
.page-head h1{font-size:clamp(30px,4.6vw,44px)}
.page-head .post-meta{margin:14px 0 0;font:600 13px/1.4 "Source Sans 3",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--clay)}
.page-head .lead{margin:14px 0 0}

/* ---------- Blog index cards ---------- */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:760px}
.post-card{background:var(--white);border:1px solid var(--sand);border-radius:14px;padding:26px 24px}
.post-card .post-meta{font:600 13px/1.4 "Source Sans 3",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--clay);margin:0 0 8px}
.post-card h2{font-size:22px;line-height:1.25;margin:0}
.post-card h2 a{color:var(--spruce);text-decoration:none}
.post-card h2 a:hover,.post-card h2 a:focus-visible{text-decoration:underline}
.post-card .hook{margin:10px 0 0;color:var(--muted)}

/* ---------- Article body ---------- */
.prose{max-width:720px}
.prose p{margin:0 0 16px}
.prose h2{margin:40px 0 14px;font-size:clamp(23px,3vw,29px)}
.prose h3{margin:30px 0 10px;font:700 20px/1.3 Bitter,Georgia,serif;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:26px}
.prose li{margin:0 0 8px}
.prose a{color:var(--spruce)}
.prose strong{font-weight:600}
.prose code{font:500 15px/1.4 "IBM Plex Mono",ui-monospace,Menlo,monospace;background:var(--white);border:1px solid var(--sand);border-radius:6px;padding:1px 6px}
.prose hr{border:0;border-top:1px solid var(--sand);margin:36px 0 24px}
.prose .disclaimer{font-size:14px;color:var(--muted);font-style:italic}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;margin:0 0 18px;border:1px solid var(--sand);border-radius:12px;background:var(--white)}
.prose table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.prose th,.prose td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sand)}
.prose th+th,.prose th+td,.prose td+td{border-left:1px solid var(--sand)}
.prose tr:last-child th,.prose tr:last-child td{border-bottom:0}
.prose thead th{font:600 13px/1.4 "Source Sans 3",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--spruce);background:var(--paper)}
.prose tbody th{font-weight:600;color:var(--ink);background:var(--paper)}

/* ---------- Primary CTA box (one per article) ---------- */
.post-cta{max-width:720px;margin:44px 0 8px;background:var(--spruce);border-radius:18px;padding:36px 28px;color:#fff}
.post-cta h2{color:#fff;font-size:24px;margin:0}
.post-cta p{color:var(--clay-tint);margin:10px 0 0;max-width:52ch}
.post-cta .btn{background:var(--paper);color:var(--spruce);margin-top:22px}
.post-cta .btn:hover{background:#fff}

/* ---------- FAQ page ---------- */
.faq.faq-page{padding:0}
.faq-group{margin:0 0 36px}
.faq-group h2{font-size:24px;margin:0 0 16px}
.faq-related{max-width:760px;margin:8px 0 0;font-size:15px;color:var(--muted)}
.faq-related a{color:var(--spruce)}