/* =====================================================================
   BLOG (single post) — light reading body on the Phoenix night theme.
   Loaded AFTER styles.css, only on blog pages. Nav, hero shell and the
   city footer come from styles.css; everything here is the light body.
   ===================================================================== */

body{ background:#f4f1ea; }

/* ---- light tokens (blog.css only loads on blog pages; the navy hero/footer
        use the separate --ink/--navy tokens from styles.css, so no conflict) ---- */
body{
  --paper:#f6f3ec;
  --paper-card:#fffdf8;
  --paper-2:#edeae1;
  --ink-d:#1b2438;
  --ink-d2:#566077;
  --ink-d3:#8a92a4;
  --line-d:rgba(22,32,60,.12);
  --peach:#f7e6d2;
}

/* =====================  BLOG HERO (navy band, clean foot)  ===================== */
.blog-hero{ position:relative; overflow:hidden; isolation:isolate; background:#0c1530;
  padding-top:118px; padding-bottom:clamp(40px,6vh,68px); }
.blog-hero .hero-bg{ position:absolute; inset:0; z-index:0; opacity:.7;
  background:#0c1530 url('assets/sky.jpg') center 26% / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,rgba(0,0,0,0) 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 30%,rgba(0,0,0,0) 96%); }
.blog-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,21,48,.5) 0%, rgba(12,21,48,.18) 34%, rgba(12,21,48,.72) 82%, #0c1530 100%); }
.blog-hero .stars{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.blog-hero .container{ position:relative; z-index:2; }
.blog-hero .crumb{ font-size:12px; letter-spacing:.14em; color:var(--ink-dim); }
.blog-hero .crumb a{ color:var(--ink-dim); text-decoration:none; }
.blog-hero .crumb a:hover{ color:var(--ember); }
.blog-hero h1{ font-family:var(--serif); font-weight:700; letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(30px,4.4vw,52px); max-width:20ch; margin-top:16px; text-wrap:balance; }
.blog-hero .dek{ margin-top:16px; max-width:60ch; color:#d7defa; font-size:clamp(15px,1.4vw,17px); line-height:1.6; }

.blog-hero .meta-row{ margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid rgba(174,187,221,.18); padding-top:24px; }
.blog-hero .kb-tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ember);
  background:rgba(240,131,33,.14); border:1px solid rgba(240,131,33,.32); padding:7px 14px; border-radius:999px; }
.blog-hero .kb-type{ margin-left:14px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.blog-hero .byline{ display:flex; align-items:center; gap:14px; }
.blog-hero .byline .av{ width:46px; height:46px; border-radius:50%; flex:0 0 46px; object-fit:cover;
  background:rgba(255,255,255,.08); border:1px solid var(--line-2); }
.blog-hero .byline b{ font-size:15px; font-weight:600; display:block; }
.blog-hero .byline span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.blog-hero .share{ display:flex; align-items:center; gap:14px; }
.blog-hero .read{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.blog-hero .share-i{ display:flex; gap:9px; }
.blog-hero .share-i a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; }
.blog-hero .share-i a:hover{ background:rgba(246,146,30,.2); border-color:var(--ember); }
.blog-hero .share-i svg{ width:15px; height:15px; fill:var(--ink); }

/* =====================  BODY LAYOUT  ===================== */
.blog-main{ background:var(--paper); color:var(--ink-d); position:relative; z-index:3; }
.blog-grid{ display:grid; grid-template-columns:288px minmax(0,1fr); gap:clamp(28px,3.4vw,56px);
  align-items:start; padding-block:clamp(48px,6vh,80px); }

/* ---- left sidebar ---- */
.blog-side{ position:sticky; top:28px; display:flex; flex-direction:column; gap:26px; }

.toc{ display:flex; flex-direction:column; }
.toc-step{ border-bottom:1px solid var(--line-d); }
.toc-step > summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:12px;
  padding:14px 0; font-size:14px; line-height:1.4; color:var(--ink-d2); font-weight:500; }
.toc-step > summary::-webkit-details-marker{ display:none; }
.toc-step > summary .pm{ margin-left:auto; flex:0 0 16px; width:16px; height:16px; position:relative; margin-top:2px; }
.toc-step > summary .pm::before, .toc-step > summary .pm::after{ content:""; position:absolute; background:var(--ink-d3); }
.toc-step > summary .pm::before{ left:0; right:0; top:7px; height:2px; }
.toc-step > summary .pm::after{ top:0; bottom:0; left:7px; width:2px; transition:transform .2s; }
.toc-step[open] > summary{ color:var(--ink-d); font-weight:600; }
.toc-step[open] > summary .pm::after{ transform:scaleY(0); }
.toc-sub{ list-style:none; margin:0 0 14px; padding-left:2px; border-left:2px solid var(--line-d); }
.toc-sub li a{ display:block; padding:7px 0 7px 16px; margin-left:-2px; border-left:2px solid transparent;
  font-size:13px; color:var(--ink-d2); text-decoration:none; transition:color .18s, border-color .18s; }
.toc-sub li a:hover{ color:var(--ink-d); }
.toc-sub li a.active, .toc-sub li.active a{ color:var(--ember); border-left-color:var(--ember); font-weight:500; }

/* ---- TOC as direct scroll links (replaced the details/accordion pattern) ---- */
.toc-link{ display:flex; align-items:flex-start; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--line-d); font-size:14px; line-height:1.4;
  color:var(--ink-d2); font-weight:500; text-decoration:none; transition:color .18s; }
