/* Article page styles.

   Lifted out of templates/article.html, where it was inlined into every
   rendered page: 19.7 KB re-sent with each of the 3,500 articles, and never
   cached across them. It is linked beside base.css now, so a reader who opens
   a second article downloads none of it.

   The per-category accent colour stays inline in the template — it is the one
   value here that differs per page, and it is two declarations against
   :root/--accent rather than anything worth a file.

   Cache-busted with ?v=<hash> by build.py's _asset_version, which is why
   _HEADERS can mark it immutable. Adding a rule here changes that hash, so no
   reader is served a stale copy.
*/
/* ── PAGE SHELL ─────────────────────────────────────────── */
.page-wrap{background:#000;position:relative;z-index:10;padding-top:100px;}

/* ── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb{max-width:1280px;margin:0 auto;padding:20px 24px 0;font-size:13px;color:rgba(255,255,255,0.35);display:flex;align-items:center;gap:8px;}
.breadcrumb a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.15s;flex-shrink:0;}
.breadcrumb a:hover{color:#fff;}
.bc-sep{color:rgba(255,255,255,0.25);flex-shrink:0;}
.bc-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:640px){.breadcrumb{padding-top:14px;font-size:12px;}}

/* ── HERO ───────────────────────────────────────────────── */
.article-hero{max-width:900px;margin:0 auto;padding:56px 24px 36px;text-align:center;}
.article-hero .sec-tag{display:block;margin-bottom:14px;}
.article-h1{font-size:clamp(26px,3.8vw,46px);font-weight:700;letter-spacing:-1.2px;color:#fff;line-height:1.14;margin:0 0 18px;}
.article-meta{font-size:13px;color:rgba(255,255,255,0.55);margin:0 0 18px;}
.article-author{color:inherit;text-decoration:none;}
.article-author:hover{color:rgba(255,255,255,0.6);text-decoration:underline;}
.article-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;}
.article-tag{display:inline-block;font-size:12px;color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:999px;padding:4px 13px;text-decoration:none;transition:color 0.15s,background 0.15s,border-color 0.15s;letter-spacing:0.01em;}
.article-tag:hover{color:#fff;background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2);}

/* ── COVER IMAGE ────────────────────────────────────────── */
.article-cover{max-width:1100px;margin:0 auto 52px;padding:0 24px;}
.article-cover-img{
  width:100%;aspect-ratio:16/9;min-height:180px;
  background:linear-gradient(135deg,rgba(57,161,255,0.18) 0%,rgba(26,58,122,0.1) 50%,rgba(0,0,0,0) 100%);
  border:1px solid rgba(255,255,255,0.06);border-radius:24px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;
}
/* A real cover image sizes to its own aspect ratio so the whole frame shows,
   never cropped — the fixed 16/9 box above is only for the SVG placeholder. */
img.article-cover-img{
  display:block;height:auto;aspect-ratio:auto;min-height:0;object-fit:contain;
  /* The 1px border + gradient background exist for the SVG placeholder only.
     On a real photo the border is invisible against dark edges and shows against
     bright ones (a lopsided, bottom-heavy frame), so drop both here — the
     rounded corners stay. */
  border:0;background:none;
}
.article-cover-img svg{opacity:0.18;}
.article-cover-label{
  position:absolute;bottom:18px;left:22px;
  font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
}

/* ── TWO-COLUMN LAYOUT ──────────────────────────────────── */
.article-layout{
  display:grid;grid-template-columns:1fr 300px;gap:56px;
  max-width:1280px;margin:0 auto;padding:0 24px 80px;align-items:start;
}
/* A grid track's implicit min-width is `auto`, i.e. its widest child, so any
   single oversized element inside the body — a video carrying its intrinsic
   width, a wide table, an unbreakable code line — silently widens the column
   past max-width and takes the page full-bleed. Pinning both tracks to 0 makes
   the container win and the offending child clip instead. The failure is
   page-wide and the cause is one element deep in the body, so this is worth
   having even where the specific cases are also handled. */
.article-layout > *{min-width:0;}

/* ── ARTICLE BODY ───────────────────────────────────────── */
.article-body{color:rgba(255,255,255,0.6);}   /* base: never fall back to black text */
/* Migrated WordPress FAQ / accordion blocks — unified with the site FAQ style
   (white title, thin white chevron on the right, hairline dividers). */
.article-body details{border-top:1px solid rgba(255,255,255,0.07);}
.article-body details:last-of-type{border-bottom:1px solid rgba(255,255,255,0.07);}
.article-body details:not(.faq-item) summary{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;font-weight:600;font-size:16px;line-height:1.4;padding:18px 0;cursor:pointer;list-style:none;}
.article-body details:not(.faq-item) summary::-webkit-details-marker{display:none;}
.article-body details:not(.faq-item) summary::after{content:"";width:18px;height:18px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0.72;transition:transform 0.22s ease;}
.article-body details:not(.faq-item)[open] summary::after{transform:rotate(180deg);}
.article-body summary div,.article-body summary strong{color:#fff;font-weight:600;}
.article-body summary p{margin:0;color:#fff;}
.article-body h2{font-size:clamp(20px,2.5vw,27px);font-weight:700;color:#fff;letter-spacing:-0.5px;margin:48px 0 16px;line-height:1.2;}
.article-body h3{font-size:18px;font-weight:600;color:rgba(255,255,255,0.9);margin:32px 0 12px;}
.article-body p{font-size:16px;color:rgba(255,255,255,0.6);line-height:1.75;margin:0 0 20px;}
.article-body ul,.article-body ol{color:rgba(255,255,255,0.6);font-size:16px;line-height:1.75;padding-left:24px;margin:0 0 20px;}
.article-body li{margin-bottom:8px;}
.article-body a{color:#39A1FF;text-decoration:none;}
.article-body a:hover{text-decoration:underline;}
/* Wide tables scroll sideways inside their figure. -webkit-appearance:none on the
   scrollbar forces a persistent bar (not the auto-hiding macOS overlay), so a
   reader on a plain mouse can see and drag the handle. */
.article-body .wp-block-table{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.28) rgba(255,255,255,0.05);}
.article-body .wp-block-table::-webkit-scrollbar{height:10px;-webkit-appearance:none;}
.article-body .wp-block-table::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:10px;}
.article-body .wp-block-table::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.28);border-radius:10px;}
.article-body .wp-block-table::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.42);}
.article-body .wp-block-table>table{margin:0;}
/* A defined outer frame plus stronger grid lines so a table reads as its own
   element instead of blending into the surrounding prose. */
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;border:1px solid rgba(255,255,255,0.22);}
.article-body th{background:rgba(255,255,255,0.09);color:rgba(255,255,255,0.78);font-weight:600;padding:12px 16px;text-align:left;border:1px solid rgba(255,255,255,0.16);}
.article-body td{padding:11px 16px;border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.58);}
.article-body tr:hover td{background:rgba(255,255,255,0.03);}
td strong{color:rgba(255,255,255,0.8);}

