/* ==========================================================================
   Square Loop — Blog listing & article
   ========================================================================== */

.slb { --slb-max: 1240px; color: var(--sl-text); }
.slb-wrap { max-width: var(--slb-max); margin: 0 auto; padding: 0 24px; }
.slb a { text-decoration: none; }
.slb h1, .slb h2, .slb h3 { font-family: "Plus Jakarta Sans", sans-serif; color: var(--sl-heading); }

/* Buttons & chips */
.slb-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--sl-primary); color: #fff !important; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 10px; box-shadow: 0 8px 20px rgba(34,49,151,.25); transition: transform .2s var(--sl-ease), background .2s; }
.slb-btn:hover { background: var(--sl-primary-600); transform: translateY(-2px); }
.slb-btn--white { background: #fff; color: var(--sl-primary) !important; box-shadow: none; }
.slb-btn--white:hover { background: #fff; }
.slb-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.45); box-shadow: none; }
.slb-btn--ghost:hover { background: rgba(255,255,255,.1); }
.slb-btn--block { width: 100%; justify-content: center; margin-top: 18px; }
.slb-chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-primary) !important; background: var(--sl-primary-50); padding: 6px 12px; border-radius: 999px; }
.slb-chip:hover { background: var(--sl-primary); color: #fff !important; }
.slb-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-primary); margin: 0; }

/* Hero */
.slb-hero { background: #F7F8FD; position: relative; overflow: hidden; }
.slb-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 360px at 88% 0%, rgba(61,90,254,.12), transparent 70%), radial-gradient(480px 300px at 0% 100%, rgba(37, 211, 102,.08), transparent 70%); }
.slb-hero__inner { position: relative; padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.slb-hero__inner--post { max-width: 920px; padding-bottom: 150px; }
.slb-hero__title { font-size: 46px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -1px; margin: 4px 0 0; max-width: 900px; }
.slb-hero__lead { font-size: 18px; line-height: 1.65; max-width: 720px; margin: 0; }
.slb .rank-math-breadcrumb p { margin: 0; font-size: 14px; color: var(--sl-muted); }
.slb .rank-math-breadcrumb a { color: var(--sl-muted); }
.slb .rank-math-breadcrumb a:hover { color: var(--sl-primary); }
.slb .rank-math-breadcrumb .separator { margin: 0 6px; color: #A3ACCB; }
.slb .rank-math-breadcrumb .last { color: var(--sl-heading); font-weight: 600; }

/* Filters */
.slb-filters ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; }
.slb-filters a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--sl-border); background: #fff; color: var(--sl-text); font-weight: 600; font-size: 14px; transition: all .2s; }
.slb-filters a span { font-size: 12px; color: var(--sl-muted); background: var(--sl-soft); border-radius: 999px; padding: 1px 7px; }
.slb-filters a:hover { border-color: var(--sl-primary); color: var(--sl-primary); }
.slb-filters a[aria-current="page"] { background: var(--sl-primary); border-color: var(--sl-primary); color: #fff; box-shadow: 0 8px 20px rgba(34,49,151,.22); }
.slb-filters a[aria-current="page"] span { background: rgba(255,255,255,.18); color: #fff; }

/* Listing */
.slb-list { padding-top: 64px; padding-bottom: 88px; }
.slb-section-title { font-size: 28px !important; font-weight: 800 !important; margin: 0 0 24px; }
.slb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.slb-card { background: #fff; border: 1px solid var(--sl-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--sl-ease), box-shadow .25s var(--sl-ease); }
.slb-card:hover { transform: translateY(-4px); box-shadow: var(--sl-shadow); }
.slb-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sl-soft); }
.slb-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--sl-ease); }
.slb-card:hover .slb-card__img img { transform: scale(1.04); }
.slb-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; }
.slb-card__title { font-size: 19px !important; line-height: 1.35 !important; font-weight: 700 !important; margin: 2px 0 0; }
.slb-card__title a { color: var(--sl-heading); }
.slb-card__title a:hover { color: var(--sl-primary); }
.slb-card__excerpt { font-size: 15px; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slb-card__meta { margin-top: auto; padding-top: 8px; font-size: 13.5px; color: var(--sl-muted); display: flex; gap: 8px; }

.slb-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 64px; border-radius: 22px; }
.slb-card--featured .slb-card__img { aspect-ratio: auto; height: 100%; min-height: 340px; }
.slb-card--featured .slb-card__body { padding: 40px 40px; justify-content: center; gap: 14px; }
.slb-card--featured .slb-card__title { font-size: 30px !important; line-height: 1.25 !important; font-weight: 800 !important; }
.slb-card--featured .slb-card__excerpt { font-size: 16.5px; -webkit-line-clamp: 4; }
.slb-card--featured .slb-card__meta { margin-top: 0; }

