/* SecondFactor.ai — blog layout: article pages (.post-*) and the /blog/ listing (.blog-*).
   Loaded by /blog/ and /blog/<slug>/ pages (after motion.css, before chrome.css and surface.css).
   Surfaces are white with neutral hairlines (--post-line); blue is kept for links and accents.
   Everything is namespaced .post-* and the markup avoids <section>, .crd and inline
   max-width styles on purpose: motion.css has !important overrides keyed on those. */

:root{--post-line:#e6e9f0;--post-tint:#f7f9fc;--post-ink:#3b4160}
.post-wrap{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,80px)}

/* ---- article header ---- */
.post-head{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:clamp(36px,5vw,76px);padding:clamp(40px,4.6vw,72px) 0 clamp(30px,3vw,44px)}
.post-head > *{grid-column:2;justify-self:start}
.post-crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0;font:300 13px/1.4 Sora,system-ui,sans-serif;color:var(--mut2)}
.post-crumbs li+li:before{content:"/";margin-right:8px;opacity:.55}
.post-crumbs a{color:var(--mut2)}
.post-crumbs a:hover,.post-crumbs [aria-current]{color:var(--ac)}
.post-cat{display:inline-block;font:500 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#2461c9;background:#f2f6fe;border:1px solid #d9e6fb;border-radius:999px;padding:5px 12px;align-self:flex-start}
.post-head h1{font:300 clamp(32px,3.9vw,50px)/1.1 Sora,system-ui,sans-serif!important;letter-spacing:-.025em;color:var(--fg);margin:18px 0 18px;max-width:24ch}
.post-dek{font:300 clamp(17px,1.5vw,19.5px)/1.65 Sora,system-ui,sans-serif;color:var(--post-ink);max-width:66ch;margin:0 0 28px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:300 13.5px/1.4 Sora,system-ui,sans-serif;color:var(--mut2)}
.post-meta b{font-weight:400;color:var(--fg)}
.post-meta .dotsep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.post-avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,#6a9cf0,#3078e8);color:#fff;font:500 13px Sora,system-ui,sans-serif}
.post-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.post-cover{margin:0 0 clamp(30px,3.6vw,52px);max-width:860px}
.post-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border:1px solid var(--post-line)}

