/* ═══════════════════════════════════════════════════════════
   INSTONIC BLOG — hub, category and article styles (bl-)
   Uses the site design tokens from style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Hub / category hero ── */
.bl-hero { position:relative;overflow:hidden;padding:130px 0 70px; }
.bl-hero::before { content:"";position:absolute;inset:0;pointer-events:none;background:var(--grad-mesh-1),var(--grad-mesh-2),var(--grad-mesh-3); }
.bl-hero .container { position:relative; }
.bl-hero-in { max-width:760px; }
.bl-eyebrow { display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--purple);background:rgba(139,47,201,.08);border:1px solid var(--border);margin-bottom:16px; }
.bl-hero h1 { font-size:clamp(32px,5vw,58px);font-weight:900;line-height:1.08;letter-spacing:-1.2px;color:var(--text-1);margin:0 0 18px; }
.bl-hero p { font-size:18px;line-height:1.75;color:var(--text-2);margin:0; }

/* ── Platform badge on feature images ── */
.bl-media { position:relative;display:block; }
.bl-badge { position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:800;letter-spacing:.3px;color:#fff;background:rgba(14,10,22,.62);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
.bl-badge i { color:var(--pink); }
.ar-cover .bl-badge { top:20px;left:20px;font-size:13.5px;padding:8px 15px; }

/* ── Featured + grid ── */
.bl-list { padding:20px 0 96px; }
.bl-feat { display:grid;grid-template-columns:1.25fr 1fr;border-radius:var(--radius-xl);overflow:hidden;background:var(--card-bg);
  border:1px solid var(--border-card);box-shadow:var(--shadow-card);transition:transform .35s ease,box-shadow .35s ease; }
.bl-feat:hover { transform:translateY(-6px);box-shadow:var(--shadow-hover); }
.bl-feat-img { display:block;background:#1A0B2E; }
.bl-feat-img img { width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1200/630; }
.bl-feat-body { padding:36px;display:flex;flex-direction:column;justify-content:center; }
.bl-feat-label { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--pink);margin-bottom:12px; }
.bl-feat h2 { font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.25;margin:0 0 14px; }
.bl-feat h2 a, .bl-card h3 a { color:var(--text-1); }
.bl-feat h2 a:hover, .bl-card h3 a:hover { color:var(--purple); }
.bl-feat p { font-size:16px;line-height:1.75;color:var(--text-2);margin:0 0 20px; }
.bl-meta { display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13px;font-weight:600;color:var(--text-3); }
.bl-meta i { color:var(--purple);margin-right:5px; }
.bl-tag { display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-pill);font-size:12px;font-weight:800;color:var(--purple);background:rgba(139,47,201,.09); }
.bl-tag:hover { background:var(--grad);color:#fff; }
.bl-tag:hover i { color:#fff; }
.bl-more { display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:800;color:var(--purple);transition:gap .25s ease; }
.bl-more:hover { gap:12px;color:var(--magenta); }

.bl-grid-head { display:flex;align-items:end;justify-content:space-between;gap:16px;margin:64px 0 24px; }
.bl-grid-head h2 { font-size:clamp(22px,3vw,32px);font-weight:900;margin:0;color:var(--text-1); }
.bl-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.bl-card { display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--card-bg);border:1px solid var(--border-card);
  box-shadow:var(--shadow-card);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.bl-card:hover { transform:translateY(-6px);border-color:var(--border-hover);box-shadow:var(--shadow-hover); }
.bl-card img { width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;background:#1A0B2E; }
.bl-card-body { padding:22px;display:flex;flex-direction:column;gap:12px;flex:1; }
.bl-card h3 { font-size:18px;font-weight:800;line-height:1.35;margin:0; }
.bl-card p { font-size:14.5px;line-height:1.7;color:var(--text-2);margin:0;flex:1; }
.bl-soon { display:grid;place-items:center;text-align:center;padding:34px 24px;border-radius:var(--radius-lg);border:2px dashed var(--border);color:var(--text-3); }
.bl-soon i { font-size:26px;color:var(--purple);margin-bottom:10px; }
.bl-soon p { margin:0;font-size:14.5px;line-height:1.6; }


/* ── Article ── */
.ar-head { position:relative;overflow:hidden;padding:124px 0 0; }
.ar-head::before { content:"";position:absolute;inset:0 0 30% 0;pointer-events:none;background:var(--grad-mesh-1),var(--grad-mesh-2); }
.ar-head .container { position:relative;max-width:1080px; }
.ar-head-in { max-width:860px;margin:0 auto;text-align:center; }
.ar-head h1 { font-size:clamp(28px,4.4vw,50px);font-weight:900;line-height:1.14;letter-spacing:-1px;color:var(--text-1);margin:18px 0 18px; }
.ar-head .bl-meta { justify-content:center; }
.ar-author { display:inline-flex;align-items:center;gap:8px;color:var(--text-2); }
.ar-author img { width:26px;height:26px;border-radius:8px; }
.ar-cover { margin:36px auto 0;max-width:1080px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 40px 80px -30px rgba(60,10,90,.45);background:#1A0B2E; }
.ar-cover img { width:100%;height:auto;display:block;aspect-ratio:1200/630; }

.ar-wrap { padding:56px 0 90px; }
.ar-grid { display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;max-width:1120px;margin:0 auto;align-items:start; }

/* TOC */
.ar-toc { position:sticky;top:104px;max-height:calc(100vh - 130px);overflow:auto;padding:22px 20px;border-radius:var(--radius-lg);
  background:var(--card-bg);border:1px solid var(--border-card);box-shadow:var(--shadow-card); }
.ar-toc-title { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text-1);margin:0 0 12px; }
.ar-toc-title i { color:var(--purple); }
.ar-toc ol { list-style:none;margin:0;padding:0;counter-reset:toc; }
.ar-toc li { counter-increment:toc; }
.ar-toc a { position:relative;display:block;padding:8px 10px 8px 34px;border-radius:10px;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--text-2);transition:all .2s ease; }
.ar-toc a::before { content:counter(toc,decimal-leading-zero);position:absolute;left:8px;top:8px;font-size:11px;font-weight:800;color:var(--text-4); }
.ar-toc a:hover { color:var(--purple);background:rgba(139,47,201,.06); }
.ar-toc a.active { color:var(--purple);background:rgba(139,47,201,.1); }
.ar-toc a.active::before { color:var(--pink); }
.ar-toc details > summary { list-style:none;cursor:pointer; }
.ar-toc details > summary::-webkit-details-marker { display:none; }
.ar-toc-chev { margin-left:auto;transition:transform .25s ease;display:none; }
.ar-toc details[open] .ar-toc-chev { transform:rotate(180deg); }
.ar-toc-app { margin-top:16px;padding:16px;border-radius:14px;background:var(--grad);color:#fff; }
.ar-toc-app p { margin:0 0 10px;font-size:13px;font-weight:600;line-height:1.5; }
.ar-toc-app a { display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:10px;background:#fff;color:var(--purple);font-size:13px;font-weight:800; }

/* Prose */
.ar-body { min-width:0;font-size:17.5px;line-height:1.85;color:var(--text-2); }
.ar-body > * + * { margin-top:18px; }
.ar-body h2 { scroll-margin-top:100px;font-size:clamp(23px,2.8vw,31px);font-weight:900;line-height:1.25;letter-spacing:-.4px;color:var(--text-1);margin:56px 0 0; }
.ar-body h2 .ar-n { display:block;font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pink);margin-bottom:8px; }
.ar-body p { margin:18px 0 0; }
.ar-body strong { color:var(--text-1); }
.ar-body a:not(.btn) { color:var(--purple);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(139,47,201,.35); }
.ar-body a:not(.btn):hover { color:var(--magenta);text-decoration-color:currentColor; }
.ar-lead { font-size:19px;line-height:1.8;color:var(--text-1);font-weight:500; }
.ar-answer { position:relative;padding:24px 26px 24px 28px;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(139,47,201,.08),rgba(255,107,157,.08));border:1px solid var(--border); }
.ar-answer::before { content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:4px;background:var(--grad); }
.ar-answer p { margin:0;font-size:18px;color:var(--text-1);font-weight:500; }
.ar-answer-lbl { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--purple);margin-bottom:8px; }

/* Quick answer grid */
.ar-qa { margin-top:28px;border-radius:var(--radius-lg);background:var(--card-bg);border:1px solid var(--border-card);box-shadow:var(--shadow-card);overflow:hidden; }
.ar-qa-head { display:flex;align-items:center;gap:10px;padding:16px 22px;background:var(--bg-02);border-bottom:1px solid var(--border-card);font-size:15px;font-weight:800;color:var(--text-1); }
.ar-qa-head i { color:var(--purple); }
.ar-qa dl { margin:0;display:grid;grid-template-columns:1fr 1fr; }
.ar-qa dl > div { padding:16px 22px;border-bottom:1px solid var(--border-card); }
.ar-qa dl > div:nth-child(odd) { border-right:1px solid var(--border-card); }
.ar-qa dl > div:last-child { grid-column:1/-1;border-right:0;border-bottom:0; }
.ar-qa dt { font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:4px; }
.ar-qa dd { margin:0;font-size:15.5px;line-height:1.6;font-weight:600;color:var(--text-1); }

/* Figures */
.ar-fig { margin:30px 0 0; }
.ar-fig img { width:100%;height:auto;display:block;border-radius:var(--radius-lg);border:1px solid var(--border-card); }
.ar-fig figcaption { margin-top:10px;font-size:13.5px;text-align:center;color:var(--text-3); }

/* Table */
.ar-table { margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-card);background:var(--card-bg);box-shadow:var(--shadow-card); }
.ar-table-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch; }
.ar-table table { width:100%;border-collapse:collapse;min-width:520px;font-size:15px;line-height:1.5; }
.ar-table th, .ar-table td { padding:15px 18px;text-align:center;border-bottom:1px solid var(--border-card); }
.ar-table th:first-child, .ar-table td:first-child { text-align:left; }
.ar-table thead th { font-size:14px;font-weight:800;color:var(--text-1);background:var(--bg-02); }
.ar-table thead th.ar-hl { color:#fff;background:var(--grad); }
.ar-table tbody th { font-weight:600;color:var(--text-1); }
.ar-table td.ar-hl { background:rgba(139,47,201,.05);font-weight:700;color:var(--purple); }
.ar-table tbody tr:last-child > * { border-bottom:0; }
.ar-yes { color:#10B981;margin-right:6px; } .ar-no { color:#EF4444;margin-right:6px; }

/* Steps */
.ar-steps { list-style:none;margin:26px 0 0;padding:0;position:relative; }
.ar-steps::before { content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--purple),var(--pink));opacity:.3; }
.ar-steps li { position:relative;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:center;padding:8px 0; }
.ar-steps li + li { margin-top:6px; }
.ar-step-n { position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:16px;font-weight:900;color:#fff;background:var(--grad);
  box-shadow:0 0 0 5px var(--bg-base,#fff),0 10px 20px -8px rgba(139,47,201,.6); }
.ar-steps li > div { padding:14px 18px;border-radius:14px;background:var(--card-bg);border:1px solid var(--border-card);font-size:16px;line-height:1.6;color:var(--text-1);font-weight:500; }

/* Note / tip / warn */
.ar-note { display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius-lg);font-size:16px;line-height:1.7; }
.ar-note i { flex:none;font-size:19px;margin-top:4px; }
.ar-note p { margin:0; }
.ar-note-info { background:rgba(139,47,201,.06);border:1px solid var(--border); } .ar-note-info > i { color:var(--purple); }
.ar-note-warn { background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28); } .ar-note-warn > i { color:#F59E0B; }
.ar-note-ok { background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.25); } .ar-note-ok > i { color:#10B981; }

/* Reason / tip cards */
.ar-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px; }
.ar-cards.ar-cards-2 { grid-template-columns:1fr 1fr; }
.ar-card { padding:22px;border-radius:var(--radius-lg);background:var(--card-bg);border:1px solid var(--border-card);box-shadow:var(--shadow-card);transition:transform .3s ease,border-color .3s ease; }
.ar-card:hover { transform:translateY(-4px);border-color:var(--border-hover); }
.ar-card-ico { width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:18px;margin-bottom:14px;background:rgba(139,47,201,.1);color:var(--purple); }
.ar-card:nth-child(2) .ar-card-ico { background:rgba(255,107,157,.12);color:var(--pink); }
.ar-card:nth-child(3) .ar-card-ico { background:rgba(200,80,192,.12);color:var(--magenta); }
.ar-card:nth-child(4) .ar-card-ico { background:rgba(168,85,247,.12);color:var(--electric); }
.ar-card h3 { font-size:16.5px;font-weight:800;line-height:1.35;color:var(--text-1);margin:0 0 8px; }
.ar-card p { margin:0;font-size:15px;line-height:1.7; }

