.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 12px; font: 15px/1 var(--zf-primary-semibold); border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--card); background: linear-gradient(135deg, var(--orange), #ff5d00); box-shadow: var(--orange-shadow); }
.btn-primary:hover { box-shadow: 0 18px 32px rgba(255, 122, 0, .32); color: var(--card); }
.btn-secondary { color: var(--navy); background: var(--card); border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(13, 27, 51, .05); }
.btn-secondary:hover { color: var(--navy); border-color: rgba(13, 27, 51, .32); }
.btn-small { min-height: 42px; padding: 0 20px; border-radius: 10px; }
.btn-white { color: var(--orange); background: var(--card); }
.btn-outline-white { color: var(--card); border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .08); }
.full { width: 100%; }
.rl-badge { display: inline-block; background: var(--orange); color: var(--card); font: 11px/1 var(--zf-primary-bold); padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 1px; transition: opacity var(--ease-fast); }
.rl-badge:hover { opacity: .85; color: var(--card); }
.rl-post-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--soft-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.rl-post-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(13, 27, 51, .13); border-color: rgba(255, 122, 0, .28); }
.rl-post-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.rl-post-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; }
.rl-post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rl-post-card__date, .rl-reading-time { font: 13px/1 var(--zf-primary-medium); color: var(--muted); }
.rl-reading-time::before { content: 'Time '; }
.rl-post-card__title { font: 20px/1.2 var(--zf-primary-semibold); letter-spacing: 0; color: var(--navy); margin-bottom: var(--space-3); flex: 1; }
.rl-post-card__title a:hover { color: var(--orange); }
.rl-post-card__excerpt { font: 15px/1.5 var(--zf-primary-regular); color: var(--muted); margin-bottom: var(--space-4); }
.rl-post-card__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); margin-top: auto; }
.rl-post-card__author { display: flex; align-items: center; gap: var(--space-2); font: 13px/1 var(--zf-primary-medium); color: var(--muted); }
.rl-post-card__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.rl-post-card__read-more { font: 14px/1 var(--zf-primary-semibold); color: var(--orange); }
.rl-post-card__read-more:hover { text-decoration: underline; color: var(--orange); }
.rl-post-card--featured { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); min-height: 400px; margin-bottom: var(--space-12); }
.rl-post-card--featured .rl-post-card__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.rl-post-card--featured .rl-post-card__body { padding: var(--space-10); justify-content: center; }
.rl-post-card--featured .rl-post-card__title { font: 30px/1.15 var(--zf-primary-semibold); letter-spacing: 0; }
.rl-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.rl-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: 13px/1 var(--zf-primary-medium); color: var(--muted); padding-block: var(--space-4); max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.rl-breadcrumbs a:hover { color: var(--orange); }
.rl-breadcrumbs__sep { opacity: .5; }
.rl-breadcrumbs__current { color: var(--ink); }
.rl-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--orange); z-index: 9999; transition: width 100ms linear; }
.rl-share { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-block: var(--space-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-block: var(--space-8); }
.rl-share__label { font: 13px/1 var(--zf-primary-bold); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.rl-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font: 13px/1 var(--zf-primary-semibold); cursor: pointer; border: none; transition: opacity var(--ease-fast), transform var(--ease-fast); }
.rl-share__btn:hover { opacity: .85; transform: translateY(-1px); }
.rl-share__btn--twitter { background: #1da1f2; color: var(--card); }
.rl-share__btn--linkedin { background: #0077b5; color: var(--card); }
.rl-share__btn--facebook { background: #1877f2; color: var(--card); }
.rl-share__btn--copy { background: var(--cream); color: var(--navy); border: 1px solid var(--line); }
.rl-author-box { display: flex; gap: var(--space-6); align-items: flex-start; padding-block: var(--space-10); background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-block: var(--space-10); }
.rl-author-box__media { flex: 0 0 auto; }
.rl-author-box__avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rl-author-box__content { min-width: 0; }
.rl-author-box__label { font: 12px/1 var(--zf-primary-bold); letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-3); }
.rl-author-box__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.rl-author-box__name { font: 26px/1.1 var(--zf-primary-semibold); color: var(--ink); display: block; }
.rl-author-box__name:hover { color: var(--orange); }
.rl-author-box__count { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font: 13px/1 var(--zf-primary-semibold); color: var(--muted); }
.rl-author-box__bio { font: 15px/1.55 var(--zf-primary-regular); color: var(--ink); margin: 0 0 var(--space-4); max-width: 720px; }
.rl-author-box__bio p { margin: 0 0 var(--space-3); color: var(--ink); }
.rl-author-box__bio p:last-child { margin-bottom: 0; }
.rl-author-box__bio a { color: var(--ink); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.rl-author-box__bio a:hover { color: var(--orange); }
.rl-author-box__link { font: 15px/1 var(--zf-primary-semibold); color: var(--orange); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.rl-toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--soft-shadow); position: sticky; top: 80px; }
.rl-toc__title { font: 13px/1 var(--zf-primary-bold); letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--orange); }
.rl-toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.rl-toc__list a { font: 14px/1.4 var(--zf-primary-medium); color: var(--muted); display: block; padding: 3px 0 3px var(--space-3); border-left: 2px solid transparent; transition: color var(--ease-fast), border-color var(--ease-fast); }
.rl-toc__list a:hover, .rl-toc__list a.is-active { color: var(--orange); border-left-color: var(--orange); }
.rl-toc__list .rl-toc--h3 { padding-left: var(--space-6); }
.rl-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6); }
.rl-tag { display: inline-block; padding: 6px 14px; background: var(--cream); color: var(--navy); border-radius: 999px; font: 13px/1 var(--zf-primary-medium); border: 1px solid var(--line); transition: background var(--ease-fast), color var(--ease-fast); }
.rl-tag:hover { background: var(--orange); color: var(--card); border-color: var(--orange); }
.rl-pagination { display: flex; justify-content: center; gap: var(--space-2); padding-block: var(--space-12); }
.rl-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rl-pagination a, .rl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-3); border-radius: 10px; font: 14px/1 var(--zf-primary-semibold); border: 1px solid var(--line); color: var(--ink); transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast); }
.rl-pagination a:hover { background: var(--orange); color: var(--card); border-color: var(--orange); }
.rl-pagination .current { background: var(--navy); color: var(--card); border-color: var(--navy); }
.rl-cta-banner { border-radius: 24px; padding: 48px 32px; text-align: center; background: linear-gradient(135deg, #ff8b00, #ff6500); box-shadow: 0 24px 60px rgba(255, 122, 0, .22); color: var(--card); margin-block: var(--space-10); }
.rl-cta-banner h2 { color: var(--card); font: 36px/1.1 var(--zf-primary-semibold); letter-spacing: 0; margin-bottom: var(--space-3); }
.rl-cta-banner p { color: rgba(255, 255, 255, .86); font-size: 18px; margin-bottom: var(--space-6); }
.rl-search-form { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--soft-shadow); }
.rl-search-form__input { flex: 1; min-width: 0; padding: 12px 16px; border: none; outline: none; font: 15px/1 var(--zf-primary-regular); color: var(--ink); background: transparent; }
.rl-search-form__btn { padding: 12px 20px; background: var(--orange); border: none; cursor: pointer; font: 14px/1 var(--zf-primary-semibold); color: var(--card); transition: background var(--ease-fast); }
.sticky-mobile-cta { display: none; }
