/* Blog list (blog-list.php) and blog posts (blog.php). Everything is scoped under
   .sb so the theme's header and footer keep their own styles. Tokens and type
   follow the Listing Checker redesign (listing-checker-report.css), so the blog
   reads as the same site as the free tools. */

.sb{
  --sb-brand:#6a49f2; --sb-brand-deep:#2A1A66; --sb-brand-ink:#3D2496;
  --sb-ink:#1D1730; --sb-ink-2:#4A4560; --sb-ink-3:#69637F;
  --sb-ground:#F7F5FD; --sb-hero:#F1ECFE; --sb-tint:#F3EFFE; --sb-chip:#EDE7FD;
  --sb-line:#E6E1F3; --sb-line-strong:#D7D0EC;
  --sb-spring:cubic-bezier(.34,1.56,.64,1);
}
/* Metric-matched fallback for Schibsted Grotesk, same as listing-checker-report.css:
   text wraps the same before and after the web font swaps in, so nothing shifts. */
@font-face{font-family:'Schibsted Grotesk Fallback';src:local('Arial'),local('ArialMT'),local('Arimo'),local('Liberation Sans');font-weight:400;size-adjust:103.5%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Schibsted Grotesk Fallback';src:local('Arial'),local('ArialMT'),local('Arimo'),local('Liberation Sans');font-weight:500;size-adjust:104.9%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Schibsted Grotesk Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold'),local('Liberation Sans Bold');font-weight:600;size-adjust:99.2%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Schibsted Grotesk Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold'),local('Liberation Sans Bold');font-weight:700;size-adjust:101%;ascent-override:98%;descent-override:26%;line-gap-override:0%}

.sb{
  background:var(--sb-ground); color:var(--sb-ink);
  font-family:'Schibsted Grotesk','Schibsted Grotesk Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; word-break:normal; overflow-wrap:break-word; text-align:left;
}
.sb *,.sb *::before,.sb *::after{box-sizing:border-box}
.sb h1,.sb h2,.sb h3{font-family:inherit;font-weight:700;color:var(--sb-ink);text-wrap:pretty}
.sb-wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.sb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb a:focus-visible,.sb summary:focus-visible{outline:2px solid var(--sb-ink);outline-offset:2px;border-radius:4px}