.slb-pagination { margin-top: 48px; display: flex; justify-content: center; gap: 8px; }
.slb-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--sl-border); background: #fff; color: var(--sl-heading); font-weight: 600; }
.slb-pagination .page-numbers.current, .slb-pagination a.page-numbers:hover { background: var(--sl-primary); color: #fff; border-color: var(--sl-primary); }

/* CTA band */
.slb-cta { padding: 0 24px 96px; }
.slb-cta__inner { max-width: 1240px; margin: 0 auto; border-radius: 28px; padding: 72px 40px; text-align: center; color: #C3C9E6; background: linear-gradient(135deg, #0D1340, #223197); position: relative; overflow: hidden; }
.slb-cta__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 90% 0%, rgba(61,90,254,.45), transparent 70%), radial-gradient(420px 240px at 0% 100%, rgba(37, 211, 102,.18), transparent 70%); pointer-events: none; }
.slb-cta__inner > * { position: relative; }
.slb-cta__title { color: #fff !important; font-size: 36px !important; font-weight: 800 !important; margin: 0 0 12px; }
.slb-cta__inner p { font-size: 18px; max-width: 640px; margin: 0 auto; }
.slb-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------------- Article ---------------- */
.slb-hero__inner--post .slb-chip { margin-top: 6px; }
.slb-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 15px; color: var(--sl-muted); margin-top: 6px; }
.slb-byline strong { color: var(--sl-heading); }
.slb-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sl-primary), var(--sl-secondary)); color: #fff; font: 800 13px/1 "Plus Jakarta Sans", sans-serif; flex: none; }
.slb-avatar--lg { width: 60px; height: 60px; font-size: 18px; }

.slb-feature { margin: -120px auto 0; position: relative; z-index: 2; max-width: 1100px; }
.slb-feature img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--sl-shadow-lg); display: block; }

.slb-layout { display: grid; grid-template-columns: 64px minmax(0, 760px) 260px; justify-content: center; gap: 48px; padding-top: 56px; padding-bottom: 72px; align-items: start; }