.toc-link:hover{ color:var(--ember); }
.toc-link .tl-arrow{ margin-left:auto; flex:0 0 16px; width:16px; height:16px; position:relative; margin-top:2px; }
.toc-link .tl-arrow::before{ content:"\2192"; position:absolute; right:0; top:-3px;
  font-size:15px; color:var(--ink-d3); transition:color .18s, transform .18s; }
.toc-link:hover .tl-arrow::before{ color:var(--ember); transform:translateX(2px); }

.resources{ background:var(--peach); border-radius:14px; padding:22px 22px 8px; }
.resources h4{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink-d); margin-bottom:6px; }
.resources .res-note{ font-size:12px; line-height:1.5; color:var(--ink-d3); margin-bottom:8px; }
.resources a{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 0; border-bottom:1px solid rgba(22,32,60,.1); color:var(--ink-d2); text-decoration:none; font-size:13.5px; transition:color .18s; }
.resources a:last-child{ border-bottom:0; }
.resources a:hover{ color:var(--ember); }
.resources a svg{ width:15px; height:15px; flex:0 0 15px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ---- expert profile card (element #4) ---- */
.expert-card2{ background:var(--paper-2); border-radius:16px; padding:26px 24px; }
.expert-card2 .ecard-eyebrow{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:14px; }
.expert-card2 .ehead{ display:flex; align-items:center; gap:14px; }
.expert-card2 .ehead .av{ width:58px; height:58px; border-radius:50%; flex:0 0 58px; object-fit:cover;
  background:#dcd8cf; border:1px solid var(--line-d); }
.expert-card2 .ehead b{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink-d); display:block; line-height:1.15; }
.expert-card2 .ehead span{ font-size:13.5px; color:var(--ink-d3); }
.expert-card2 .erow{ display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--line-d); }
.expert-card2 .erow:first-of-type{ margin-top:18px; }
.expert-card2 .erow svg{ width:18px; height:18px; flex:0 0 18px; stroke:var(--ember); fill:none; stroke-width:2; }
.expert-card2 .erow a, .expert-card2 .erow span{ font-size:14px; color:var(--ink-d); text-decoration:none; }
.expert-card2 .erow a:hover{ color:var(--ember); }
.expert-card2 .ebio{ font-size:13.5px; line-height:1.65; color:var(--ink-d2); padding-top:16px; border-top:1px solid var(--line-d); }
.expert-card2 .ebio a{ color:var(--ember); }
.expert-card2 .esoc{ display:flex; gap:12px; margin-top:20px; }
.expert-card2 .esoc a{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--ember); color:var(--ember);
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; }
.expert-card2 .esoc a:hover{ background:var(--ember); color:#fff; }
.expert-card2 .esoc svg{ width:17px; height:17px; fill:currentColor; }

/* ---- right rail ---- */
.blog-rail{ position:sticky; top:28px; display:flex; flex-direction:column; gap:22px; }
.rail-share{ display:flex; flex-direction:column; gap:12px; }
.rail-share .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-d3); }
.rail-share .ic{ display:flex; gap:10px; flex-wrap:wrap; }
.rail-share .ic a{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line-d); color:var(--ink-d);
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, color .2s; }
.rail-share .ic a:hover{ background:var(--ink-d); border-color:var(--ink-d); color:#fff; }
.rail-share .ic svg{ width:15px; height:15px; fill:currentColor; }
.rail-cta{ background:var(--ink-d); border-radius:14px; padding:22px; color:#eef2ff; }
.rail-cta b{ font-family:var(--serif); font-size:17px; font-weight:600; display:block; line-height:1.2; }
.rail-cta p{ font-size:13px; color:#b7c0d8; line-height:1.55; margin:9px 0 16px; }
.rail-cta a{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ember); text-decoration:none; }
.rail-cta a svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s; }
.rail-cta a:hover svg{ transform:translateX(3px); }

/* =====================  ARTICLE TYPOGRAPHY  ===================== */
.article{ max-width:820px; }
.article .embed{ aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin-bottom:28px; background:#0c1530; }
.article .embed iframe, .article .embed img, .article .embed .imgph-l{ width:100%; height:100%; border:0; display:block; object-fit:cover; }
.article p{ font-size:16.5px; line-height:1.78; color:#28324a; margin-bottom:1.15em; }
.article .lede{ font-size:18.5px; line-height:1.7; color:var(--ink-d); }
.article h2{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.5vw,28px); color:var(--ink-d);
  line-height:1.2; margin:1.7em 0 .55em; letter-spacing:-.02em; scroll-margin-top:24px; }
.article h3{ font-family:var(--sans); font-weight:700; font-size:20px; color:var(--ink-d); margin:1.4em 0 .5em; letter-spacing:-.02em; }
.article a{ color:var(--ember); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.article ul, .article ol{ margin:0 0 1.2em; padding-left:1.35em; }
.article li{ font-size:16.5px; line-height:1.7; color:#28324a; margin-bottom:.5em; }
.article ul li{ list-style:none; position:relative; }
.article ul li::before{ content:""; position:absolute; left:-1.05em; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--ember); }
.article ol{ list-style:decimal; }
.article ol li::marker{ color:var(--ember); font-weight:700; }
.article figure{ margin:30px 0; }
.article figure .imgph-l{ aspect-ratio:16/9; }
.article figcaption{ margin-top:10px; font-size:13.5px; color:var(--ember); line-height:1.5; }
.article .published{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line-d);
  font-size:13.5px; letter-spacing:.04em; color:var(--ink-d3); }

/* real screenshots (KB articles) — show full, uncropped, framed.
   width:auto + max-width:100% so small screenshots are never upscaled (which looks
   pixelated, especially on retina); they sit at natural size, centred. */
.article figure img.shot{ width:auto; max-width:100%; height:auto; display:block;
  margin-left:auto; margin-right:auto; border-radius:10px;
  border:1px solid #e2ded3; box-shadow:0 18px 40px -28px rgba(20,30,60,.45); }

/* reference table (UTM parameters etc.) */
.article .tbl-wrap{ margin:28px 0; overflow-x:auto; border:1px solid #e6e2d8;
  border-radius:12px; -webkit-overflow-scrolling:touch; }
.article table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.article thead th{ background:#f4f1ea; text-align:left; font-family:var(--serif); font-weight:600;
  font-size:14px; color:var(--ink-d); padding:13px 18px; border-bottom:1px solid #e6e2d8; }
.article tbody td{ padding:13px 18px; border-bottom:1px solid #efece4; color:#39435c;
  line-height:1.55; vertical-align:top; }
.article tbody tr:last-child td{ border-bottom:0; }
.article tbody tr:nth-child(even) td{ background:#faf8f3; }
.article .utm-key{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px;
  color:var(--ember); font-weight:600; white-space:nowrap; }
.article td .ex{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; color:#5b6473; }

/* download callout (KB) */
.article .dl-callout{ display:flex; align-items:center; gap:18px; margin:30px 0; padding:20px 24px;
  border-radius:14px; background:rgba(240,131,33,.07); border:1px solid rgba(240,131,33,.22); }
.article .dl-callout .dl-ic{ flex:0 0 44px; width:44px; height:44px; border-radius:11px;
  background:rgba(240,131,33,.14); display:flex; align-items:center; justify-content:center; }
.article .dl-callout .dl-ic svg{ width:22px; height:22px; stroke:var(--ember); fill:none; stroke-width:2; }
.article .dl-callout .dl-tx{ flex:1; min-width:0; }
.article .dl-callout .dl-tx b{ display:block; font-family:var(--serif); font-size:17px; color:var(--ink-d); }
.article .dl-callout .dl-tx span{ font-size:13.5px; color:var(--ink-d2); }
.article .dl-callout .btn{ flex:0 0 auto; }
@media (max-width:560px){ .article .dl-callout{ flex-wrap:wrap; } .article .dl-callout .btn{ width:100%; text-align:center; } }

/* sidebar quick-links card (replaces author card on KB articles) */
.kb-links{ background:var(--paper-card); border:1px solid var(--line-d); border-radius:16px; padding:22px 22px 10px; }
.kb-links h4{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-d3); margin-bottom:4px; }
.kb-links .kl-note{ font-size:13px; color:var(--ink-d2); line-height:1.5; margin-bottom:14px; }
.kb-links a{ display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line-d);
  font-size:14px; color:var(--ink-d); text-decoration:none; line-height:1.4; }
.kb-links a:hover{ color:var(--ember); }
.kb-links a svg{ flex:0 0 16px; width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; margin-left:auto; }

/* =====================  KB DOCUMENTATION HEADER (distinct from blog hero)  ===================== */
.kb-hero{ padding-top:100px; padding-bottom:clamp(28px,4vh,42px); background:#0b1430; }
.kb-hero .hero-bg{ opacity:.16; background-position:center 42%; filter:saturate(.8); }
.kb-hero::after{ background:linear-gradient(180deg, rgba(11,20,48,.76) 0%, rgba(11,20,48,.88) 70%, #0b1430 100%); }
.kb-hero .crumb{ margin-bottom:20px; }
.kb-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ember); font-weight:700; }
.kb-eyebrow svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
.kb-hero h1{ font-size:clamp(27px,3.3vw,40px); max-width:24ch; margin-top:14px; line-height:1.13; }
.kb-hero .dek{ font-size:clamp(14px,1.25vw,16px); max-width:66ch; margin-top:14px; color:#cdd6f3; }
.kb-meta{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(174,187,221,.16);
  display:flex; align-items:center; gap:13px; flex-wrap:wrap; font-size:12px; letter-spacing:.04em; color:var(--ink-dim); }
.kb-meta .kb-tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ember);
  background:rgba(240,131,33,.14); border:1px solid rgba(240,131,33,.32); padding:6px 13px; border-radius:999px; }
.kb-meta .kb-dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); flex:0 0 3px; }

/* KB article footer: "was this helpful" + compact related-list (replaces blog image cards) */
.kb-helpful{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:16px; padding:22px 26px; }
.kb-helpful > span{ font-family:var(--serif); font-size:19px; color:var(--ink); }
.kb-vote{ display:flex; gap:10px; }
.kb-vote button{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); border-radius:10px; padding:9px 22px; cursor:pointer;
  transition:border-color .18s, color .18s, background .18s; }
.kb-vote button svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.kb-vote button:hover{ border-color:var(--ember); color:var(--ember); }
.kb-vote button.is-on{ background:var(--ember); border-color:var(--ember); color:#1a1206; }
.kb-vote.voted button:not(.is-on){ opacity:.45; }
.kb-related{ margin-top:clamp(36px,5vh,52px); }
.kb-related h2{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.4vw,30px); color:var(--ink); margin-bottom:6px; }
.kb-related ul{ list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--line-2); }
.kb-related li{ border-bottom:1px solid var(--line-2); }
.kb-related a{ display:flex; align-items:center; gap:18px; padding:18px 6px; text-decoration:none;
  color:var(--ink); transition:color .18s, padding-left .18s; }