/* ── RICH CONTENT ───────────────────────────────────────── */
/* Images — exclude icons inside ads and sidebar */
.article-body img:not(.article-ad-icon):not(.sb-ad-icon):not(.bfa-icon):not(.sb-rel-thumb img):not(.yt-facade img){max-width:100%;height:auto;border-radius:16px;display:block;margin:28px auto;border:1px solid rgba(255,255,255,0.07);}

/* Video — WordPress's video block emits a bare <video> carrying the source's
   intrinsic size, e.g. width="2048". Without this it lays out at 2048px and,
   because a `1fr` grid track is minmax(auto,1fr), widens the column past the
   1280px container: the whole page goes full-bleed and the sidebar is pushed
   off screen. Not covered by the img rule above, and <video> is not an embed so
   the facade transform does not reach it either. */
.article-body video{max-width:100%;height:auto;border-radius:16px;display:block;margin:28px auto;border:1px solid rgba(255,255,255,0.07);}

/* Figure + caption */
.article-body figure{margin:32px 0;}
.article-body figure img{margin:0 0 6px;}
.article-body figcaption{font-size:13px;color:rgba(255,255,255,0.32);text-align:center;line-height:1.5;font-style:italic;}

/* Two (or more) images side by side inside one captioned figure. Wrap the
   images in <span class="img-row">; they share the figure's single caption and
   stack on narrow screens. The row owns the img->caption gap so it matches a
   normal captioned figure. */
.article-body figure .img-row{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 6px;}
.article-body figure .img-row img{flex:1;min-width:280px;margin:0;}