.slb-share { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slb-share__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }
.slb-share a, .slb-share button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--sl-border); background: #fff; color: var(--sl-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all .2s; padding: 0; }
.slb-share a:hover, .slb-share button:hover { background: var(--sl-primary); color: #fff; border-color: var(--sl-primary); }
.slb-share .is-done { background: #16A34A !important; color: #fff !important; border-color: #16A34A !important; }

.slb-toc { position: sticky; top: 110px; background: #fff; border: 1px solid var(--sl-border); border-radius: 16px; padding: 22px; }
.slb-toc__title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); margin: 0 0 12px; }
.slb-toc ol { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.slb-toc li { font-size: 14px; line-height: 1.45; color: var(--sl-muted); }
.slb-toc a { color: var(--sl-text); }
.slb-toc a:hover { color: var(--sl-primary); }

/* Prose */
.slb-prose { font-size: 18px; line-height: 1.75; color: #353B52; }
.slb-prose > *:first-child { margin-top: 0; }
.slb-prose p { margin: 0 0 1.2em; }
.slb-prose .sl-lead { font-size: 20.5px; line-height: 1.7; color: var(--sl-heading); }
.slb-prose h2 { font-size: 29px !important; line-height: 1.3 !important; font-weight: 800 !important; margin: 1.8em 0 .6em; scroll-margin-top: 110px; letter-spacing: -.3px; }
.slb-prose h3 { font-size: 21px !important; line-height: 1.4 !important; font-weight: 700 !important; margin: 1.4em 0 .4em; }
.slb-prose a { color: var(--sl-primary); text-decoration: underline; text-decoration-color: rgba(34,49,151,.3); text-underline-offset: 3px; }
.slb-prose a:hover { text-decoration-color: var(--sl-primary); }
.slb-prose ul, .slb-prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.squareloop .slb-prose ul li { list-style: disc; }
.squareloop .slb-prose ol li { list-style: decimal; }
.slb-prose li { margin: 0 0 .5em; padding-left: .2em; }
.slb-prose li::marker { color: var(--sl-primary); font-weight: 700; }
.slb-prose strong { color: var(--sl-heading); }
.slb-prose figure { margin: 1.6em 0; overflow-x: auto; }
.slb-prose table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sl-border); border-radius: 14px; overflow: hidden; font-size: 15.5px; line-height: 1.5; }
.slb-prose th, .slb-prose td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--sl-border); vertical-align: top; }
.slb-prose thead th { background: var(--sl-primary); color: #fff; font-weight: 700; }
.slb-prose tbody tr:nth-child(even) td { background: var(--sl-soft); }
.slb-prose tbody tr:last-child td { border-bottom: 0; }
.slb-prose .sl-callout { background: linear-gradient(135deg, #EEF0FB, #F7F8FF); border: 1px solid #D6DBF3; border-left: 5px solid var(--sl-primary); border-radius: 16px; padding: 28px 30px; margin: 2em 0; font-size: 17px; }
.slb-prose .sl-callout h2 { font-size: 22px !important; margin: 0 0 .6em; color: var(--sl-primary); }
.slb-prose .sl-callout p:last-child, .slb-prose .sl-callout ul:last-child { margin-bottom: 0; }
.slb-prose .sl-sources { font-size: 14px; color: var(--sl-muted); border-top: 1px solid var(--sl-border); padding-top: 14px; }

/* FAQ */
.slb-faq { margin-top: 48px; }
.slb-faq > h2 { font-size: 29px !important; font-weight: 800 !important; margin: 0 0 18px; scroll-margin-top: 110px; }
.slb-faq details { border: 1px solid var(--sl-border); border-radius: 14px; background: #fff; margin-bottom: 12px; transition: box-shadow .2s, border-color .2s; }
.slb-faq details[open] { border-color: #C9CFEA; box-shadow: var(--sl-shadow); }
.slb-faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; position: relative; }
.slb-faq summary::-webkit-details-marker { display: none; }
.slb-faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--sl-primary); font-weight: 400; }
.slb-faq details[open] summary::after { content: "−"; }
.slb-faq summary h3 { font-size: 17.5px !important; font-weight: 700 !important; margin: 0; line-height: 1.4 !important; }
.slb-faq details p { margin: 0; padding: 0 22px 20px; font-size: 16.5px; line-height: 1.7; }

/* Inline CTA + author */
.slb-inline-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: #FFF9EE; border: 1px solid #F8DFAE; border-radius: 16px; padding: 22px 24px; }
.slb-inline-cta p { margin: 0; font-weight: 600; color: var(--sl-heading); font-size: 17px; flex: 1 1 320px; }
.slb-author { margin-top: 32px; display: flex; gap: 18px; align-items: flex-start; padding: 26px; border-radius: 16px; background: var(--sl-soft); border: 1px solid var(--sl-border); }
.slb-author p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.slb-author__name { font: 700 17px/1.3 "Plus Jakarta Sans", sans-serif !important; color: var(--sl-heading); margin-bottom: 6px !important; }

/* Related + contact */
.slb-related { background: var(--sl-soft); padding: 80px 0; }
.slb-contact { padding: 96px 0; }
.slb-contact__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.slb-contact__text h2 { font-size: 36px !important; font-weight: 800 !important; margin: 10px 0 12px; }
.slb-contact__text > p { font-size: 17.5px; line-height: 1.7; margin: 0 0 20px; }
.slb-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.slb-contact__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.slb-contact__list i { width: 38px; height: 38px; border-radius: 10px; background: var(--sl-primary-50); color: var(--sl-primary); display: inline-flex; align-items: center; justify-content: center; }
.slb-contact__list a { color: var(--sl-heading); }
.slb-contact__list a:hover { color: var(--sl-primary); }
.slb-contact__form { background: #fff; border: 1px solid var(--sl-border); border-radius: 22px; padding: 32px; box-shadow: 0 24px 60px rgba(13,19,64,.10); }

/* Responsive */
@media (max-width: 1199px) {
    .slb-layout { grid-template-columns: 56px minmax(0, 760px); }
    .slb-toc { display: none; }
}
@media (max-width: 1024px) {
    .slb-grid { grid-template-columns: repeat(2, 1fr); }
    .slb-card--featured { grid-template-columns: 1fr; }
    .slb-card--featured .slb-card__img { min-height: 0; aspect-ratio: 16 / 9; }
    .slb-contact__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .slb-wrap { padding: 0 18px; }
    .slb-hero__inner { padding-top: 36px; padding-bottom: 40px; }
    .slb-hero__inner--post { padding-bottom: 90px; }
    .slb-hero__title { font-size: 31px !important; letter-spacing: -.5px; }
    .slb-hero__lead { font-size: 16.5px; }
    .slb-grid { grid-template-columns: 1fr; gap: 20px; }
    .slb-card--featured .slb-card__body { padding: 24px 22px; }
    .slb-card--featured .slb-card__title { font-size: 23px !important; }
    .slb-feature { margin-top: -70px; }
    .slb-feature img { border-radius: 14px; }
    .slb-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
    .slb-share { position: static; flex-direction: row; justify-content: flex-start; order: 2; }
    .slb-prose { font-size: 17px; }
    .slb-prose .sl-lead { font-size: 18.5px; }
    .slb-prose h2 { font-size: 24px !important; }
    .slb-prose .sl-callout { padding: 22px 20px; }
    .slb-cta { padding: 0 16px 64px; }
    .slb-cta__inner { padding: 52px 22px; }
    .slb-cta__title { font-size: 27px !important; }
    .slb-related { padding: 56px 0; }
    .slb-contact { padding: 64px 0; }
    .slb-contact__text h2 { font-size: 28px !important; }
    .slb-contact__form { padding: 22px 18px; }
}

/* --------------------------------------------------------------------------
   Article featured image — matches the reference detail page exactly:
   16:9 frame (666 × 375), centred, 10px radius, width and upward overlap as
   a share of the page width per breakpoint (40%/-8% desktop … 80%/-34% mobile).
   -------------------------------------------------------------------------- */
.slb-single { --slb-img-w: 40%; --slb-img-up: 8vw; }
@media (max-width: 1366px) { .slb-single { --slb-img-w: 45%; --slb-img-up: 8vw; } }
@media (max-width: 1200px) { .slb-single { --slb-img-w: 45%; --slb-img-up: 10vw; } }
@media (max-width: 1024px) { .slb-single { --slb-img-w: 55%; --slb-img-up: 16vw; } }
@media (max-width: 880px)  { .slb-single { --slb-img-w: 60%; --slb-img-up: 22vw; } }
@media (max-width: 767px)  { .slb-single { --slb-img-w: 80%; --slb-img-up: 34vw; } }

.slb-single .slb-hero__inner--post { padding-bottom: calc(var(--slb-img-up) + 40px); }
.slb-single .slb-feature { max-width: none; width: 100%; padding: 0; margin: calc(var(--slb-img-up) * -1) 0 0; text-align: center; }
.slb-single .slb-feature img { display: inline-block; width: var(--slb-img-w); max-width: 100%; height: auto; aspect-ratio: 666 / 375; object-fit: cover; border-radius: 10px; box-shadow: none; vertical-align: top; }

/* Plain pages (legal) */
.slb-page__body { max-width: 820px; margin: 0 auto; padding: 56px 0 96px; }