/* Blog template styles. Loaded only by blog pages, after site.css. Tokens come from site.css. */

/* Reading progress bar: above the founder bar (z-index 101) */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:102;pointer-events:none}
.read-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7C3AED,#A678F5);transition:width .12s linear}
@media(prefers-reduced-motion:reduce){.read-progress span{transition:none}}

/* Header: tag, title, breadcrumb, byline */
.page-hero .blog-head{max-width:1120px;margin:0 auto}
.blog-head h1{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;text-wrap:balance;font-size:clamp(30px,4.6vw,50px);line-height:1.08;margin:0 0 18px;max-width:900px}
.blog-head .lede{max-width:720px}
.post-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--purple-deep);border:1px solid var(--purple-line);border-radius:999px;padding:7px 12px;margin-bottom:18px;background:rgba(255,255,255,.6);text-decoration:none}
a.post-tag:hover{background:var(--purple-soft)}
.breadcrumb{margin-bottom:18px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:13px;color:var(--gray)}
.breadcrumb li{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gray)}
.breadcrumb li+li::before{content:">";color:var(--muted)}
.breadcrumb a{color:var(--gray);text-decoration:none}
.breadcrumb a:hover{color:var(--purple);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
.byline,.article .byline{font-size:14px;color:var(--gray);margin:0}
.byline strong{color:var(--ink);font-weight:600}
.page-hero .blog-head.post-head{max-width:none;margin:0;min-width:0}
.post-head h1{font-size:clamp(30px,4.2vw,46px);max-width:none}

/* Layout: one grid holds header, article and sidebar so the sidebar starts level with the category pill */
.page-hero.post-page::before{bottom:auto;height:520px}
html .page-hero.post-page{padding:calc(100px + var(--bar-h,0px)) 0 0}
.article.post-layout{max-width:1168px;display:block;padding-bottom:64px}
.post-main{min-width:0}
.post-side{min-width:0;margin-top:32px}
.post-layout .related{margin-top:56px}
@media(min-width:1024px){
  html .page-hero.post-page{padding-top:calc(112px + var(--bar-h,0px))}
  .article.post-layout{display:grid;grid-template-columns:minmax(0,720px) 340px;grid-template-areas:"head side" "main side" "cta cta" "related related";justify-content:space-between;column-gap:48px;align-items:start}
  .post-head{grid-area:head}
  .post-main{grid-area:main}
  .post-side{grid-area:side;align-self:stretch;margin-top:0;padding-top:var(--side-top,45px)}
  .post-layout .related{grid-area:related}
  .post-layout .end-cta{grid-area:cta;margin-top:48px;grid-template-columns:minmax(0,1fr) auto;padding:32px 40px;column-gap:40px}
  .post-layout .end-cta h2,.post-layout .end-cta p.note,.post-layout .end-cta p.end-founder{grid-column:1}
  .post-layout .end-cta .btn-cta{grid-column:2;grid-row:1/span 3;align-self:center;justify-self:end;margin-top:0}
}
@media(min-width:768px){.article .end-cta h2{white-space:nowrap}}

/* TL;DR */
.article .tldr{background:var(--purple-soft);border-radius:var(--r-card);padding:22px 26px;margin:26px 0 8px}
.article .tldr h2{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-deep);margin:0 0 10px;line-height:1.2}
.article .tldr ul{margin:0 0 0 20px}
.article .tldr li{color:var(--ink);margin-bottom:6px;font-size:17px}
.article .tldr li:last-child{margin-bottom:0}

/* Inline CTA: one natural sentence, not a banner */
.article p.inline-cta{border-left:3px solid var(--purple-line);padding-left:16px;color:var(--ink);margin:24px 0}
.article p.inline-cta a{font-weight:600}
.article blockquote{margin:0 0 22px;padding:18px 22px;background:var(--purple-soft);border-left:3px solid var(--purple-line);border-radius:var(--r-card);overflow-wrap:anywhere}
.article blockquote p{color:var(--ink);margin-bottom:12px}
.article blockquote p:last-child{margin-bottom:0}