/* Block alignment (WordPress has-text-align-* on text, align* on image figures) */
.article-body .has-text-align-left{text-align:left;}
.article-body .has-text-align-center{text-align:center;}
.article-body .has-text-align-right{text-align:right;}
.article-body figure.aligncenter{margin-left:auto;margin-right:auto;}
.article-body figure.aligncenter img{margin-left:auto;margin-right:auto;}
.article-body figure.alignright{margin-left:auto;margin-right:0;}
.article-body figure.alignright img{margin-left:auto;margin-right:0;}
.article-body figure.alignleft{margin-left:0;margin-right:auto;}
.article-body figure.alignleft img{margin-left:0;margin-right:auto;}

/* YouTube — the build swaps the WordPress <iframe> for a thumbnail + play
   button (felloweb/embeds.py) and base.js swaps it back on click. Two wins: no
   YouTube player on load, and a responsive box, which the raw block never had —
   it carries width="980" and nothing constrained it, so it overflowed any
   column narrower than that. The thumbnail is 4:3 and the box is 16:9, so it is
   cropped rather than letterboxed, which is what YouTube itself does. */
.yt-facade{position:relative;width:100%;border-radius:18px;overflow:hidden;margin:28px 0;background:#000;border:1px solid rgba(255,255,255,0.07);cursor:pointer;}
/* `.article-body` in the selector only to outweigh `.article-body figure img`
   above — the facade sits inside WordPress's <figure>, which would otherwise
   give the thumbnail that rule's bottom margin. */
.article-body .yt-facade img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;margin:0;}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;line-height:0;}
.yt-play .yt-play-bg{fill:#212121;fill-opacity:0.8;transition:fill 0.15s,fill-opacity 0.15s;}
.yt-facade:hover .yt-play-bg,.yt-play:focus-visible .yt-play-bg{fill:#f00;fill-opacity:1;}

/* Twitter / X embeds */
.twitter-tweet{margin:28px auto!important;}
.twitter-tweet-rendered{width:100%!important;}

/* Blockquote / pull quote */
.article-body blockquote{border-left:3px solid rgba(57,161,255,0.45);margin:32px 0;padding:2px 0 2px 24px;}
.article-body blockquote p{font-size:18px;font-style:italic;color:rgba(255,255,255,0.6);line-height:1.65;margin:0;}
.article-body blockquote cite{display:block;font-size:13px;color:rgba(255,255,255,0.3);margin-top:10px;font-style:normal;}

/* Code — inline and block */
.article-body code{background:rgba(255,255,255,0.08);border-radius:5px;padding:2px 7px;font-size:0.875em;font-family:'SF Mono',Monaco,Consolas,'Courier New',monospace;color:rgba(255,255,255,0.85);}
.article-body pre{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px 24px;margin:24px 0;overflow-x:auto;}
.article-body pre code{background:none;padding:0;font-size:14px;color:rgba(255,255,255,0.72);line-height:1.7;}

/* Horizontal rule */
.article-body hr{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:44px 0;}

.callout{background:rgba(57,161,255,0.07);border:1px solid rgba(57,161,255,0.18);border-radius:16px;padding:20px 24px;margin:24px 0;}
.callout p{color:rgba(255,255,255,0.7);margin:0;font-size:15px;}
.key-takeaways{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:24px 28px;margin:0 0 40px;}
.key-takeaways h3{color:#39A1FF;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin:0 0 14px;}
.key-takeaways ul{margin:0;padding-left:20px;}
.key-takeaways li{color:rgba(255,255,255,0.65);font-size:15px;line-height:1.65;margin-bottom:8px;}
.faq-item{border-top:1px solid rgba(255,255,255,0.07);}
.faq-item:last-of-type{border-bottom:1px solid rgba(255,255,255,0.07);}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{font-size:16px;font-weight:600;color:rgba(255,255,255,0.88);margin:0;line-height:1.4;}
.faq-chevron{width:18px;height:18px;flex-shrink:0;color:rgba(255,255,255,0.28);transition:transform 0.22s ease;}
.faq-item[open] .faq-chevron{transform:rotate(180deg);color:rgba(255,255,255,0.5);}
.faq-a{font-size:15px;color:rgba(255,255,255,0.52);line-height:1.72;margin:0 0 18px;padding-right:34px;}

/* ── SIDEBAR ────────────────────────────────────────────── */
.article-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px;}

.sidebar-card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:20px 22px;}
.sidebar-card-title{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.28);margin:0 0 14px;}