.kb-related a:hover{ color:var(--ember); padding-left:14px; }
.kb-related .kb-rcat{ flex:0 0 150px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.kb-related .kb-rt{ flex:1; font-family:var(--serif); font-size:18px; line-height:1.3; }
.kb-related a svg{ flex:0 0 18px; width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; opacity:.55; }
@media (max-width:640px){
  .kb-related a{ flex-wrap:wrap; gap:6px; }
  .kb-related .kb-rcat{ flex-basis:100%; }
  .kb-related a svg{ display:none; }
}


.imgph-l{ position:relative; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#eae6dd,#eae6dd 11px,#e2ded3 11px,#e2ded3 22px); }
.imgph-l span{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; letter-spacing:.08em;
  color:#9aa0ac; text-transform:uppercase; text-align:center; padding:10px; }

/* =====================  ELEMENT: Key Takeaways / Summary box  ===================== */
.kt{ background:var(--peach); border-radius:14px; overflow:hidden; margin:32px 0; }
.kt > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:20px 24px;
  font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink-d); }
.kt > summary::-webkit-details-marker{ display:none; }
.kt > summary .ktic{ width:30px; height:30px; flex:0 0 30px; color:var(--ink-d); }
.kt > summary .ktic svg{ width:30px; height:30px; stroke:var(--ink-d); fill:none; stroke-width:1.8; }
.kt > summary .chev{ margin-left:auto; width:18px; height:18px; stroke:var(--ink-d); fill:none; stroke-width:2.2; transition:transform .25s; }
.kt[open] > summary .chev{ transform:rotate(180deg); }
.kt .ktbody{ padding:0 26px 24px 68px; }
.kt .ktbody ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.kt .ktbody li{ position:relative; padding-left:20px; font-size:15px; line-height:1.6; color:#39435c; }
.kt .ktbody li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--ink-d); }

