/* ============================================================
   BLOG INNER / ARTICLE STYLESHEET  ->  blog article pages
   LAPTOP: full-width banner + article (left) + sticky sidebar
   (right: Contents, Share, Author, CTA) + FAQ + related + newsletter.
   PHONE: sidebar stacks under the article as Author → Share → CTA
   (Contents hidden). Themed via site tokens with [data-theme="light"]
   surface overrides. Flat colors.
   ============================================================ */
.bi-page{
  --b-surface:#13131f;
  --b-line:rgba(255,255,255,.09);
  --b-input:rgba(255,255,255,.05);
}
[data-theme="light"] .bi-page{
  --b-surface:#ffffff;
  --b-line:rgba(10,10,30,.08);
  --b-input:#ffffff;
}

/* ---------- BANNER (full-width; color set inline per category) ---------- */
.bi-banner{background:#4f46e5;padding:54px 0;margin-top:64px}
.bi-banner-in{max-width:1140px;margin:0 auto;padding:0 40px}
.bi-eb{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px}
.bi-banner h1{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;max-width:780px}
.bi-banner .sub{color:rgba(255,255,255,.82);margin-top:14px;font-size:1.02rem;line-height:1.55;max-width:700px}

/* ---------- SHELL + GRID (article left, sidebar right) ---------- */
.bi-shell{max-width:1140px;margin:0 auto;padding:44px 40px 72px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px}
.bi-main{min-width:0}

/* meta */
.bi-meta{display:flex;align-items:center;gap:12px;padding-bottom:26px;border-bottom:1px solid var(--b-line);margin-bottom:34px}
.bi-av{width:40px;height:40px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0}
.bi-mn{font-size:.9rem;font-weight:700;color:var(--text)}
.bi-mr{font-size:.78rem;color:var(--text-3)}
.bi-md{margin-left:auto;font-size:.82rem;color:var(--text-3)}
.bi-meta-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}

/* ---------- ARTICLE BODY ---------- */
.bi-article{max-width:730px}
.bi-article h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:38px 0 16px;scroll-margin-top:90px}
.bi-article h2:first-child{margin-top:0}
.bi-article p{font-size:1.05rem;line-height:1.8;color:var(--text-2);margin-bottom:20px}
.bi-article ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.bi-article ul li{position:relative;padding-left:26px;font-size:1.02rem;line-height:1.7;color:var(--text-2)}
.bi-article ul li::before{content:'';position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--blue);}
.bi-article ul li strong{color:var(--text);font-weight:700}

/* ---------- FAQ ACCORDION ---------- */
.bi-faq{max-width:730px;margin-top:52px;padding-top:42px;border-top:1px solid var(--b-line)}
.bi-faq h2{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:20px}
.bi-faq-item{border:1px solid var(--b-line);border-radius:14px;margin-bottom:10px;background:var(--b-surface);overflow:hidden}
.bi-faq-item summary{cursor:pointer;padding:18px 20px;font-weight:700;font-size:1rem;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .15s}
.bi-faq-item summary::-webkit-details-marker{display:none}
.bi-faq-item summary:hover{color:var(--blue-light)}
.bi-faq-item summary::after{content:'+';font-size:1.4rem;line-height:1;color:var(--blue-light);font-weight:300;flex-shrink:0}
.bi-faq-item[open] summary::after{content:'\2013'}
.bi-faq-a{padding:0 20px 18px;color:var(--text-2);line-height:1.7;font-size:.95rem}

