/* Article v3 — the Apple-style language (homepage / site-v3 / landing-v3) for the long-form BLOG ARTICLES
   (blog/digilakshya-blog-*.php, body.blog-article-2026). Opt-in: <main class="bl3"> + this sheet linked
   right after <main>; markup and copy stay.

   Same trick as landing-v3.css: each article paints from ONE token set (--navy, --indigo, --accent,
   --text, --text2, --muted, --border, --surface, --white, --indigo-pale …) declared on :root — redefined
   on main.bl3 they re-palette the article, including its bespoke blocks; the rules below retune type and
   the shared skeleton (hero, h2, TOC, sidebar, stats, steps, callouts, pull-quote, closing CTA).
   --indigo is mostly TEXT here (links, numbers, bullets) → #0066cc light / #2997ff dark; the few FILLS
   with white type are pinned to Apple's fill blue #0071e3 (white on it = 4.6:1). */

.bl3{
  --navy:#1d1d1f; --text:#1d1d1f; --text2:#424245; --muted:#636366; --muted-aa:#636366;
  --indigo:#0066cc; --accent:#0066cc; --indigo-light:#0062c4; --indigo-pale:#eef4fc; --tint-ink:#0055b3;   /* text on the 10% blue tint: #0066cc was 4.48:1 */
  --border:#d2d2d7; --surface:#f5f5f7; --white:#ffffff;
  --green:#146c2e; --green-bg:#eaf6ed;   /* #1a7f37 was 4.48:1 on its own tint */ --amber:#9a4a00; --amber-bg:#fdf5ea; --red:#c42b1c; --red-bg:#fdeeec;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  display:block; background:#fff; color:var(--text);
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}
.bl3{
  /* the AI-HTML5 article's own token names, as aliases (they resolve on this element, so dark follows) */
  --primary:var(--indigo); --primary-dark:var(--indigo-light); --primary-light:var(--indigo); --text-body:var(--text2); --text-muted:var(--muted);
  --bg-hero:var(--surface); --bg-section:var(--surface); --tag-bg:var(--indigo-pale); --tag-text:var(--tint-ink); --check:var(--indigo);
  --callout-bg:var(--amber-bg); --callout-border:var(--amber); --card-shadow:none; --card-hover:none; --bg:#ffffff;
}
html.dark .bl3{--bg:#000000}
html.dark .bl3{
  --navy:#f5f5f7; --text:#f5f5f7; --text2:#d2d2d7; --muted:#a1a1a6; --muted-aa:#a1a1a6;
  --indigo:#2997ff; --accent:#2997ff; --indigo-light:#64b5ff; --indigo-pale:#0f2236; --tint-ink:#64b5ff;
  --border:#424245; --surface:#161617; --white:#1d1d1f;
  --green:#30d158; --green-bg:#0f2a17; --amber:#ffb340; --amber-bg:#2b1d08; --red:#ff6961; --red-bg:#2e1311;
  background:#000;
}
body.site-2026:has(.bl3){background:#fff}
html.dark body.site-2026:has(.bl3){--v3-bg:#000;--v3-bg2:#161617;--v3-line:#424245;--v3-pop:#1d1d1f;background:#000 !important}
html.dark:has(.bl3){background:#000 !important}

/* ── hero: plain ground, Apple display type ── */
.bl3 .hero,html.dark .bl3 .hero{background:var(--surface);border:0}
.bl3 .hero::before{display:none}
.bl3.bl3 .hero h1{font-family:var(--font);text-transform:none;font-size:clamp(34px,4.6vw,56px);line-height:1.07;font-weight:600;letter-spacing:-.028em;color:var(--navy);text-wrap:balance}
.bl3.bl3 .hero h1 em,.bl3.bl3 .hero h1 .accent{color:var(--muted)}
.bl3 .hero-subtitle,.bl3 .hero-sub{font-size:clamp(18px,1.8vw,21px);line-height:1.45;color:var(--muted);text-wrap:balance}
.bl3 .meta-item{font-size:14px;color:var(--muted)}
.bl3 .hero .tag,.bl3 .hero-tag,.bl3 .hero-badge{text-transform:none;letter-spacing:-.005em}

/* ── reading type ──
   Only h2 is restated (weight + the old underline rule goes). Body p/li/a/h3/h4 are left to each article:
   its own <style> loads AFTER this sheet and paints them from the tokens above already — restating them
   here at (0,1,2) beat its component rules (.step-body p, link-buttons, headings inside drawn panels). */
.bl3.bl3 article h2{font-family:var(--font);text-transform:none;font-weight:600;letter-spacing:-.02em;border:0;padding-bottom:0}
.bl3 .lead,.bl3 .lead-para{color:var(--text)}

/* ── the sidebar: TOC + related as quiet grey panels ── */
.bl3 .sidebar-widget,html.dark .bl3 .sidebar-widget{background:var(--surface);border:0;border-radius:18px}
.bl3 .sidebar-widget-header,.bl3 .toc-title,html.dark .bl3 .sidebar-widget-header,html.dark .bl3 .toc-title{background:transparent;text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:600;color:var(--navy);padding-bottom:0}
.bl3 .toc-list a,.bl3 .related-list a{font-size:14px;color:var(--text2);border-color:var(--border)}
.bl3 .toc-list a:hover,.bl3 .related-list a:hover{color:var(--indigo)}
.bl3 .toc-list a::before{background:var(--muted)}
.bl3 .related-list a::before{color:var(--muted)}

/* ── the sidebar call-to-action and the closing blocks: grey tiles, dark type, Apple pills ── */
.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta),html.dark .bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta){background:var(--surface);border:0;border-radius:22px;box-shadow:none}
.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta)::before,.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta)::after{display:none}
.bl3.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta) :is(h2,h3,h4){color:var(--navy);font-weight:600;letter-spacing:-.02em}
.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta) :is(p,.sidebar-sub),.bl3 .sidebar-rate{color:var(--muted)}
.bl3 .pre-cta-eyebrow{text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:600;color:var(--indigo)}
.bl3 :is(.sidebar-cta-btn,.sidebar-cta a,.pre-cta-btns a:first-child,.cta-block > a:first-of-type,.cta-btn,.cta-block-btn),
html.dark body.blog-article-2026 .bl3 :is(.sidebar-cta-btn,.sidebar-cta a,.pre-cta-btns a:first-child,.cta-block > a:first-of-type,.cta-btn,.cta-block-btn),
html.dark body.blog-article-2026 .bl3 :is(.sidebar-cta-btn,.sidebar-cta a,.pre-cta-btns a:first-child,.cta-block > a:first-of-type,.cta-btn,.cta-block-btn) *{background:#0071e3;color:#fff;border:0;border-radius:980px;font-weight:400;font-size:15px;box-shadow:none}
html.dark body.blog-article-2026 .bl3 :is(.sidebar-cta-btn,.sidebar-cta a,.pre-cta-btns a:first-child,.cta-block > a:first-of-type,.cta-btn,.cta-block-btn) *{background:transparent}
.bl3 :is(.sidebar-cta-btn,.sidebar-cta a,.pre-cta-btns a:first-child,.cta-btn,.cta-block-btn):hover{background:#0077ed;color:#fff}
.bl3 .pre-cta-btns a:not(:first-child),html.dark body.blog-article-2026 .bl3 .pre-cta-btns a:not(:first-child){background:rgba(0,113,227,.1);color:var(--tint-ink);border:0;border-radius:980px;box-shadow:none}

/* ── stats, steps, tags ── */
.bl3 .stat-card,html.dark .bl3 .stat-card{background:var(--surface);border:0;border-radius:18px}
.bl3 .stat-card :is(.stat-number,.s-num){font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.bl3 .stat-card :is(.stat-label,.s-lbl){text-transform:none;letter-spacing:-.005em;font-size:13px;color:var(--muted)}
.bl3 .step-num,html.dark body.blog-article-2026 .bl3 .step-num{background:var(--indigo-pale);color:var(--indigo);font-weight:600}
.bl3 .tag,html.dark .bl3 .tag{background:var(--surface);color:var(--text2);border:0;font-weight:500;text-transform:none;letter-spacing:-.005em}

/* ── callouts and the pull-quote: tinted tiles without rules ── */
.bl3 :is(.inline-callout,.info-box),html.dark .bl3 :is(.inline-callout,.info-box){background:var(--amber-bg);border:0;border-radius:16px;color:var(--text2)}
.bl3 :is(.inline-callout,.info-box) strong{color:var(--amber)}
.bl3 .info-box.blue,html.dark .bl3 .info-box.blue{background:var(--indigo-pale);color:var(--text2)}
.bl3 .info-box.blue strong{color:var(--indigo)}
.bl3 .pullquote,html.dark .bl3 .pullquote{background:transparent;border:0;border-left:0;font-family:var(--font);font-size:clamp(22px,2.4vw,28px);line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--navy);font-style:normal}
.bl3 .pullquote cite{color:var(--muted);text-transform:none;letter-spacing:0}

/* dark-2026.css paints the articles' cards/panels with LITERAL navy greys at (0,3,2) — tokens cannot reach
   them; restate them one level up on the Apple dark greys (#161617 tile, #1d1d1f raised, #424245 rule) */
html.dark body.blog-article-2026 .bl3 :is(.sidebar-card,.sidebar-widget,.format-card,.related-card,.platform-card,
  .tool-card,.dco-component,.objection-a,.eco-box,.dt-node,.cost-table-wrap,.calc-card){background:var(--surface);border-color:var(--border)}
html.dark body.blog-article-2026 .bl3 :is(.platform-card-header,.badge,.ad-after,.proof-point,.dco-engine,
  .related-thumb,.related-icon,.compare-col--human,.scale-visual){background:var(--white);border-color:var(--border)}
html.dark body.blog-article-2026 .bl3 pre,html.dark .bl3 code,html.dark .bl3 :is(input,select,textarea){background:var(--white);border-color:var(--border)}
html.dark body.blog-article-2026 .bl3 :is(.article-tag,span.badge,.tag){border-color:var(--border)}

/* light-on-navy leftovers INSIDE the panels made light above (literal #a5b4fc / #c7d2fe / #fff in each article) */
.bl3.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta) :is(.sidebar-cta-eyebrow,.sidebar-cta-badge,.cta-sub,.cta-stat-label,.cta-feat,.cta-note,small){color:var(--muted)}
.bl3.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta) :is(.cta-stat-num,strong){color:var(--navy)}
.bl3.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta) :is(a[class*="btn"],a[class*="cta"]){background:rgba(0,113,227,.1);color:var(--tint-ink);border:0;border-radius:980px;box-shadow:none}
.bl3.bl3.bl3 :is(.sidebar-cta,.pre-cta,.cta-block,.article-cta,.final-cta) :is(a[class*="btn"],a[class*="cta"]):first-of-type{background:#0071e3;color:#fff}
/* the sidebar CTA's own indigo-tinted eyebrow / badge chips lose their tint (grey text on it was 3.8–4.0:1) */
.bl3.bl3.bl3 .sidebar-cta :is(.sidebar-cta-eyebrow,.sidebar-cta-badge){background:var(--white);color:var(--text2);border:0}
/* the file-size article's before/after code figures: its literal #dc2626 is 4.44:1 on the grey tile */
.bl3 .compare-code .val{color:var(--red)}
/* drawn illustrations keep their light-mode colours in dark (they depict an email / an ad, not the page) */
html.dark .bl3 :is(.mock-email,.email-client) a{color:#0066cc}
/* tinted good/bad columns and myth answers follow the tint tokens in dark */
html.dark .bl3 .timeline-col.bad{background:var(--red-bg)}
html.dark .bl3 .timeline-col.good{background:var(--green-bg)}
html.dark .bl3 .myth-truth{color:var(--green)}

/* ── the BLOG INDEX (blog.php: div.bl3.bl3-index wraps hero + stats + main) ── */
div.bl3-index .hero-dots{display:none}
div.bl3-index .hero{padding:80px 2rem 64px}
div.bl3-index .hero-eyebrow,html.dark div.bl3-index .hero-eyebrow{background:transparent;border:0;padding:0;text-transform:none;letter-spacing:-.01em;font-size:17px;font-weight:600;color:var(--indigo)}
div.bl3-index.bl3 .hero h1{color:var(--navy)}
div.bl3-index .filter-pill,html.dark div.bl3-index .filter-pill{background:var(--white);border:0;color:var(--text2);font-size:15px;font-weight:400;padding:8px 18px;border-radius:980px}
div.bl3-index .filter-pill:hover{background:var(--indigo-pale);color:var(--tint-ink)}
div.bl3-index .filter-pill.active,html.dark div.bl3-index .filter-pill.active{background:var(--navy);color:var(--white)}
div.bl3-index .stats-bar2,html.dark div.bl3-index .stats-bar2{background:var(--surface);border:0}
div.bl3-index .sbar-dot{background:var(--muted)}
div.bl3-index .section-title{font-weight:600;letter-spacing:-.02em;font-size:24px}
div.bl3-index :is(.featured-post,.post-card),html.dark body.site-2026 div.bl3-index :is(.featured-post,.post-card){border:0;border-radius:22px;background:var(--surface);box-shadow:none}
div.bl3-index :is(.featured-post,.post-card):hover{transform:none;box-shadow:none}
div.bl3-index :is(.featured-post,.post-card):hover :is(h2,h3,.card-title){color:var(--indigo)}
div.bl3-index .featured-badge{text-transform:none;letter-spacing:-.005em;font-weight:600;background:var(--white);color:var(--text2)}
div.bl3-index.bl3 .featured-content h2{font-weight:600;letter-spacing:-.022em}
div.bl3-index .post-tag{text-transform:none;letter-spacing:-.005em;font-weight:600}
div.bl3-index .read-btn,div.bl3-index .newsletter-btn{background:#0071e3;color:#fff;border-radius:980px;font-weight:400;font-size:15px}
div.bl3-index .read-btn:hover,div.bl3-index .newsletter-btn:hover{background:#0077ed}
div.bl3-index .card-link{color:var(--indigo);font-weight:400}
div.bl3-index .newsletter,html.dark div.bl3-index .newsletter{background:var(--surface);border:0;border-radius:22px}
div.bl3-index .newsletter-input{border-radius:12px;border-color:var(--border);background:var(--white);color:var(--text)}

/* the index's category tags typed their own colours (#0284c7 on #e0f2fe = 3.6:1, amber 3.1:1) — neutral pills */
div.bl3-index .post-tag[class*="tag-"],html.dark div.bl3-index .post-tag[class*="tag-"]{background:var(--white);color:var(--text2)}
html.dark div.bl3-index :is(.icon-box,.thumb-pill){border-color:var(--border)}

/* AI-HTML5 article: its pull-quote paragraph is typed white (it sat on a filled panel); its closing
   panel's white button takes the dark text-blue */
.bl3.bl3 .pullquote p{color:var(--navy)}
.bl3 .final-cta .btn-white,html.dark .bl3 .final-cta .btn-white{background:#0071e3;color:#fff;border:0}

/* AI-HTML5's sidebar promo (a --primary gradient with white type) → the same grey tile as .sidebar-cta */
.bl3.bl3 .sidebar-promo,html.dark .bl3.bl3 .sidebar-promo{background:var(--surface);border-radius:18px}
.bl3.bl3 .sidebar-promo h4{color:var(--navy);font-weight:600}
.bl3.bl3 .sidebar-promo p{color:var(--muted)}
.bl3.bl3 .sidebar-promo a,html.dark .bl3.bl3 .sidebar-promo a{background:#0071e3;color:#fff;border-radius:980px;font-weight:400;box-shadow:none}

/* the author disc carries white initials on a --primary gradient (the dark text-blue made it 3.0:1) */
.bl3 .hero-avatar,html.dark .bl3 .hero-avatar,html.dark body.blog-article-2026 .bl3 .hero-avatar,html.dark body.blog-article-2026 .bl3 .hero-avatar *{background:#0071e3;color:#fff}
html.dark body.blog-article-2026 .bl3 .hero-avatar *{background:transparent}   /* dark-2026 sets #0b1220 on it + children (0,3,2) */

@media(max-width:720px){
  .bl3.bl3 .hero h1{font-size:clamp(30px,8.6vw,40px)}
}

/* any bl3 wrapper's headline (the AI-HTML5 article's h1 is not in a .hero h1 rule theme-v2 loses to) */
.bl3.bl3 h1{font-family:var(--font);text-transform:none;font-weight:600;letter-spacing:-.028em;line-height:1.07}
.bl3 .hero h1 .highlight{color:var(--muted)}

/* AI-HTML5's .final-cta: its <strong> is typed white too */
.bl3.bl3.bl3 .final-cta strong{color:var(--navy)}