/* =====================  ELEMENT: Pull quote  ===================== */
.pullquote{ background:#ecedf1; border-radius:12px; padding:30px 34px 30px 30px; margin:34px 0; border-left:4px solid #8e98b6; }
.pullquote .mark{ font-family:var(--serif); font-size:60px; line-height:.7; color:#8e98b6; display:block; height:34px; }
.pullquote p{ font-size:18px; line-height:1.6; color:#2c3650; margin:6px 0 0; }
.pullquote .pq-name{ font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink-d); margin-top:20px; }
.pullquote .pq-role{ font-size:13.5px; color:var(--ink-d3); margin-top:3px; }

/* =====================  ELEMENT: In-line CTA banner  ===================== */
.cta-banner{ border-radius:18px; margin:36px 0; padding:clamp(30px,4vw,44px); }
.cta-banner h3{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.16; letter-spacing:-.01em; }
.cta-banner p{ font-size:15.5px; line-height:1.62; margin-top:14px; }
.cta-banner .cta-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.btn-line{ background:transparent; border:1px solid rgba(22,32,60,.28); color:var(--ink-d); }
.btn-line:hover{ border-color:var(--ink-d); }

/* centered variants */
.cta-banner.center{ text-align:center; }
.cta-banner.center .cta-btns{ justify-content:center; }
.cta-banner.center p{ max-width:60ch; margin-inline:auto; margin-top:14px; }

/* light */
.cta-banner.light{ background:#efece3; color:var(--ink-d); }
.cta-banner.light p{ color:var(--ink-d2); }

/* dark */
.cta-banner.dark{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 130% at 80% -10%, rgba(40,70,140,.55), rgba(12,21,48,0) 55%),
             radial-gradient(90% 120% at 10% 110%, rgba(20,45,95,.6), rgba(12,21,48,0) 50%), #0c1530; }
.cta-banner.dark p{ color:#c5cde6; }
.cta-banner.dark .btn-line{ border-color:rgba(255,255,255,.4); color:#fff; }
.cta-banner.dark .btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* split image */
.cta-banner.split{ padding:0; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; background:#efece3; color:var(--ink-d); }
.cta-banner.split .cta-text{ padding:clamp(28px,3.2vw,40px); align-self:center; }
.cta-banner.split p{ color:var(--ink-d2); }
.cta-banner.split .cta-img{ min-height:240px; background:repeating-linear-gradient(135deg,#3a55d6,#3a55d6 14px,#3450cc 14px,#3450cc 28px);
  display:flex; align-items:center; justify-content:center; }
.cta-banner.split .cta-img span{ font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.85); text-transform:uppercase; }
.cta-banner.split.rev .cta-text{ order:2; }

/* the banners live inside .article, so re-assert button + heading styling
   over the generic `.article a` / `.article h3` rules */
.cta-banner .btn{ text-decoration:none; }
.cta-banner .btn-primary{ color:#1a1206; }
.cta-banner.dark h3{ color:#fff; }
.cta-banner.light h3, .cta-banner.split h3{ color:var(--ink-d); }
.cta-banner.light .btn-line, .cta-banner.split .btn-line{ color:var(--ink-d); border-color:rgba(22,32,60,.28); }
.cta-banner.light .btn-line:hover, .cta-banner.split .btn-line:hover{ border-color:var(--ink-d); }

/* =====================  RELATED ARTICLES  ===================== */
.related{ background:linear-gradient(180deg, #0a1124 0%, #0a1124 42%, #061a40 78%, #021c46 100%);
  color:#dbe2fa; position:relative; z-index:3; padding-block:clamp(54px,7vh,90px) clamp(96px,13vh,150px); }
.related .rel-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:34px; }
.related h2{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.01em; color:#fff; }
.related .rel-pill{ font-size:13px; color:#dbe2fa; text-decoration:none; border:1px solid var(--line-2); border-radius:999px; padding:9px 18px; transition:border-color .2s, color .2s; }
.related .rel-pill:hover{ border-color:var(--ember); color:var(--ember); }
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.rel-card{ background:var(--paper-card); border:1px solid var(--line-d); border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.rel-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -34px rgba(20,30,60,.4); }
.rel-card .imgph-l{ aspect-ratio:16/10; border-radius:0; }
.rel-card .rc-body{ padding:20px 22px 24px; }
.rel-card .rc-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-d3); }
.rel-card .rc-meta .cat{ color:var(--ember); font-weight:700; }
.rel-card h3{ font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ink-d); margin:14px 0 8px; }
.rel-card p{ font-size:14px; color:var(--ink-d2); line-height:1.6; }

/* =====================  COMPANY PROFILE CTA (dark, blends into footer)  =====================
   The section fades down into the city image's own top-sky colour (#021c46),
   and .cityscape carries that same colour as its backdrop, so the masked
   top of the photo fades in seamlessly instead of bleeding onto the cream body. */
.profile-cta{ position:relative; z-index:3; padding-block:clamp(56px,8vh,96px) clamp(96px,13vh,150px);
  background:linear-gradient(180deg, #0c1530 0%, #0a1124 30%, #0a1124 46%, #061a40 78%, #021c46 100%); }
/* the photographic footer sits on the same sky colour it fades from */
.cityscape{ background:#021c46; }
.profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.profile-cta h2{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.6vw,44px); color:#fff; letter-spacing:-.01em; line-height:1.1; }
.profile-cta .pc-sub{ color:#b7c0d8; font-size:16px; line-height:1.6; margin-top:14px; max-width:44ch; }
.profile-cta .field{ margin-top:22px; }
.profile-cta label{ display:block; font-size:13px; color:#cdd5ea; margin-bottom:8px; }
.profile-cta .ip{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:999px; padding:0 18px; }
.profile-cta .ip svg{ width:18px; height:18px; stroke:var(--ink-faint); fill:none; stroke-width:2; flex:0 0 18px; }
.profile-cta .ip input{ flex:1; background:transparent; border:0; outline:none; color:var(--ink); font-family:var(--sans); font-size:15px; padding:14px 0; }
.profile-cta .ip input::placeholder{ color:var(--ink-faint); }
.profile-cta .btn-primary{ width:100%; justify-content:center; margin-top:26px; }
.profile-cta .pc-media{ aspect-ratio:16/12; border-radius:18px; }

@media (max-width:1080px){
  .blog-grid{ grid-template-columns:260px minmax(0,1fr); }
  .blog-rail{ display:none; }
}
@media (max-width:860px){
  .blog-grid{ grid-template-columns:minmax(0,1fr); }
  .blog-side{ position:static; order:2; }
  .article{ max-width:none; min-width:0; order:1; }
  .profile-grid{ grid-template-columns:1fr; }
  .profile-cta .pc-media{ order:-1; }
}
@media (max-width:560px){
  .cta-banner.split{ grid-template-columns:1fr; }
  .cta-banner.split.rev .cta-text{ order:0; }
  .blog-hero .meta-row{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   BLOG INDEX / LISTING (Blog.html)
   ===================================================================== */

/* hero used as a listing header (title + sub + featured carousel) */
.blog-hero.index h1{ max-width:none; }
.blog-hero.index .dek{ margin-bottom:6px; }

/* ---- featured carousel ---- */
.blog-feat{ position:relative; margin-top:30px; }
.blog-feat .track{ overflow:hidden; border-radius:18px; box-shadow:0 40px 90px -50px rgba(0,0,0,.7); }
.blog-feat .slides{ display:flex; transition:transform .5s cubic-bezier(.4,0,.1,1); }
.fcard{ flex:0 0 100%; display:grid; grid-template-columns:1.04fr .96fr; background:var(--paper-card); color:var(--ink-d);
  text-decoration:none; min-height:286px; }
.fcard .ftext{ padding:clamp(26px,2.8vw,38px); display:flex; flex-direction:column; }
.fcard .fpills{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fcard .pill{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:999px; background:#eceae1; color:var(--ink-d2); }
.fcard .pill.cat{ color:var(--ember); background:rgba(240,131,33,.12); font-weight:700; }
.fcard h2{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.5vw,30px); line-height:1.16; letter-spacing:-.01em; margin:20px 0 12px; }
.fcard .fex{ font-size:15px; line-height:1.62; color:var(--ink-d2); }
.fcard .fauthor{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.fcard .fauthor .who{ display:flex; align-items:center; gap:11px; }
.fcard .fauthor .av{ width:38px; height:38px; border-radius:50%; flex:0 0 38px; background:#dcd8cf; border:1px solid var(--line-d);
  display:flex; align-items:center; justify-content:center; }
.fcard .fauthor .av svg{ width:20px; height:20px; }
.fcard .fauthor b{ font-size:13.5px; font-weight:600; color:var(--ink-d); }
.fcard .fauthor .read{ font-size:12.5px; color:var(--ink-d3); }
.fcard .fimg{ position:relative;
  background:radial-gradient(120% 120% at 70% 20%, #5b7cf0, #3550c8 60%, #2a3fae);
  display:flex; align-items:center; justify-content:center; }
.fcard .fimg span{ font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.85); text-transform:uppercase; text-align:center; padding:14px; }
.blog-feat .fnav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:background .2s; z-index:2; }
.blog-feat .fnav:hover{ background:rgba(255,255,255,.26); }
.blog-feat .fnav svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.blog-feat .fnav.prev{ left:-14px; }
.blog-feat .fnav.next{ right:-14px; }
.blog-feat .dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.blog-feat .dots button{ width:8px; height:8px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.3); transition:background .2s, width .2s; }
.blog-feat .dots button.on{ background:var(--ember); width:22px; border-radius:999px; }

/* ---- listing body ---- */
.blog-list-wrap{ background:var(--paper); color:var(--ink-d); position:relative; z-index:3; padding-block:clamp(44px,6vh,72px); }
.blog-chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(34px,5vh,52px); }
.blog-chip{ font-size:13px; color:var(--ink-d2); background:var(--paper-card); border:1px solid var(--line-d); border-radius:999px;
  padding:10px 18px; cursor:pointer; transition:color .18s, border-color .18s, background .18s; }
.blog-chip:hover{ color:var(--ink-d); border-color:rgba(22,32,60,.25); }
.blog-chip[aria-pressed="true"]{ background:var(--ember); border-color:var(--ember); color:#1a1206; font-weight:600; }

.blog-list{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.blog-list .rel-card .imgph-l{ aspect-ratio:16/9; }
.blog-empty2{ display:none; text-align:center; color:var(--ink-d2); font-size:15px; padding:50px 0; }
.blog-empty2.show{ display:block; }

/* ---- light pagination ---- */
.blog-pager{ margin-top:clamp(40px,6vh,64px); display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.blog-pager a, .blog-pager span{ font-size:14px; color:var(--ink-d2); text-decoration:none; min-width:40px; height:40px; padding:0 12px;
  border-radius:10px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:color .18s, border-color .18s; }
.blog-pager a:hover{ color:var(--ink-d); border-color:rgba(22,32,60,.22); }
.blog-pager .cur{ background:var(--ember); color:#1a1206; font-weight:700; }
.blog-pager .dots{ border:0; min-width:auto; color:var(--ink-d3); }
.blog-pager .pg-edge{ color:var(--ink-d3); }
.blog-pager .pg-edge svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

@media (max-width:760px){
  .blog-list{ grid-template-columns:1fr; }
  .fcard{ grid-template-columns:1fr; }
  .fcard .fimg{ min-height:180px; order:-1; }
  .blog-feat .fnav.prev{ left:6px; }
  .blog-feat .fnav.next{ right:6px; }
}

/* =====================================================================
   DARK LISTING VARIANT (body.blog-dark on Blog.html)
   The blog homepage browses like the Knowledge Base: night-navy body,
   twinkling starfield, dark glass cards. Scoped so the light single-post
   page (which shares blog.css) is untouched.
   ===================================================================== */
body.blog-dark{ background:#0c1530; position:relative; }
.blog-dark .skyfield{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }

/* listing sits on the night body + starfield, and carries the gradient bridge
   that fades the page into the #021c46 cityscape footer (previously on .profile-cta) */
.blog-dark .blog-list-wrap{ background:linear-gradient(180deg, #0c1530 0%, #0c1530 48%, #08203f 80%, #021c46 100%); color:var(--ink); }
.blog-dark .blog-empty2{ color:var(--ink-dim); }

/* featured carousel cards become dark glass */
.blog-dark .fcard{ background:rgba(13,20,42,.55); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.blog-dark .fcard h2{ color:var(--ink); }
.blog-dark .fcard .fex{ color:var(--ink-dim); }
.blog-dark .fcard .pill.date{ background:rgba(255,255,255,.08); color:var(--ink-dim); }
.blog-dark .fcard .fauthor b{ color:var(--ink); }
.blog-dark .fcard .fauthor .read{ color:var(--ink-faint); }
.blog-dark .fcard .fauthor .av{ background:rgba(255,255,255,.08); border-color:var(--line-2); }
.blog-dark .fcard .fauthor .av svg{ stroke:#c9d2ee; }

/* category chips — KB style */
.blog-dark .blog-chip{ background:rgba(255,255,255,.04); border-color:var(--line); color:var(--ink-dim); }
.blog-dark .blog-chip:hover{ color:var(--ink); border-color:var(--line-2); }
.blog-dark .blog-chip[aria-pressed="true"]{ background:var(--ember); border-color:var(--ember); color:#1a1206; }

/* grid cards — dark glass with an ember edge on hover */
.blog-dark .blog-list .rel-card{ background:rgba(13,20,42,.55); border-color:var(--line); box-shadow:none; }
.blog-dark .blog-list .rel-card:hover{ border-color:var(--line-2); box-shadow:0 26px 54px -36px rgba(0,0,0,.7); }
.blog-dark .blog-list .rel-card h3{ color:var(--ink); }
.blog-dark .blog-list .rel-card p{ color:var(--ink-dim); }
.blog-dark .blog-list .rc-meta{ color:var(--ink-faint); }
.blog-dark .blog-list .rc-meta .cat{ color:var(--ember); }
.blog-dark .imgph-l{ background:repeating-linear-gradient(135deg,#16213e,#16213e 11px,#1c2848 11px,#1c2848 22px); }
.blog-dark .imgph-l span{ color:#7e8cb2; }

/* related-articles cards (Blog Post) match the homepage listing cards: dark glass + ember hover */
.blog-dark .related .rel-card{ background:rgba(13,20,42,.55); border-color:var(--line); box-shadow:none; }
.blog-dark .related .rel-card:hover{ border-color:var(--line-2); box-shadow:0 26px 54px -36px rgba(0,0,0,.7); }
.blog-dark .related .rel-card h3{ color:var(--ink); }
.blog-dark .related .rel-card p{ color:var(--ink-dim); }
.blog-dark .related .rc-meta{ color:var(--ink-faint); }
.blog-dark .related .rc-meta .cat{ color:var(--ember); }

/* pagination — light text on night */
.blog-dark .blog-pager a, .blog-dark .blog-pager span{ color:var(--ink-dim); }
.blog-dark .blog-pager a:hover{ color:var(--ink); border-color:var(--line-2); }

/* =====================================================================
   ARTICLE PAGE (Blog Post) on the night background.
   The reading content keeps its light "paper" colour, but instead of a
   full-bleed cream block it floats as a sheet on the same night sky +
   starfield as the rest of the site. */
.blog-dark .blog-main{ background:transparent; }
.blog-dark .blog-grid{
  background:var(--paper);
  border:1px solid rgba(255,255,255,.05);
  border-radius:26px;
  padding:clamp(28px,3.2vw,52px) clamp(24px,3vw,48px);
  margin-block:clamp(40px,6vh,72px);
  box-shadow:0 60px 110px -55px rgba(0,0,0,.75);
}
@media (max-width:680px){
  .blog-dark .blog-grid{ border-radius:18px; }
}
.blog-dark .blog-pager .cur{ background:var(--ember); color:#1a1206; }
.blog-dark .blog-pager .dots, .blog-dark .blog-pager .pg-edge{ color:var(--ink-faint); }

/* ---- KB enhancements: key-definition quote + experience aside ---- */
.article .kb-key{ margin:0 0 26px; padding:18px 22px 18px 24px; border-left:3px solid var(--ember);
  background:rgba(246,146,30,.07); border-radius:0 14px 14px 0; }
.article .kb-key .lede{ margin:0; }
.article .kb-exp{ margin:30px 0; padding:18px 22px; border:1px solid var(--line-2); border-radius:14px;
  background:rgba(255,255,255,.045); font-size:15.5px; line-height:1.7; color:var(--ink-dim); }
.article .kb-exp b{ color:var(--ember); }