/* ---------- SIDEBAR (sticky on laptop) ---------- */
.bi-side{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:88px}
.bi-card{background:var(--b-surface);border:1px solid var(--b-line);border-radius:16px;padding:20px}
.bi-ch{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.bi-toc a{display:block;font-size:.85rem;color:var(--text-3);text-decoration:none;padding:7px 0 7px 12px;border-left:2px solid var(--b-line);transition:color .15s,border-color .15s}
.bi-toc a:hover{color:var(--text-2)}
.bi-toc a.active{color:var(--blue-light);border-left-color:var(--blue);font-weight:600}
.bi-share{display:flex;gap:8px}
.bi-sb{width:38px;height:38px;border-radius:10px;border:1px solid var(--b-line);display:grid;place-items:center;color:var(--text-3);background:var(--b-input);font-size:.82rem;text-decoration:none;transition:color .15s,border-color .15s}
.bi-sb:hover{color:var(--blue-light);border-color:var(--blue)}
.bi-auth{display:flex;align-items:center;gap:12px}
.bi-aav{width:42px;height:42px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0}
.bi-anm{font-size:.88rem;font-weight:700;color:var(--text)}
.bi-arl{font-size:.78rem;color:var(--text-3)}
.bi-cta{background:#4f46e5;border:none}
.bi-cta-t{color:#fff;font-weight:800;font-size:1.02rem;margin-bottom:6px}
.bi-cta-s{color:rgba(255,255,255,.8);font-size:.82rem;line-height:1.5;margin-bottom:14px}
.bi-cta-b{display:inline-block;background:#fff;color:#4338ca;font-weight:700;font-size:.8rem;padding:9px 16px;border-radius:9px;text-decoration:none}

/* ---------- RELATED (full width) ---------- */
.bi-related{max-width:1140px;margin:0 auto;padding:8px 40px 56px}
.bi-related h2{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:22px}
.bi-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bi-rel-card{background:var(--b-surface);border:1px solid var(--b-line);border-radius:16px;padding:24px;display:flex;flex-direction:column;min-height:170px;text-decoration:none;color:inherit;transition:transform .22s,box-shadow .22s,border-color .22s}
.bi-rel-card:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-lg);border-color:var(--blue)}
.bi-rel-card:hover h3{color:var(--blue-light)}
.bi-rel-chip{align-self:flex-start;margin-bottom:12px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:rgba(99,102,241,.12);color:var(--blue-light);border:1px solid rgba(99,102,241,.22)}
.bi-rel-card h3{font-size:1rem;font-weight:700;line-height:1.25;color:var(--text);margin-bottom:8px;transition:color .2s}
.bi-rel-card .m{font-size:.74rem;color:var(--text-4);margin-top:auto}

/* ---------- NEWSLETTER (flat deep indigo) ---------- */
.bi-nl-wrap{max-width:1140px;margin:0 auto;padding:0 40px 72px}
.bi-nl{border-radius:18px;background:#312e81;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.bi-nl h2{color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.bi-nl p{color:rgba(255,255,255,.7);font-size:.95rem}
.bi-nl-form{display:flex;gap:10px}
.bi-nl-form input{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:13px 18px;font-size:.9rem;font-family:var(--font-b);width:240px;outline:none}
.bi-nl-form input::placeholder{color:rgba(255,255,255,.5)}
.bi-nl-form button{background:#fff;color:#4f46e5;font-weight:700;font-size:.9rem;border:none;border-radius:10px;padding:13px 24px;cursor:pointer;white-space:nowrap;font-family:var(--font-b)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  /* single column: sidebar drops under the article */
  .bi-shell{grid-template-columns:1fr;gap:36px}
  .bi-side{position:static;flex-direction:column}
  /* PHONE order: Author on top, then Share, then Run payroll; hide Contents */
  .bi-side .bi-toc{display:none}
  .bi-share-card{order:2}
  .bi-cta{order:3}
  .bi-rel-grid{grid-template-columns:1fr}
  .bi-nl{flex-direction:column;align-items:flex-start}.bi-nl-form{width:100%;flex-direction:column}.bi-nl-form input{flex:1;width:100%}.bi-nl-form button{width:100%}
  .bi-banner-in,.bi-shell,.bi-related,.bi-nl-wrap{padding-left:20px;padding-right:20px}
  .bi-banner,.bi-nl{padding-left:0;padding-right:0}
  .bi-nl{padding:30px}
}