/* The theme's fixed header sits over this strip. */
.inner_page_block.sb-top{min-height:104px;background:#F1ECFE}

/* ---------- Hero ---------- */
.sb-hero{background:var(--sb-hero);border-bottom:1px solid #E2DAF8}
.sb-hero .sb-wrap{padding-top:36px;padding-bottom:44px}
.sb-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:48px;align-items:center}
.sb-hero-grid.is-solo{grid-template-columns:minmax(0,1fr)}
.sb-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;max-width:860px}
.sb-crumb{font-size:14px;color:var(--sb-ink-3)}
.sb-crumb ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.sb-crumb li{display:inline-flex;align-items:center}
.sb-crumb li+li::before{content:"\203A";margin:0 8px;color:var(--sb-ink-3)}
.sb-crumb a{color:var(--sb-ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sb-line-strong)}
.sb-crumb a:hover{color:var(--sb-brand-ink);text-decoration-color:currentColor}
.sb-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid #E2DAF8;font-size:13px;font-weight:600;line-height:1.3;color:var(--sb-brand-ink)}
.sb-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sb-brand);flex:none}
.sb h1.sb-h1{margin:0;font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-.022em;text-wrap:balance}
.sb-h1 span{color:var(--sb-brand)}
.sb h2.sb-sub{margin:0;font-size:19px;line-height:1.45;font-weight:500;color:var(--sb-ink-2)}
.sb-byline{margin:0;font-size:15px;line-height:1.5;color:var(--sb-ink-2)}
.sb-byline a{color:var(--sb-brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(106,73,242,.4)}
.sb-byline a:hover{color:var(--sb-brand);text-decoration-color:currentColor}
.sb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sb .sb-actions .smt-pref-src-wrap{margin:0;float:none;padding:0}
.sb-fb{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#1877F2;color:#fff;font:600 14px/1.3 inherit;font-family:inherit;text-decoration:none;border:1px solid #1877F2;transition:filter .15s ease}
.sb-fb:hover,.sb-fb:focus{color:#fff;text-decoration:none;filter:brightness(.92)}
.sb-fb svg{flex:none}
.sb-cover{margin:0;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--sb-line);box-shadow:0 22px 44px -30px rgba(61,36,150,.55)}
.sb-cover img{display:block;width:100%;height:auto}

/* ---------- Post body ---------- */
.sb-article .sb-wrap{padding-top:44px;padding-bottom:64px}
.sb-read{max-width:760px;margin:0 auto}
.sb-video{margin:0 0 24px;text-align:center}
.sb-video video,.sb .blog-vid{width:100%;max-width:560px;border-radius:14px;border:1px solid var(--sb-line);background:#000}

.sb-toc{margin:0 0 28px;background:#fff;border:1px solid var(--sb-line);border-radius:16px}
.sb-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:15px;font-weight:600;color:var(--sb-ink)}
.sb-toc summary::-webkit-details-marker{display:none}
.sb-toc summary small{margin-left:auto;font-size:13px;font-weight:500;color:var(--sb-ink-3)}
.sb-toc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--sb-ink-2);border-bottom:2px solid var(--sb-ink-2);transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;flex:none}
.sb-toc[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.sb-toc ol{margin:0;padding:4px 18px 16px 18px;counter-reset:sb-toc;border-top:1px solid var(--sb-line)}
.sb-toc li{counter-increment:sb-toc;display:flex;gap:10px;padding:8px 0 0;font-size:15px;line-height:1.45}
.sb-toc li::before{content:counter(sb-toc);flex:none;width:22px;height:22px;border-radius:50%;background:var(--sb-chip);color:var(--sb-brand-ink);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.sb-toc a{color:var(--sb-ink-2);text-decoration:none}
.sb-toc a:hover{color:var(--sb-brand-ink);text-decoration:underline;text-underline-offset:3px}

/* Post HTML comes from the database and Seo_Content, so these rules style plain
   elements and the handful of legacy classes the posts use (.ul, .ol, .mt20,
   .theme-color, .blog-link, .pro-tip, .highlight-box, ...). The extra .sb raises
   them over style-2.css and over the <style> that Seo_Content::guide_styles()
   prints inside the post. */
.sb .sb-prose{font-size:17px;line-height:1.72;color:var(--sb-ink-2)}
.sb .sb-prose p{margin:0 0 16px}
.sb .sb-prose h2{margin:44px 0 14px;font-size:28px;line-height:1.22;font-weight:700;letter-spacing:-.015em;color:var(--sb-ink);scroll-margin-top:110px}
.sb .sb-prose h3{margin:30px 0 10px;font-size:20px;line-height:1.32;font-weight:650;color:var(--sb-ink);scroll-margin-top:110px}
.sb .sb-prose h4{margin:24px 0 8px;font-size:17px;font-weight:650;color:var(--sb-ink)}
.sb .sb-prose > :first-child{margin-top:0}
.sb .sb-prose strong,.sb .sb-prose b{font-weight:650;color:var(--sb-ink)}
.sb .sb-prose a{color:var(--sb-brand-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(106,73,242,.45)}
.sb .sb-prose a:hover{color:var(--sb-brand);text-decoration-color:currentColor}
.sb .sb-prose ul,.sb .sb-prose ol{margin:0 0 18px;padding-left:24px}
.sb .sb-prose li{display:list-item;margin:0 0 8px;padding-left:4px}
.sb .sb-prose ul > li{list-style-type:disc}
.sb .sb-prose ol > li{list-style-type:decimal}
.sb .sb-prose ul > li::marker{color:var(--sb-brand)}
.sb .sb-prose ol > li::marker{color:var(--sb-brand-ink);font-weight:600}
.sb .sb-prose li span{font-weight:600;color:var(--sb-ink)}
.sb .sb-prose .blog-81 .ul li,.sb .sb-prose .smt-guide-tags li{list-style-type:none}
.sb .sb-prose .mt20{margin-top:20px}
.sb .sb-prose .theme-color,.sb .sb-prose .blog-link{color:var(--sb-brand-ink)}
.sb .sb-prose .text-underline,.sb .sb-prose .blog-link{text-decoration:underline;text-underline-offset:3px}
.sb .sb-prose .fs-08em{font-size:.8em}
.sb .sb-prose img{max-width:100%;height:auto;border-radius:12px}
.sb .sb-prose video,.sb .sb-prose iframe{max-width:100%}
.sb .sb-prose hr{border:0;border-top:1px solid var(--sb-line);margin:32px 0}
.sb .sb-prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--sb-brand);background:#fff;border-radius:0 12px 12px 0;color:var(--sb-ink)}
.sb .sb-prose .intro{font-size:1.06em;color:var(--sb-ink-2);font-style:italic}
.sb .sb-prose .pro-tip,.sb .sb-prose .highlight-box{margin:0 0 20px;padding:16px 18px;background:#fff;border:1px solid var(--sb-line);border-left:4px solid var(--sb-brand);border-radius:12px}
.sb .sb-prose .cta,.sb .sb-prose .cta-button,.sb .sb-prose .btn-primary{display:inline-block;margin-top:16px;padding:12px 22px;border:0;border-radius:999px;background:var(--sb-brand);color:#fff !important;font-weight:600;text-align:center;text-decoration:none}
.sb .sb-prose .cta:hover,.sb .sb-prose .cta-button:hover,.sb .sb-prose .btn-primary:hover{filter:brightness(.94);text-decoration:none}

/* Tables are wrapped in .sb-table by blog.php so a wide one scrolls inside the
   column on a phone instead of widening the page. */
.sb .sb-table{margin:0 0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--sb-line);border-radius:14px}
.sb .sb-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.sb .sb-prose th,.sb .sb-prose td{padding:10px 14px;border-bottom:1px solid var(--sb-line);text-align:left;vertical-align:top}
.sb .sb-prose thead,.sb .sb-prose th{background:var(--sb-tint)}
.sb .sb-prose th,.sb .sb-prose thead td{font-weight:600;color:var(--sb-ink)}
.sb .sb-prose tr:last-child td{border-bottom:0}
.sb .sb-prose .smt-guide-scroll .smt-guide-table{min-width:520px}

/* Guides that Seo_Content appends to some posts. */
.sb .sb-prose .smt-guide{max-width:none;margin-top:40px !important;padding-top:0 !important;color:inherit}

/* "Related tools and guides", author bio, related articles. */
.sb .sb-prose .blog-related-tools,.sb .sb-bio{margin:40px 0 0;padding:22px 24px;background:#fff;border:1px solid var(--sb-line);border-radius:18px}
.sb .sb-prose .blog-related-tools h2,.sb .sb-bio h2{margin:0 0 10px;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.sb .sb-prose .blog-related-tools ul{margin:0 0 12px}
.sb .sb-prose .blog-related-tools p,.sb .sb-bio p{margin:0;font-size:16px;line-height:1.6}
.sb .sb-bio{display:flex;gap:16px;align-items:flex-start;margin-top:20px}
.sb-bio-av{flex:none;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#9C85FF,#6a49f2);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}

.sb-related{margin:48px 0 0}
.sb .sb-related h2{margin:0 0 6px;font-size:26px;line-height:1.2;letter-spacing:-.015em}
.sb-related > p{margin:0 0 18px;color:var(--sb-ink-2)}
.sb-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sb-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;background:#fff;border:1px solid var(--sb-line);border-radius:18px;transition:transform .25s var(--sb-spring),box-shadow .2s ease,border-color .2s ease}
.sb-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(61,36,150,.45);border-color:var(--sb-line-strong)}
.sb .sb-card h3{margin:0;font-size:17px;line-height:1.35;font-weight:650}
.sb-card h3 a{color:var(--sb-ink);text-decoration:none}
.sb-card h3 a::after{content:"";position:absolute;inset:0;border-radius:18px}
.sb-card h3 a:hover{color:var(--sb-brand-ink)}
.sb-card p{margin:0;font-size:15px;line-height:1.55;color:var(--sb-ink-2)}

.sb-endbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--sb-line)}
.sb-back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--sb-line-strong);color:var(--sb-ink);font-size:15px;font-weight:600;text-decoration:none;transition:background .15s ease,transform .25s var(--sb-spring)}
.sb-back:hover{background:#F0ECFB;color:var(--sb-ink);text-decoration:none;transform:translateX(-2px)}

/* ---------- Blog list ---------- */
.sb-list .sb-wrap{padding-top:40px;padding-bottom:64px}
.sb-list-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.sb-posts{display:flex;flex-direction:column;gap:16px;min-width:0}
.sb-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start;padding:16px;background:#fff;border:1px solid var(--sb-line);border-radius:20px;transition:box-shadow .2s ease,border-color .2s ease}
.sb-row:hover{box-shadow:0 16px 32px -22px rgba(61,36,150,.5);border-color:var(--sb-line-strong)}
.sb-row-img{display:block;border-radius:14px;overflow:hidden;background:var(--sb-tint)}
.sb-row-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.sb-row:hover .sb-row-img img{transform:scale(1.03)}
.sb-row-body{display:flex;flex-direction:column;gap:8px;padding:4px 6px 4px 0;min-width:0}
.sb-date{font-size:13px;color:var(--sb-ink-3)}
.sb .sb-row h2{margin:0;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.sb-row h2 a{color:var(--sb-ink);text-decoration:none}
.sb-row h2 a:hover{color:var(--sb-brand-ink);text-decoration:underline;text-underline-offset:3px}
.sb-row-body > p{margin:0;font-size:15px;line-height:1.6;color:var(--sb-ink-2)}
.sb-row-body > p:empty{display:none}
.sb-row .sb-video{margin:4px 0 0;text-align:left}
.sb-row-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.sb-author{font-size:13px;line-height:1.35;color:var(--sb-ink-3)}
.sb-author .authore_name{font-size:14px;font-weight:600}
.sb-author a{color:var(--sb-brand-ink);text-decoration:none}
.sb-author a:hover{text-decoration:underline}
.sb-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--sb-brand-ink);text-decoration:none}
.sb-more:hover{color:var(--sb-brand);text-decoration:underline;text-underline-offset:3px}
.sb-more svg{transition:transform .25s var(--sb-spring)}
.sb-more:hover svg{transform:translateX(3px)}

.sb-side{position:sticky;top:110px;background:#fff;border:1px solid var(--sb-line);border-radius:20px;padding:20px}
.sb .sb-side h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--sb-ink)}
.sb-recent li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--sb-line)}
.sb-recent li:first-child{border-top:0}
.sb-recent img{display:block;width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--sb-tint)}
.sb-recent p{margin:0 0 2px;font-size:14px;line-height:1.4}
.sb-recent p a{color:var(--sb-ink);text-decoration:none}
.sb-recent p a:hover{color:var(--sb-brand-ink);text-decoration:underline;text-underline-offset:3px}
.sb-recent span{font-size:12px;color:var(--sb-ink-3)}

