/* Blog index + article layout */
.gup-article-page, .gup-blog { font-family: Lato, Roboto, Arial, sans-serif; color: #222; }
.gup-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fdeeee; color: #CA3A3A; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* index */
.gup-blog { background: #f4f6f8; padding: 48px 20px 72px; }
.gup-blog__inner { max-width: 1180px; margin: 0 auto; }
.gup-blog__lead { max-width: 760px; margin: 0 auto 32px; text-align: center; color: #556; font-size: 1.05rem; line-height: 1.65; }
.gup-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gup-post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e9ee; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.gup-post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(62, 81, 111, .16); }
.gup-post-card__img { display: block; aspect-ratio: 1200 / 630; background: #3E516F; overflow: hidden; }
.gup-post-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gup-post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.gup-post-card__body strong { color: #3E516F; font-size: 1.12rem; line-height: 1.3; }
.gup-post-card__desc { color: #556; font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gup-post-card__meta { margin-top: auto; color: #CA3A3A; font-weight: 700; font-size: .9rem; }

/* article */
.gup-article-page { background: #fff; }
.gup-article { max-width: 820px; margin: 0 auto; padding: 32px 20px 72px; }
.gup-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; color: #6b7690; margin-bottom: 18px; }
.gup-crumbs a { color: #3E516F; text-decoration: none; }
.gup-crumbs a:hover { text-decoration: underline; }
.gup-article__head h1 { margin: 12px 0 12px; font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.18; color: #1f2d47; }
.gup-meta { margin: 0 0 22px; color: #6b7690; font-size: .95rem; }
.gup-article__hero { margin: 0 0 28px; border-radius: 18px; overflow: hidden; border: 1px solid #e5e9ee; }
.gup-article__hero img { display: block; width: 100%; height: auto; }
.gup-takeaways { background: #f4f6f8; border-left: 4px solid #CA3A3A; border-radius: 12px; padding: 20px 24px; margin: 0 0 32px; }
.gup-takeaways h2 { margin: 0 0 10px; font-size: 1.15rem; color: #3E516F; }
.gup-takeaways ul { margin: 0; padding-left: 20px; }
.gup-takeaways li { margin: 6px 0; line-height: 1.55; }
.gup-article__body { font-size: 1.06rem; line-height: 1.75; color: #2b3345; }
.gup-article__body h2 { margin: 40px 0 12px; font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.25; color: #3E516F; }
.gup-article__body p { margin: 0 0 16px; }
.gup-article__body ul, .gup-article__body ol { margin: 0 0 20px; padding-left: 24px; }
.gup-article__body li { margin: 8px 0; }
.gup-article__body a, .gup-takeaways a, .gup-faq a { color: #204ce5; text-decoration: underline; text-underline-offset: 2px; }
.gup-article__body img { max-width: 100%; height: auto; }
.gup-figure { margin: 28px 0; text-align: center; }
.gup-figure img { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; object-fit: contain; background: #f4f6f8; border: 1px solid #e5e9ee; border-radius: 16px; padding: 14px; }
.gup-figure figcaption { margin-top: 8px; font-size: .9rem; color: #6b7690; }
.gup-article__body .wp-block-image { margin: 24px 0; text-align: center; }

.gup-faq-block { margin-top: 44px; }
.gup-faq-block h2 { margin: 0 0 14px; font-size: 1.6rem; color: #3E516F; }
.gup-faq { display: grid; gap: 12px; }
.gup-faq details { background: #fff; border: 1px solid #e5e9ee; border-radius: 12px; padding: 14px 18px; }
.gup-faq summary { cursor: pointer; font-weight: 700; color: #3E516F; }
.gup-faq p { margin: 10px 0 0; color: #556; line-height: 1.65; }

.gup-cta-card { margin: 44px 0; padding: 32px 28px; border-radius: 18px; background: #3E516F; color: #fff; text-align: center; }
.gup-cta-card h2 { margin: 0 0 10px; color: #fff; font-size: 1.6rem; }
.gup-cta-card p { margin: 0 auto 20px; max-width: 560px; line-height: 1.65; color: #e6ecf7; }
.gup-cta-card__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gup-btn-red, .gup-btn-ghost { display: inline-block; padding: 13px 26px; border-radius: 999px; font-weight: 700; text-decoration: none !important; }
.gup-btn-red { background: #CA3A3A; color: #fff !important; }
.gup-btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .55); }

.gup-related-posts h2 { margin: 0 0 16px; font-size: 1.6rem; color: #3E516F; }
.gup-post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gup-post-grid--3 .gup-post-card__desc { display: none; }
.gup-post-grid--3 .gup-post-card__body strong { font-size: 1rem; }

@media (max-width: 960px) { .gup-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .gup-post-grid--3 { grid-template-columns: 1fr; } .gup-article { padding-top: 20px; } }
@media (max-width: 600px) { .gup-post-grid { grid-template-columns: 1fr; } .gup-takeaways { padding: 16px 18px; } .gup-cta-card { padding: 26px 18px; } .gup-article__body { font-size: 1.02rem; } }
.gup-article__body a, .gup-takeaways a, .gup-faq a { font-size: inherit; font-family: inherit; line-height: inherit; }

/* FAQ page */
.gup-article--faq .gup-meta { font-size: 1.05rem; line-height: 1.65; max-width: 720px; }
.gup-faq-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 8px; }
.gup-faq-nav a { padding: 8px 16px; border: 1px solid #cfd8ec; border-radius: 999px; background: #fff; color: #3E516F; font-weight: 700; font-size: .92rem; text-decoration: none; }
.gup-faq-nav a:hover { background: #3E516F; color: #fff; border-color: #3E516F; }
.gup-article--faq .gup-faq-block { scroll-margin-top: 90px; }

/* Legal pages */
.gup-legal__intro { font-size: 1.08rem; line-height: 1.7; color: #2b3345; margin: 0 0 20px; }
.gup-legal__toc { background: #f4f6f8; border-radius: 12px; padding: 16px 22px; margin: 0 0 28px; }
.gup-legal__toc ol { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.gup-legal__toc a { color: #204ce5; }
.gup-legal .gup-article__body h2 { scroll-margin-top: 90px; }
@media (max-width: 600px) { .gup-legal__toc ol { columns: 1; } }

/* Article enhancements: quick answer, TOC, tables, inline CTA, author box */
.gup-quick { background: #fff7f7; border: 1px solid #f3c9c9; border-radius: 14px; padding: 18px 22px; margin: 0 0 20px; }
.gup-quick__label { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #CA3A3A; }
.gup-quick p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: #2b3345; }
.gup-toc { border: 1px solid #e5e9ee; border-radius: 12px; padding: 16px 22px; margin: 0 0 32px; background: #fff; }
.gup-toc strong { color: #3E516F; }
.gup-toc ol { margin: 8px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.gup-toc li { margin: 4px 0; break-inside: avoid; }
.gup-toc a { color: #204ce5; text-decoration: none; }
.gup-toc a:hover { text-decoration: underline; }
.gup-article__body h2 { scroll-margin-top: 90px; }
.gup-article__body .gup-tablewrap { margin: 22px 0 28px; }
.gup-article__body .gup-table { width: 100%; border-collapse: collapse; font-size: .96rem; line-height: 1.5; background: #fff; }
.gup-article__body .gup-table caption { caption-side: top; text-align: left; padding: 12px 14px; font-weight: 700; color: #3E516F; background: #f4f6f8; }
.gup-article__body .gup-table th, .gup-article__body .gup-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #eef1f5; }
.gup-article__body .gup-table thead th { background: #3E516F; color: #fff; }
.gup-article__body .gup-table tbody th { background: #f8fafc; color: #3E516F; width: 24%; }
.gup-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e9ee; border-radius: 12px; }
.gup-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 30px 0; padding: 18px 22px; border-radius: 14px; background: #3E516F; color: #fff; }
.gup-inline-cta strong { display: block; font-size: 1.05rem; }
.gup-inline-cta span { display: block; font-size: .93rem; color: #dbe4f5; margin-top: 2px; }
.gup-author { display: flex; gap: 16px; margin: 0 0 40px; padding: 20px 22px; border: 1px solid #e5e9ee; border-radius: 14px; background: #f8fafc; }
.gup-author__ic { flex: 0 0 52px; height: 52px; border-radius: 14px; background: #fdeeee; color: #CA3A3A; display: inline-flex; align-items: center; justify-content: center; }
.gup-author p { margin: 4px 0 0; font-size: .95rem; line-height: 1.6; color: #556; }
.gup-author a { color: #204ce5; }
@media (max-width: 600px) { .gup-toc ol { columns: 1; } .gup-inline-cta { padding: 16px; } .gup-author { flex-direction: column; } }

.gup-terms { margin: 0 0 24px; display: grid; gap: 10px; }
.gup-terms > div { background: #f8fafc; border: 1px solid #e5e9ee; border-radius: 12px; padding: 12px 16px; }
.gup-terms dt { font-weight: 800; color: #3E516F; margin: 0 0 2px; }
.gup-terms dd { margin: 0; color: #2b3345; line-height: 1.6; }