/* CTA box: shared by the end-of-post card and the sticky sidebar box. Purple-only gradient, white text. */
.end-cta,.side-cta{background:linear-gradient(135deg,#8650F0 0%,#7C3AED 45%,#4C1D95 100%);border-radius:var(--r-card);box-shadow:0 18px 40px -14px rgba(76,29,149,.45);color:#fff}
.article .end-cta h2,.article .side-cta h3{font-family:var(--font-head);font-weight:800;letter-spacing:-.035em;line-height:1.06;color:#fff;text-wrap:balance}
.article .side-cta p{color:#fff;font-weight:500}
.end-cta{margin:48px 0 0;padding:28px 32px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:6px 28px}
.article .end-cta h2{font-size:clamp(26px,6.4vw,32px);margin:0}
.end-cta .btn-cta{justify-self:start;margin-top:14px;order:5}
.article .end-cta p.note,.article .side-cta p.note{font-size:13px;font-weight:500;margin:12px 0 0;color:#EDE4FF}
.article .end-cta p.note{margin:8px 0 0}
.article .end-cta p.end-founder{display:none;font-size:14px;font-weight:600;margin:0;color:#fff}
html.founder-open .end-cta p.end-founder{display:block}
.btn-cta{display:inline-block;background:var(--purple);color:#fff;padding:15px 28px;border-radius:var(--r-btn);font-size:16px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-primary);transition:transform .2s,background .2s}
.btn-cta:hover{transform:translateY(-1px);background:var(--purple-deep);color:#fff}
.btn-cta:focus-visible{outline:2px solid var(--purple-deep);outline-offset:3px}
.end-cta .btn-cta,.side-cta .btn-cta{background:#fff;color:#4C1D95;box-shadow:0 6px 16px -6px rgba(24,8,56,.5)}
.end-cta .btn-cta:hover,.side-cta .btn-cta:hover{background:#fff;color:#4C1D95;transform:translateY(-1px)}
.end-cta .btn-cta:focus-visible,.side-cta .btn-cta:focus-visible{outline-color:#fff}

/* Sidebar: author (no box) then sticky CTA */
.author-block{margin:0 0 18px}
.author-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.author-avatar{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#7C3AED,#A678F5);color:#fff;font-weight:800;font-size:18px}
.author-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article .author-block h3{margin:0;font-size:16px;font-weight:800;line-height:1.2}
.article .author-block p{font-size:14px;line-height:1.45;margin:0 0 10px;color:#3F3F46}
.author-social{display:flex;gap:14px}
.author-social a{display:inline-flex;width:20px;height:20px;padding:6px;margin:-6px;box-sizing:content-box;color:#8A8A93;transition:color .2s}
.author-social a:hover{color:#0A0A0B}
.author-social a:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
.author-social svg{width:20px;height:20px;display:block;fill:currentColor}

/* Sticky CTA: desktop only. Sits below the nav island and founder bar. blog.js ends the aside at the article's second to last line and fades the box while the end card is on screen. */
.side-cta{display:none}
@media(min-width:1024px){
  .side-cta{display:block;position:sticky;top:calc(96px + var(--bar-h,0px));padding:20px 22px 18px;transition:opacity .25s,visibility .25s}
  .side-cta.is-faded{opacity:0;visibility:hidden;pointer-events:none}
  .article .side-cta h3{font-size:30px;margin:0 0 10px}
  .article .side-cta p{font-size:15px;line-height:1.45;margin:0 0 14px}
  .side-cta .btn-cta{display:block;text-align:center;padding:13px 22px}
  .article .side-cta p.note{text-align:center;margin-top:10px}
  .article .side-cta p.side-founder{display:none;font-size:13px;font-weight:600;margin:8px 0 0;color:#fff;text-align:center}
  html.founder-open .side-cta p.side-founder{display:block}
}
@media(prefers-reduced-motion:reduce){.side-cta{transition:none}}

/* Related posts: same card as the blog index */
.article .related{background:none;border-radius:0;padding:0}
.article .related h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;font-size:clamp(28px,4vw,38px);line-height:1.1;margin:0 0 24px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
@media(max-width:1023px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.related-grid{grid-template-columns:minmax(0,1fr)}}
.article .related .bc-body h3{margin:0 0 10px;font-size:19px}
.article .related .bc-body p{font-size:15px;line-height:1.5;color:var(--gray);margin:0 0 16px}

/* Blog index */
.blog-head .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{display:inline-block;font-size:14px;font-weight:600;color:var(--gray);text-decoration:none;border:1px solid var(--hairline);background:rgba(255,255,255,.8);border-radius:999px;padding:9px 16px;transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--purple-line);color:var(--purple-deep)}
.chip[aria-current="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.chip:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.article.blog-index{max-width:1168px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
@media(max-width:1023px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.blog-grid{grid-template-columns:minmax(0,1fr)}}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-soft);text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.blog-card:hover{transform:translateY(-3px);border-color:var(--purple-line)}
.blog-card:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.blog-card[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-card:hover{transition:none;transform:none}}
/* Card image: brand gradient plus a flat illustration at assets/blog/<slug>.svg (480x270, transparent). Tint comes from data-category. */
.bc-media{--t1:#F1EBFE;--t2:#FBEEFF;--t3:#FFE9DC;position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--t1) 0%,var(--t2) 55%,var(--t3) 100%)}
.blog-card[data-category="video-tips"] .bc-media{--t1:#FBEEFF;--t2:#FFE9DC;--t3:#F1EBFE}
.blog-card[data-category="social-strategy"] .bc-media{--t1:#FFE9DC;--t2:#F1EBFE;--t3:#FBEEFF}
.blog-card[data-category="compare"] .bc-media{--t1:#F1EBFE;--t2:#FFE9DC;--t3:#FBEEFF}
.bc-media img{position:absolute;inset:0;width:100%;height:100%;display:block}
.bc-media .post-tag{position:absolute;left:16px;top:16px;margin:0}
.blog-card[data-category="video-tips"] .bc-media .post-tag{left:auto;right:16px}
.bc-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.bc-date{font-size:13px;color:var(--muted);margin-bottom:8px}
.bc-body h3{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;font-size:19px;line-height:1.22;margin:0 0 10px;color:var(--ink)}
.bc-body p{font-size:15px;line-height:1.5;color:var(--gray);margin:0 0 16px}
.bc-link{margin-top:auto;font-size:14px;font-weight:700;color:var(--purple)}
.blog-card:hover .bc-link{text-decoration:underline;text-underline-offset:3px}
.blog-empty{display:none;margin-top:36px;color:var(--gray)}

@media(max-width:768px){
  .article .tldr{padding:20px}
  .end-cta{padding:24px 22px}
  .breadcrumb a{display:inline-block;padding:8px 0}
}

/* Compare posts */
.post-main .meta{font-size:14px;color:var(--gray);margin:18px 0 6px}
.post-main .best{margin:-6px 0 12px;color:var(--ink)}
.post-main .pick{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#A678F5);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;-webkit-text-fill-color:#fff}
.post-main .tool-links{font-size:15px}

/* Contrast lines and tools table */
.post-main .contrast{margin:10px 0 0;color:var(--gray)}
.post-main .contrast strong{font-weight:600;color:var(--ink)}
.table-wrap .tools-table{min-width:0}
.tools-table th:first-child,.tools-table td:first-child{position:sticky;left:0;z-index:1;background:#fff;font-weight:600;box-shadow:1px 0 0 var(--hairline)}
.tools-table th:first-child{background:var(--soft)}
@media(max-width:768px){.table-wrap .tools-table{min-width:720px}.tools-table th:first-child,.tools-table td:first-child{min-width:92px}}