@import url("/legal.css");

.blog-wrap { max-width: 760px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 2rem) 4rem; }
.blog-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: #c5f135; margin: 0 0 0.6rem; }
.blog-wrap h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0 0 1rem; }
.blog-meta { color: #a3a3a3; font-size: 0.92rem; margin: 0 0 2.2rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.blog-lead { font-size: 1.18rem; color: #e9e9e9; line-height: 1.7; margin: 0 0 1.8rem; }
.blog-wrap h2 { color: #fff; font-size: 1.45rem; margin: 2.6rem 0 0.8rem; letter-spacing: -0.01em; }
.blog-wrap h3 { color: #fff; font-size: 1.12rem; margin: 1.8rem 0 0.5rem; }
.blog-wrap p, .blog-wrap li { font-size: 1.04rem; line-height: 1.8; color: #dcdcdc; }
.blog-wrap ul, .blog-wrap ol { padding-left: 1.3rem; }
.blog-wrap figure { margin: 2rem 0; }
.blog-wrap figure img { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: #fff; }
.blog-wrap figcaption { color: #a3a3a3; font-size: 0.88rem; margin-top: 0.6rem; text-align: center; }
.blog-wrap code { background: rgba(255,255,255,0.08); padding: 0.12em 0.42em; border-radius: 5px; font-size: 0.92em; }
.blog-wrap blockquote { margin: 1.8rem 0; padding: 1rem 1.3rem; border-left: 3px solid #c5f135; background: rgba(197,241,53,0.06); border-radius: 0 12px 12px 0; color: #f0f0f0; }
.blog-wrap blockquote p { margin: 0; }
.blog-table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; }
.blog-wrap table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 560px; }
.blog-wrap th, .blog-wrap td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); color: #e2e2e2; }
.blog-wrap th { background: rgba(255,255,255,0.05); color: #fff; font-weight: 600; }
.blog-wrap tr:last-child td { border-bottom: 0; }
.blog-cta { margin-top: 3rem; padding: 1.4rem 1.5rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
.blog-cta p { margin: 0 0 0.9rem; }
.blog-btns { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.blog-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,0.25); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.blog-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.blog-btn--primary { background: #c5f135; border-color: #c5f135; color: #0a0a0a; }
.blog-btn--primary:hover { background: #d4ff40; color: #0a0a0a; }

/* blog index */
.post-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.post-card { display: block; padding: 1.4rem 1.5rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); text-decoration: none; transition: border-color .2s, transform .2s; }
.post-card:hover { border-color: rgba(197,241,53,0.5); transform: translateY(-2px); }
.post-card h2 { margin: 0.3rem 0 0.5rem; font-size: 1.3rem; color: #fff; }
.post-card p { margin: 0; color: #c9c9c9; font-size: 0.98rem; line-height: 1.65; }
.post-card .post-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c5f135; }
.post-card .post-meta { margin-top: 0.8rem; font-size: 0.85rem; color: #9a9a9a; }