/* Page-owned stylesheet: works with the restored 1.2.5 shared layout. */
main.blog-guide-page {
    box-sizing: border-box;
    width: 100%; max-width: 1264px; margin: 0 auto;
    padding: 48px 32px 72px; color: #171c32;
}
.blog-guide-page *, .blog-guide-page *::before { box-sizing: border-box; }
.blog-guide-page .page-head { margin: 0 0 28px; }
.blog-guide-page .page-head h1 { font-size: 38px; line-height: 1.3; margin: 8px 0 12px; }
.blog-guide-page .page-head p { color: #626b81; margin: 0; }
.blog-guide-page .blog-redemption {
    padding: 30px; border: 1px solid #e3def7; border-radius: 20px;
    background: #fff; box-shadow: 0 12px 38px rgba(35,44,88,.06);
}
.blog-guide-page .blog-guide-heading h2 { font-size: 27px; line-height: 1.4; margin: 8px 0 10px; }
.blog-guide-page .blog-guide-heading p { color: #626b81; margin: 0; }
.blog-guide-page .eyebrow { font-size: 13px; color: #705bc2; font-weight: 700; }
.blog-guide-page .blog-redemption-steps { display: flex; flex-wrap: wrap;
    gap: 0; padding: 0; margin: 24px -8px 8px; list-style: none; counter-reset: redeem-step;
}
.blog-guide-page .blog-redemption-steps li { flex: 0 0 auto;
    width: calc(25% - 16px); min-width: 0; margin: 0 8px 16px; padding: 20px 18px;
    background: #f7f6ff; border: 1px solid #ece8fb; border-radius: 14px;
    counter-increment: redeem-step;
}
.blog-guide-page .blog-redemption-steps li::before {
    content: counter(redeem-step, decimal-leading-zero); display: block;
    color: #6550c9; font-size: 24px; font-weight: 800; line-height: 1.4; margin-bottom: 14px;
}
.blog-guide-page .blog-redemption-steps h3 { font-size: 18px; line-height: 1.5; margin: 0 0 10px; }
.blog-guide-page .blog-redemption-steps p { font-size: 15px; line-height: 1.8; color: #626b81; margin: 0; }
.blog-guide-page p, .blog-guide-page h2, .blog-guide-page h3, .blog-guide-page a {
    overflow-wrap: break-word; word-wrap: break-word;
}
.blog-guide-page .blog-guide-note { color: #536177; font-size: 14px; line-height: 1.8; padding: 16px; background: #f1f7fc; border-radius: 12px; margin: 0; }
.blog-guide-page .blog-guide-actions { display: flex; flex-wrap: wrap; margin: 18px -6px -6px; gap: 0; }
.blog-guide-page .blog-guide-actions .btn { margin: 6px; min-height: 48px; max-width: calc(100% - 12px); padding: 12px 20px; line-height: 1.5; white-space: normal; text-align: center; }
.blog-guide-page a { cursor: pointer; touch-action: manipulation; }
.blog-guide-page a:focus { outline: 3px solid #8775ff; outline-offset: 3px; }
.blog-guide-page .blog-articles { margin-top: 44px; }
.blog-guide-page .article-grid { display: flex; flex-wrap: wrap;
    gap: 0; margin: 22px -10px 0;
}
.blog-guide-page .article-grid article {
    width: calc(33.333333% - 20px); min-width: 0; margin: 0 10px 20px;
    padding: 24px; border: 1px solid #e4e8f2; border-radius: 16px; background: #fff;
}
.blog-guide-page .article-grid h3 { font-size: 21px; line-height: 1.5; margin: 12px 0; }
.blog-guide-page .article-grid time { font-size: 13px; color: #626b81; }
.blog-guide-page .article-grid p { color: #626b81; line-height: 1.8; }
.blog-guide-page .article-grid a { display: inline-block; min-height: 44px; min-width: 44px; padding: 10px 0; line-height: 24px; color: #5745ea; }
@media (max-width: 1000px) {
    .blog-guide-page .blog-redemption-steps li { width: calc(50% - 16px); }
    .blog-guide-page .article-grid article { width: calc(50% - 20px); }
}
@media (max-width: 600px) {
    main.blog-guide-page { padding: 28px 16px 48px; }
    .blog-guide-page .page-head h1 { font-size: 30px; }
    .blog-guide-page .blog-redemption { padding: 20px 16px; border-radius: 16px; }
    .blog-guide-page .blog-guide-heading h2 { font-size: 23px; }
    .blog-guide-page .blog-redemption-steps { display: block; margin: 20px 0 16px; }
    .blog-guide-page .blog-redemption-steps li { width: 100%; margin: 0 0 12px; padding: 16px; }
    .blog-guide-page .blog-redemption-steps li::before { font-size: 20px; margin-bottom: 8px; }
    .blog-guide-page .blog-guide-actions { display: block; margin: 18px 0 0; }
    .blog-guide-page .blog-guide-actions .btn { display: block; width: 100%; max-width: 100%; margin: 0 0 12px; }
    .blog-guide-page .blog-articles { margin-top: 32px; }
    .blog-guide-page .article-grid { display: block; margin: 20px 0 0; }
    .blog-guide-page .article-grid article { width: 100%; margin: 0 0 16px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-guide-page a { transition: none; }
    .blog-guide-page .btn:hover { transform: none; }
}