/* Path pill (Settings → …) */
.ar-path { display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px; }
.ar-path span { padding:6px 12px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--text-1);background:var(--bg-02);border:1px solid var(--border-card); }
.ar-path i { font-size:11px;color:var(--text-4); }

/* Fix checklist */
.ar-fix { list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;counter-reset:fix; }
.ar-fix li { counter-increment:fix;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:var(--radius-lg);
  background:var(--card-bg);border:1px solid var(--border-card); }
.ar-fix li::before { content:counter(fix);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:900;color:var(--purple);background:rgba(139,47,201,.1); }
.ar-fix p { margin:0;font-size:16px;line-height:1.65; }

/* App CTA box */
.ar-app { display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:30px;padding:24px 26px;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,#2A0B45 0%,#8B2FC9 55%,#C850C0 85%,#FF6B9D 100%);color:#fff;box-shadow:0 26px 60px -28px rgba(139,47,201,.7); }
.ar-app img { width:58px;height:58px;border-radius:16px; }
.ar-app strong { display:block;color:#fff;font-size:17px;font-weight:800;margin-bottom:2px; }
.ar-app span { font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88); }
.ar-app .btn { background:#fff;color:var(--purple);white-space:nowrap; }
.ar-app .btn:hover { color:var(--magenta); }

/* Fair use */
.ar-fair { display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--bg-02);border:1px solid var(--border-card); }
.ar-fair i { font-size:22px;color:var(--pink);margin-top:3px; }
.ar-fair p { margin:0; }

/* FAQ */
.ar-faq { margin-top:24px; }
.ar-faq .faq-stack { max-width:none; }
.ar-faq .faq-a-inner { font-size:16px;line-height:1.75; }

/* Share + related */
.ar-share { display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:48px;padding-top:26px;border-top:1px solid var(--border-card); }
.ar-share > span { font-size:14px;font-weight:800;color:var(--text-1);margin-right:4px; }
.ar-share a, .ar-share button { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:16px;cursor:pointer;
  color:var(--text-1);background:var(--card-bg);border:1px solid var(--border-card);transition:all .25s ease; }
.ar-share a:hover, .ar-share button:hover { background:var(--grad);color:#fff;border-color:transparent; }
.ar-related { padding:80px 0;background:var(--bg-02); }
.ar-related h2 { font-size:clamp(22px,3vw,32px);font-weight:900;color:var(--text-1);margin:0 0 26px; }

/* Responsive */
@media (max-width:1024px){
  .ar-grid { grid-template-columns:1fr;gap:28px; }
  .ar-toc { position:relative;top:0;max-height:none;padding:0;overflow:hidden; }
  .ar-toc details > summary { padding:16px 18px;margin:0; }
  .ar-toc-chev { display:inline-block; }
  .ar-toc ol { padding:0 12px 14px; }
  .ar-toc-app { display:none; }
  .bl-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .bl-feat { grid-template-columns:1fr; }
  .bl-feat-body { padding:26px; }
  .ar-cards { grid-template-columns:1fr; }
}
@media (max-width:640px){
  .bl-hero { padding:112px 0 44px; }
  .bl-hero p { font-size:16.5px; }
  .bl-grid { grid-template-columns:1fr; }
  .bl-list { padding-bottom:64px; }
  .ar-head { padding-top:108px; }
  .ar-head-in { text-align:left; }
  .ar-head .bl-meta { justify-content:flex-start; }
  .ar-cover { margin-top:26px;border-radius:var(--radius-lg); }
  .ar-wrap { padding:32px 0 64px; }
  .ar-body { font-size:16.5px;line-height:1.8; }
  .ar-lead, .ar-answer p { font-size:17px; }
  .ar-body h2 { margin-top:44px; }
  .ar-answer { padding:20px 18px 20px 22px; }
  .ar-qa dl { grid-template-columns:1fr; }
  .ar-qa dl > div:nth-child(odd) { border-right:0; }
  .ar-qa dl > div { padding:14px 18px; }
  .ar-cards.ar-cards-2 { grid-template-columns:1fr; }
  .ar-table table { min-width:460px;font-size:14px; }
  .ar-table th, .ar-table td { padding:12px 10px; }
  .ar-table th:first-child, .ar-table td:first-child { position:sticky;left:0;z-index:1;background:var(--card-bg);min-width:130px;box-shadow:6px 0 12px -8px rgba(0,0,0,.15); }
  .ar-table thead th:first-child { background:var(--bg-02); }
  .ar-app { grid-template-columns:auto 1fr;padding:20px; }
  .ar-app .btn { grid-column:1/-1;width:100%;justify-content:center; }
}
[data-theme="dark"] .ar-table thead th:not(.ar-hl), [data-theme="dark"] .ar-qa-head { background:rgba(255,255,255,.04); }