/* ---- two-column layout: sticky sidebar + body ---- */
.post-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:start;border-top:1px solid var(--post-line);padding:clamp(30px,3.6vw,50px) 0 clamp(60px,7vw,100px)}
.post-side{position:sticky;top:92px;max-height:calc(100vh - 116px);overflow:auto;display:flex;flex-direction:column;gap:28px}
.post-side-lbl{font:400 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin:0 0 12px}
.post-toc{display:flex;flex-direction:column}
.post-toc a{font:300 13.5px/1.45 Sora,system-ui,sans-serif;color:var(--mut2);padding:6px 0 6px 14px;border-left:1px solid var(--post-line);transition:color .18s,border-color .18s}
.post-toc a:hover,.post-toc a.on{color:var(--ac);border-left-color:var(--ac)}
.post-toc a.on{font-weight:400}
.post-sidecta{border:1px solid var(--post-line);border-top:2px solid #3078e8;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:20px}
.post-sidecta p:not(.post-side-lbl){font:300 14px/1.6 Sora,system-ui,sans-serif;color:var(--mut);margin:0 0 14px}
.post-sidecta a{font:400 14px Sora,system-ui,sans-serif}

/* ---- body typography ---- */
.post-body{max-width:72ch;font:300 17.5px/1.8 Sora,system-ui,sans-serif;color:var(--post-ink)}
.post-body > :first-child{margin-top:0}
.post-body h2{font:300 clamp(25px,2.4vw,31px)/1.2 Sora,system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);margin:58px 0 16px;scroll-margin-top:96px}
.post-body h3{font:400 20px/1.35 Sora,system-ui,sans-serif;letter-spacing:-.01em;color:var(--fg);margin:36px 0 10px;scroll-margin-top:96px}
.post-body h4{font:400 16.5px/1.4 Sora,system-ui,sans-serif;color:var(--fg);margin:28px 0 8px}
.post-body p{margin:0 0 20px}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:24px}
.post-body li{margin-bottom:9px;padding-left:4px}
.post-body li::marker{color:var(--ac)}
.post-body a:not(.pill){text-decoration:underline;text-decoration-color:rgba(48,120,232,.35);text-underline-offset:3px}
.post-body a:not(.pill):hover{text-decoration-color:currentColor}
.post-body strong{font-weight:500;color:var(--fg)}
.post-body hr{border:0;border-top:1px solid var(--post-line);margin:44px 0}
.post-body blockquote{margin:32px 0;padding:4px 0 4px 22px;border-left:2px solid var(--ac);font:300 20px/1.6 Sora,system-ui,sans-serif;color:var(--fg)}
.post-body blockquote cite{display:block;margin-top:10px;font:300 13.5px Sora,system-ui,sans-serif;font-style:normal;color:var(--mut2)}
.post-body code{font:400 .86em 'JetBrains Mono',ui-monospace,monospace;color:#1f2450;background:#f1f4f8;border:1px solid var(--post-line);padding:1px 6px}
.post-body pre{background:#0f172a;color:#e5e9f2;padding:20px 22px;overflow:auto;margin:0 0 26px;font:400 13.5px/1.7 'JetBrains Mono',ui-monospace,monospace}
.post-body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.post-body figure{margin:32px 0}
.post-body figure img{display:block;width:100%;height:auto;border:1px solid var(--post-line);box-shadow:0 12px 32px -20px rgba(16,24,40,.25)}
.post-body h2 + figure{margin-top:22px}
.post-body figcaption,.post-cover figcaption{font:300 13px/1.5 Sora,system-ui,sans-serif;color:var(--mut2);margin-top:10px}

/* ---- components ---- */
.post-tldr{border:1px solid var(--post-line);border-left:3px solid #3078e8;background:var(--post-tint);padding:24px 26px;margin:0 0 38px}
.post-tldr p.post-tldr-t{font:400 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin:0 0 12px}
.post-tldr ul{margin:0;font-size:16px;line-height:1.7}
.post-tldr li:last-child{margin-bottom:0}
.post-note{border-left:3px solid #3078e8;background:var(--post-tint);padding:16px 20px;margin:28px 0;font-size:15.5px;line-height:1.7}
.post-note > :last-child{margin-bottom:0}

.post-table{overflow-x:auto;margin:28px 0 34px;border:1px solid var(--post-line);background:#fff;-webkit-overflow-scrolling:touch}
.post-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.post-table th{font:400 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);text-align:left;white-space:nowrap;padding:14px 16px;border-bottom:1px solid var(--post-line);background:var(--post-tint)}
.post-table td{padding:14px 16px;border-bottom:1px solid var(--post-line);vertical-align:top}
.post-table tr:last-child td{border-bottom:0}
.post-table td:first-child{font-weight:400;color:var(--fg);white-space:nowrap}
.post-table tr.is-us td{background:#f2f6fe!important}

.post-item{border:1px solid var(--post-line);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:clamp(22px,2.4vw,32px);margin:28px 0 34px}
.post-item-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin:0 0 14px}
.post-item-head h3{margin:0;font-size:22px}
.post-rank{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid rgba(48,120,232,.35);border-radius:50%;font:400 13px 'JetBrains Mono',ui-monospace,monospace;color:var(--ac)}
.post-tag{font:400 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);border:1px solid rgba(48,120,232,.35);border-radius:999px;padding:4px 10px;white-space:nowrap}
.post-item > p{font-size:16px;line-height:1.75}
.post-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:20px 0;padding:18px 0;border-top:1px solid var(--post-line);border-bottom:1px solid var(--post-line)}
.post-facts div{min-width:0}
.post-facts dt{font:400 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.post-facts dd{margin:5px 0 0;font-size:15px;line-height:1.45;color:var(--fg)}
.post-proscons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 30px}
.post-proscons h4{font:400 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:0 0 10px}
.post-proscons ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.6}
.post-proscons li{position:relative;padding-left:22px;margin-bottom:8px}
.post-proscons li:before{position:absolute;left:0;top:0;font:400 15px 'JetBrains Mono',ui-monospace,monospace}
.post-pros li:before{content:"+";color:#2f9e6e}
.post-cons li:before{content:"\2013";color:#c25a5a}
.post-item p.post-item-foot{margin:20px 0 0;font-size:15px}
.post-item > :last-child{margin-bottom:0}

.post-cta{border:1px solid var(--post-line);border-top:2px solid #3078e8;background:radial-gradient(rgba(31,36,80,.09) 1px,transparent 1.3px) 0 0/20px 20px,var(--post-tint);padding:clamp(24px,2.8vw,36px);margin:40px 0}
.post-cta p.post-cta-t{font:300 clamp(21px,2vw,26px)/1.25 Sora,system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);margin:0 0 8px}
.post-cta p:not(.post-cta-t){font-size:15.5px;line-height:1.7;margin:0 0 20px}
.post-cta-btns{display:flex;flex-wrap:wrap;gap:12px}

.post-faq{border-top:1px solid var(--post-line)}
.post-faq details{border-bottom:1px solid var(--post-line);padding:18px 0}
.post-faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font:400 17.5px/1.4 Sora,system-ui,sans-serif;color:var(--fg)}
.post-faq summary:after{content:"+";color:var(--ac);font-size:18px;flex:none}
.post-faq details[open] summary:after{content:"\2013"}
.post-faq details p{margin:12px 0 0;font-size:16px;line-height:1.75}

.post-author{display:flex;gap:18px;align-items:flex-start;margin-top:60px;padding-top:32px;border-top:1px solid var(--post-line)}
.post-author .post-avatar{width:52px;height:52px;font-size:17px}
.post-author p.post-author-n{font:400 16px/1.3 Sora,system-ui,sans-serif;color:var(--fg);margin:0 0 2px}
.post-author p.post-author-r{font:300 13.5px/1.4 Sora,system-ui,sans-serif;color:var(--mut2);margin:0 0 10px}
.post-author p.post-author-b{font-size:15px;line-height:1.7;margin:0}

/* ---- related articles ---- */
.post-related{border-top:1px solid var(--post-line);padding:clamp(44px,5vw,72px) 0 clamp(60px,7vw,96px)}
.post-related-t{font:300 clamp(24px,2.4vw,32px)/1.2 Sora,system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);margin:0 0 28px}
.post-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.post-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--post-line);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:24px;color:inherit;transition:transform .25s,border-color .25s}
a.post-card:hover{transform:translateY(-2px);border-color:#d6dce6;box-shadow:0 20px 44px -22px rgba(16,24,40,.22);color:inherit}
.post-card-t{font:300 19px/1.35 Sora,system-ui,sans-serif;color:var(--fg);margin:0}
.post-card-d{font:300 14px/1.65 Sora,system-ui,sans-serif;color:var(--mut);margin:0}

/* ---- responsive ---- */
@media (max-width:960px){
  .post-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .post-head{grid-template-columns:minmax(0,1fr)}
  .post-head > *{grid-column:1}
  .post-side{position:static;max-height:none;overflow:visible}
  .post-toc-box{border:1px solid var(--post-line);background:var(--post-tint);padding:20px}
  .post-sidecta{display:none}
}
@media (max-width:720px){
  .post-body{font-size:16px;line-height:1.75}
  .post-body h2{margin-top:44px}
  .post-body blockquote{font-size:18px}
  .post-author{flex-direction:column;gap:14px}
  .post-meta .dotsep{display:none}
  .post-meta{gap:6px 14px}
}
/* ---- /blog/ listing ----
   `main > section` picks up padding from motion.css and the hairline/tint from surface.css;
   the :not(#sf) bumps keep these rules ahead of both. */
.blog-wrap{max-width:1120px;margin:0 auto}
html body main > section.blog-intro:not(#sf){background:#fff!important;padding-top:clamp(40px,4.4vw,64px)!important;padding-bottom:clamp(28px,3vw,40px)!important}
html body main > section.blog-intro:not(#sf)::before{display:none!important}
.blog-intro h1{font:300 clamp(34px,3.6vw,46px)/1.1 Sora,system-ui,sans-serif!important;letter-spacing:-.025em;color:var(--fg);margin:0 0 12px}
.blog-intro p{font:300 17px/1.65 Sora,system-ui,sans-serif;color:var(--post-ink);max-width:60ch;margin:0}
html body main > section.blog-list:not(#sf){padding-top:clamp(32px,3.4vw,48px)!important;padding-bottom:clamp(56px,6vw,88px)!important}
.blog-list-t{font:500 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);margin:0 0 20px}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.blog-card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.4vw,32px);background:#fff;border:1px solid var(--post-line);
  box-shadow:0 1px 2px rgba(16,24,40,.04);color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.blog-card:hover{transform:translateY(-2px);border-color:#d6dce6;box-shadow:0 20px 44px -22px rgba(16,24,40,.22);color:inherit}
.blog-card-cat{align-self:flex-start;font:500 10.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#2461c9;
  background:#f2f6fe;border:1px solid #d9e6fb;border-radius:999px;padding:4px 11px}
.blog-card-t{font:400 clamp(19px,1.6vw,22px)/1.3 Sora,system-ui,sans-serif!important;letter-spacing:-.015em;color:var(--fg);margin:4px 0 0}
.blog-card-d{font:300 15px/1.65 Sora,system-ui,sans-serif;color:var(--post-ink);margin:0}
.blog-card-more{margin-top:auto;padding-top:10px;font:400 14px Sora,system-ui,sans-serif;color:#2461c9}
.blog-card-more span{display:inline-block;transition:transform .25s ease}
.blog-card:hover .blog-card-more span{transform:translateX(3px)}
html body main > section.blog-cta:not(#sf){padding-top:0!important;background:#fff!important}
html body main > section.blog-cta:not(#sf)::before{display:none!important}
.blog-cta-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px 40px;align-items:center;padding:clamp(28px,3.4vw,44px);
  border:1px solid var(--post-line);border-top:2px solid #3078e8;background:radial-gradient(rgba(31,36,80,.09) 1px,transparent 1.3px) 0 0/20px 20px,var(--post-tint)}
.blog-cta-box h2{font:300 clamp(26px,3vw,34px)/1.15 Sora,system-ui,sans-serif!important;letter-spacing:-.025em;color:var(--fg);margin:0;max-width:22ch}
.blog-cta-box p{font:300 16px/1.7 Sora,system-ui,sans-serif;color:var(--post-ink);margin:0 0 22px}
.blog-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.blog-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){html body main > section.blog-intro:not(#sf){padding-top:36px!important;padding-bottom:24px!important}}

@media (prefers-reduced-motion:reduce){.post-card,.blog-card,.blog-card-more span{transition:none}}