/* TOC */
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px;}
.toc-list a{display:block;font-size:13px;color:rgba(255,255,255,0.38);text-decoration:none;padding:5px 8px;border-radius:6px;line-height:1.45;transition:color 0.15s,background 0.15s;}
.toc-list a:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.05);}
.toc-list a.active{color:#39A1FF;background:rgba(57,161,255,0.08);}

/* Sidebar newsletter */
.sb-nl-headline{font-size:14px;font-weight:700;color:#fff;margin:0 0 6px;}
.sb-nl-sub{font-size:13px;color:rgba(255,255,255,0.38);line-height:1.5;margin:0 0 14px;}
.sb-nl-form{display:flex;flex-direction:column;gap:8px;}
.sb-nl-input{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 13px;font-size:13px;color:#fff;outline:none;width:100%;box-sizing:border-box;}
.sb-nl-input::placeholder{color:rgba(255,255,255,0.22);}
.sb-nl-input:focus{border-color:rgba(57,161,255,0.5);}
.sb-nl-btn{background:#39A1FF;color:#fff;border:none;border-radius:10px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:opacity 0.15s;}
.sb-nl-btn:hover{opacity:0.88;}

/* Sidebar related */
.sb-related-list{display:flex;flex-direction:column;}
.sb-rel-item{display:grid;grid-template-columns:52px 1fr;gap:11px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.05);text-decoration:none;align-items:center;}
.sb-rel-item:last-child{border-bottom:none;padding-bottom:0;}
.sb-rel-item:first-child{padding-top:0;}
.sb-rel-thumb{width:52px;height:40px;border-radius:7px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-rel-title{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.4;transition:color 0.15s;}
.sb-rel-item:hover .sb-rel-title{color:#fff;}

/* ── SHARE BAR ──────────────────────────────────────────── */
.article-share{
  border-top:1px solid rgba(255,255,255,0.07);padding-top:30px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:40px 0 0;
}
.share-label{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.3);flex-shrink:0;margin-right:4px;}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.55);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:all 0.15s;}
.share-btn:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.07);color:#fff;}
.share-copy{margin-left:auto;}

/* ── BOTTOM NEWSLETTER ─────────────────────────────────── */
.bottom-nl-wrap{padding:60px 24px;}
.bottom-nl-inner{
  max-width:560px;margin:0 auto;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:24px;
  padding:44px;text-align:center;
}
.bottom-nl-icon{width:48px;height:48px;background:rgba(57,161,255,0.12);border:1px solid rgba(57,161,255,0.2);border-radius:13px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.bottom-nl-h3{font-size:22px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.5px;}
.bottom-nl-p{font-size:15px;color:rgba(255,255,255,0.42);line-height:1.65;margin:0 0 24px;}
.bottom-nl-form{display:flex;gap:10px;max-width:400px;margin:0 auto;}
.bottom-nl-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px 16px;font-size:14px;color:#fff;outline:none;min-width:0;}
.bottom-nl-input::placeholder{color:rgba(255,255,255,0.25);}
.bottom-nl-input:focus{border-color:rgba(57,161,255,0.5);}
.bottom-nl-btn{background:#39A1FF;color:#fff;border:none;border-radius:12px;padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity 0.15s;}
.bottom-nl-btn:hover{opacity:0.88;}
.bottom-nl-btn[disabled]{cursor:default;opacity:0.75;}
/* The honeypot: out of sight, out of the layout, and still in the DOM for
   anything that fills every input it finds. */
.nl-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ── MORE ARTICLES ─────────────────────────────────────── */
.more-articles-wrap{padding:0 24px 80px;background:#000;position:relative;z-index:10;}
.more-articles-inner{max-width:1280px;margin:0 auto;}
.more-articles-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.28);margin:0 0 22px;}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

/* ── FELLO AI ADS ───────────────────────────────────────── */
/* Sidebar promo card */
.sb-ad{background:linear-gradient(145deg,rgba(57,161,255,0.13),rgba(0,0,0,0));border:1px solid rgba(57,161,255,0.28);border-radius:20px;padding:20px 22px;text-decoration:none;display:block;transition:border-color 0.2s;}
.sb-ad:hover{border-color:rgba(57,161,255,0.4);}
.sb-ad-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sb-ad-icon{width:38px;height:38px;border-radius:9px;flex-shrink:0;}
.sb-ad-name{font-size:14px;font-weight:700;color:#fff;line-height:1.2;}
.sb-ad-from{font-size:10px;color:rgba(255,255,255,0.28);text-transform:uppercase;letter-spacing:0.08em;margin-top:1px;}
.sb-ad-headline{font-size:15px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-0.3px;}
.sb-ad-body{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.55;margin:0 0 16px;}
.sb-ad-btn{display:block;text-align:center;background:#39A1FF;color:#fff;border-radius:9px;padding:10px;font-size:13px;font-weight:600;text-decoration:none;transition:opacity 0.15s;}
.sb-ad-btn:hover{opacity:0.85;}
.sb-ad-stars{display:flex;align-items:center;gap:5px;margin-top:10px;justify-content:center;}
.sb-ad-stars-val{font-size:12px;color:rgba(255,255,255,0.35);}

/* Inline mid-article ad */
.article-ad{border:1px solid rgba(57,161,255,0.28);border-radius:20px;padding:20px 24px;margin:40px 0;background:linear-gradient(145deg,rgba(57,161,255,0.13),rgba(0,0,0,0));}
.article-ad-label{display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:14px;}
.article-ad-approw{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.article-ad-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0;}
.article-ad-appname{font-size:14px;font-weight:700;color:#fff;line-height:1.2;}
.article-ad-tagline{font-size:11px;color:rgba(255,255,255,0.32);margin-top:1px;}
.article-ad-h3{font-size:17px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-0.3px;line-height:1.3;}
.article-ad-p{font-size:14px;color:rgba(255,255,255,0.48);line-height:1.6;margin:0 0 16px;}
.article-ad-cta{display:inline-flex;align-items:center;gap:7px;background:#39A1FF;color:#fff!important;border-radius:10px;padding:9px 18px;font-size:13px;font-weight:600;text-decoration:none!important;transition:opacity 0.15s;}
.article-ad-cta:hover{opacity:0.85;}
/* A/B variants: only the first is visible without JS. The split script injects
   an !important pair that overrides this when it picks a different one. */
.article-ad[data-v]:not([data-v="0"]){display:none;}
/* Bottom featured ad */
.bfa-wrap{background:#000;position:relative;z-index:10;padding:0 24px 72px;}
.bfa{max-width:1280px;margin:0 auto;border:1px solid rgba(57,161,255,0.28);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.05fr 0.95fr;align-items:center;background:linear-gradient(120deg,rgba(57,161,255,0.13),rgba(57,161,255,0.03) 55%,rgba(0,0,0,0));}
.bfa-preview{display:flex;align-items:center;justify-content:flex-end;padding:56px 0 56px 40px;overflow:hidden;}
.bfa-preview-img{width:100%;max-width:720px;height:auto;display:block;border-radius:16px;}
.bfa-content{padding:56px 52px 56px 36px;display:flex;flex-direction:column;justify-content:center;}
.bfa-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin:0 0 22px;display:block;}
.bfa-logo{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
.bfa-icon{width:48px;height:48px;border-radius:16px;flex-shrink:0;}
.bfa-appname{font-size:17px;font-weight:700;color:#fff;}
.bfa-h3{font-size:clamp(22px,2.5vw,28px);font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.8px;line-height:1.15;}
.bfa-p{font-size:15px;color:rgba(255,255,255,0.48);line-height:1.65;margin:0 0 28px;}
.bfa-cta{display:inline-flex;align-items:center;gap:8px;background:#39A1FF;color:#fff!important;border-radius:11px;padding:13px 24px;font-size:15px;font-weight:600;text-decoration:none!important;transition:opacity 0.15s;align-self:flex-start;}
.bfa-cta:hover{opacity:0.85;}
@media(max-width:700px){.bfa{grid-template-columns:1fr;}.bfa-preview{padding:28px 28px 0;}.bfa-preview-img{max-width:100%;}.bfa-content{padding:28px;}}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:960px){
  .article-layout{grid-template-columns:1fr;gap:0;}
  .article-sidebar{position:static;order:99;margin-top:48px;}
  .article-sidebar .sidebar-card:first-child{display:none;} /* hide TOC on mobile */
  .more-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:540px){
  .more-grid{grid-template-columns:1fr;}
  .bottom-nl-form{flex-direction:column;}
  .article-cover-img{aspect-ratio:16/9;}
}