/* Pelayar blog shares the Compass & Paper marketing tokens and components. */
.blog-hero { padding: clamp(100px, 10vw, 150px) 0 88px; border-bottom: 1px solid var(--page-border); background: #fff; }
.blog-hero h1 { max-width: 1050px; margin: 0; font-size: clamp(3.25rem, 7vw, 6.5rem); font-weight: 600; line-height: 1.03; letter-spacing: -.075em; }
.blog-hero h1 span { color: var(--page-accent); }
.blog-hero-bottom p { max-width: 590px; margin: 37px 0 0; color: var(--page-muted); font-size: 1.08rem; line-height: 1.68; }
.blog-index-intro { border-bottom: 1px solid var(--page-border); }
.blog-index-intro-inner { max-width: 780px; padding-block: 35px; color: var(--page-muted); line-height: 1.75; }
.blog-index-intro-inner p:last-child { margin-bottom: 0; }
.blog-stories { background: var(--page-surface); }
.blog-section-heading { margin-bottom: 34px; }
.blog-section-heading .eyebrow { margin-bottom: 18px; }
.blog-section-heading h2 { margin: 0; font-size: clamp(2.3rem, 4.8vw, 4.4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.065em; }
.blog-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 435px; overflow: hidden; border: 1px solid var(--page-border); border-radius: 12px; background: #fff; }
.blog-featured-image, .blog-card-image { display: block; overflow: hidden; background: #dce5ed; }
.blog-featured-image img, .blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-featured-image:hover img, .blog-card-image:hover img { transform: scale(1.025); }
.blog-featured-image .blog-image-fallback, .blog-card-image .blog-image-fallback { display: block; width: 100%; height: 100%; background: radial-gradient(ellipse at 15% 85%, #f1f2ff, transparent 48%), linear-gradient(135deg, #d2dfff, #91b0d3); }
.blog-featured-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px, 4vw, 62px); }
.blog-kicker { margin: 0; color: var(--page-soft); font-size: .67rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.blog-kicker span { padding-inline: 4px; }
.blog-featured h3 { margin: 23px 0 16px; font-size: clamp(1.7rem, 2.5vw, 2.65rem); font-weight: 600; line-height: 1.13; letter-spacing: -.055em; }
.blog-featured h3 a:hover, .blog-card h3 a:hover { color: var(--page-accent); }
.blog-excerpt { max-width: 430px; color: var(--page-muted); font-size: .88rem; line-height: 1.65; }
.blog-excerpt p { margin-bottom: 0; }
.blog-featured .text-link { margin-top: 27px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 18px; margin-top: 48px; }
.blog-card { min-width: 0; }
.blog-card-image { aspect-ratio: 1.38 / 1; border: 1px solid var(--page-border); border-radius: 9px; }
.blog-card-copy { position: relative; padding: 18px 24px 5px 0; }
.blog-card h3 { max-width: 340px; margin: 14px 0 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; letter-spacing: -.035em; }
.blog-card-arrow { position: absolute; right: 2px; bottom: 0; color: var(--page-accent); font-size: 1.15rem; }
.blog-card-arrow:hover { color: #303cb9; }
.blog-empty { margin: 0; color: var(--page-muted); }
.blog-article-hero { padding: 80px 0 55px; background: #fff; }
.blog-back-link { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 80px; color: var(--page-muted); font-size: .8rem; font-weight: 600; }
.blog-back-link:hover { color: var(--page-accent); }
.blog-article-hero .eyebrow { margin-bottom: 20px; }
.blog-article-hero h1 { max-width: 1050px; margin: 0; font-size: clamp(2.8rem, 6vw, 5.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -.07em; }
.blog-article-deck { max-width: 710px; margin-top: 30px; color: var(--page-muted); font-size: 1.12rem; line-height: 1.7; }
.blog-article-deck p:last-child { margin-bottom: 0; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; color: var(--page-soft); font-size: .76rem; font-weight: 600; }
.blog-article-cover { display: grid; place-items: center; overflow: hidden; width: 100%; max-height: 680px; margin: 0; border: 1px solid var(--page-border); border-radius: 12px; background: var(--page-surface); }
.blog-article-cover img, .blog-article-cover video { display: block; width: 100%; max-height: 680px; object-fit: cover; }
.blog-article-layout { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 780px) minmax(120px, 1fr); gap: 25px; padding-top: 76px; padding-bottom: 120px; }
.blog-article-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; padding-top: 7px; }
.blog-article-aside > span { color: var(--page-soft); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.blog-article-aside a { color: var(--page-accent); font-size: .73rem; font-weight: 600; }
.blog-prose { grid-column: 2; min-width: 0; color: var(--page-text); font-size: 1rem; line-height: 1.85; }
.blog-prose > *:first-child, .blog-prose .rich-text > *:first-child { margin-top: 0; }
.blog-prose h2 { margin: 2.7em 0 .75em; font-size: clamp(1.7rem, 2.5vw, 2.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -.045em; }
.blog-prose h3 { margin: 2em 0 .6em; font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em; }
.blog-prose p { margin: 0 0 1.45em; }
.blog-prose a:not(.text-link) { color: var(--page-accent); text-decoration: underline; text-underline-offset: 3px; }
.blog-prose ul, .blog-prose ol { margin-bottom: 1.5em; padding-left: 1.4em; }
.blog-prose li { margin: .45em 0; }
.blog-prose blockquote { padding: 8px 0 8px 25px; border-left: 3px solid var(--page-accent); color: var(--page-muted); font-size: 1.13rem; }
.blog-prose figure { margin: 2.4em 0; }
.blog-prose figure img, .blog-prose figure video { display: block; width: 100%; height: auto; border-radius: 8px; }
.blog-demo-link { padding: 21px 0; border-block: 1px solid var(--page-border); }
.blog-article-close { border-top: 1px solid #32475d; background: var(--page-navy); color: #fff; text-align: center; }
.blog-article-close .eyebrow { color: #c3d0db; }
.blog-article-close h2 { margin: 0 auto 30px; font-size: clamp(2.6rem, 5vw, 4.9rem); font-weight: 600; letter-spacing: -.065em; }
.blog-article-close .container-xl > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.blog-article-close .button-primary { background: #fff; color: var(--page-navy); }
.blog-article-close .button-primary:hover { background: #e9edff; color: var(--page-navy); }
.blog-article-close .button-outline { border-color: #92a5b6; color: #fff; }
.blog-article-close .button-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 991.98px) {
    .blog-featured { grid-template-columns: 1fr 1fr; }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-article-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 780px); }
}
@media (max-width: 767.98px) {
    .blog-hero { padding: 80px 0 70px; }
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-image { aspect-ratio: 1.5 / 1; }
    .blog-featured-copy { padding: 30px; }
    .blog-grid { grid-template-columns: 1fr; gap: 34px; }
    .blog-card-image { aspect-ratio: 1.5 / 1; }
    .blog-article-hero { padding-top: 60px; }
    .blog-back-link { margin-bottom: 60px; }
    .blog-article-layout { display: block; padding-top: 55px; padding-bottom: 85px; }
    .blog-article-aside { display: none; }
    .blog-footer-main { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .blog-hero h1 { font-size: 3.05rem; }
    .blog-article-hero h1 { font-size: 2.7rem; }
    .blog-article-close .container-xl > div { flex-direction: column; }
    .blog-article-close .button { width: 100%; justify-content: space-between; }
}