.sb-pages{margin-top:28px}
.sb-pages ul{display:flex;flex-wrap:wrap;gap:8px}
.sb-pages a{min-width:42px;height:42px;padding:0 12px;border-radius:12px;background:#fff;border:1px solid var(--sb-line);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--sb-ink-2);text-decoration:none;transition:border-color .15s ease,background .15s ease}
.sb-pages a:hover{border-color:var(--sb-brand);color:var(--sb-brand-ink)}
.sb-pages a.active{background:var(--sb-brand);border-color:var(--sb-brand);color:#fff}

/* ---------- Closing call to action ---------- */
.sb-cta{background:var(--sb-brand-deep);color:#fff}
.sb-cta .sb-wrap{padding-top:56px;padding-bottom:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.sb .sb-cta h2{margin:0 0 6px;color:#fff;font-size:32px;line-height:1.15;letter-spacing:-.02em}
.sb-cta p{margin:0;font-size:17px;color:#D6D2EB}
.sb-cta-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;background:#fff;color:var(--sb-brand-deep);font-size:16px;font-weight:700;text-decoration:none;transition:transform .25s var(--sb-spring),box-shadow .2s ease}
.sb-cta-btn:hover{color:var(--sb-brand-deep);text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
/* The theme pulls the footer 90px up over the section before it (made for the
   old curved "need" band). Over this band it would hide the button, so the blog
   drops the pull-up and the 90px of padding that went with it. */
.sb ~ footer .top_footer{margin-top:0;padding-top:90px}
.sb-cta .sb-cta-btn:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion: reduce){
  .sb-card:hover,.sb-back:hover,.sb-more:hover svg,.sb-cta-btn:hover,.sb-row:hover .sb-row-img img{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .sb-list-grid{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
  .sb-row{grid-template-columns:200px minmax(0,1fr)}
}
@media (max-width:991px){
  .sb-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .sb-cover{max-width:640px}
  .sb-list-grid{grid-template-columns:minmax(0,1fr)}
  .sb-side{position:static}
}
@media (max-width:767px){
  .inner_page_block.sb-top{min-height:76px}
  .sb-wrap{padding-left:16px;padding-right:16px}
  .sb-hero .sb-wrap{padding-top:22px;padding-bottom:28px}
  .sb-hero-copy{gap:12px}
  .sb h1.sb-h1{font-size:31px;line-height:1.15}
  .sb h2.sb-sub{font-size:17px}
  .sb-cover{border-radius:16px}
  .sb-article .sb-wrap{padding-top:28px;padding-bottom:44px}
  .sb .sb-prose{font-size:16.5px}
  .sb .sb-prose h2{font-size:23px;margin-top:36px}
  .sb .sb-prose h3{font-size:18.5px}
  .sb .sb-prose .blog-related-tools,.sb .sb-bio{padding:18px}
  .sb-related-grid{grid-template-columns:minmax(0,1fr)}
  .sb .sb-related h2{font-size:23px}
  .sb-list .sb-wrap{padding-top:24px;padding-bottom:44px}
  /* Phone row: small cover beside the date and title, excerpt and byline full
     width underneath. display:contents lets the body's children join the row grid. */
  .sb-row{grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:14px;border-radius:16px}
  .sb-row-body{display:contents}
  .sb-row-img{grid-row:1 / span 2;border-radius:12px;overflow:hidden}
  .sb-row-img img{aspect-ratio:4/3}
  .sb-date,.sb .sb-row h2{grid-column:2}
  .sb .sb-row h2{font-size:17px}
  .sb-row-body > p,.sb-row-foot,.sb-row-body > .sb-video{grid-column:1 / -1}
  .sb-row-body > p{margin-top:8px}
  .sb-cta .sb-wrap{padding-top:40px;padding-bottom:40px}
  .sb .sb-cta h2{font-size:26px}
  .sb-cta-btn{width:100%;justify-content:center}
}