:root {
  --bg:#0d1117; --surface:#161b22; --surface2:#1f2630; --border:#2d3544;
  --accent:#14b8a6; --accent2:#fb7185; --accent-glow:rgba(20,184,166,0.25);
  --text:#f0f3f7; --muted:#8b97a8; --success:#34d399; --radius:16px;
  --banner-leaderboard-h:90px; --banner-rect-h:250px; --banner-sticky-h:60px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.7;padding-bottom:var(--banner-sticky-h);}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 10%,rgba(20,184,166,0.10) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(251,113,133,0.06) 0%,transparent 60%);pointer-events:none;z-index:0;}
/* Banner styles */
.banner-leaderboard{position:relative;z-index:5;width:100%;min-height:var(--banner-leaderboard-h);display:flex;align-items:center;justify-content:center;background:rgba(20,184,166,0.04);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;}
.banner-leaderboard .banner-inner{width:728px;max-width:100%;height:var(--banner-leaderboard-h);display:flex;align-items:center;justify-content:center;}
.banner-rect{width:100%;min-height:var(--banner-rect-h);display:flex;align-items:center;justify-content:center;margin:24px 0;}
.banner-rect .banner-inner{width:300px;height:var(--banner-rect-h);display:flex;align-items:center;justify-content:center;}
.banner-sticky-mobile{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--banner-sticky-h);background:var(--surface);border-top:1px solid var(--border);align-items:center;justify-content:center;z-index:9000;}
.banner-sticky-mobile .banner-inner{width:728px;max-width:100%;height:50px;display:flex;align-items:center;justify-content:center;}
.banner-placeholder{width:100%;height:100%;border:1px dashed rgba(20,184,166,0.3);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(20,184,166,0.04);cursor:pointer;text-decoration:none;transition:all 0.2s;overflow:hidden;position:relative;}
.banner-placeholder:hover{border-color:var(--accent);background:rgba(20,184,166,0.08);box-shadow:0 0 20px rgba(20,184,166,0.15);}
.banner-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(20,184,166,0.06) 100%);pointer-events:none;}
.banner-label{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);opacity:0.6;}
.banner-headline{font-family:'Syne',sans-serif;font-weight:700;color:var(--text);text-align:center;line-height:1.3;}
.banner-cta{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);padding:4px 12px;border:1px solid var(--accent);border-radius:100px;}
.banner-leaderboard .banner-headline{font-size:16px;} .banner-leaderboard .banner-label{font-size:9px;}
.banner-rect .banner-headline{font-size:15px;}
.banner-sticky-mobile .banner-placeholder{border-radius:0;border:none;border-top:1px dashed rgba(20,184,166,0.3);}
.banner-sticky-mobile .banner-headline{font-size:12px;} .banner-sticky-mobile .banner-label{display:none;}
.banner-sticky-mobile .banner-cta{font-size:10px;padding:3px 10px;}
/* Header */
header{position:relative;z-index:10;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);backdrop-filter:blur(20px);}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.5px;text-decoration:none;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo span{color:var(--text);-webkit-text-fill-color:var(--text);}
.back-link{font-size:13px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color 0.2s;}
.back-link:hover{color:var(--accent);} .back-link svg{width:16px;height:16px;}
/* Hero */
.post-hero{position:relative;z-index:1;padding:56px 20px 0;}
.post-hero-inner{max-width:760px;margin:0 auto;}
.post-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap;}
.post-breadcrumb a{color:var(--muted);text-decoration:none;transition:color 0.2s;}
.post-breadcrumb a:hover{color:var(--accent);}
.post-breadcrumb span{opacity:0.4;}
.post-meta-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.post-tag{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:rgba(20,184,166,0.1);border:1px solid rgba(20,184,166,0.25);border-radius:100px;padding:3px 12px;}
.post-date{font-size:13px;color:var(--muted);}
.post-read-time{font-size:13px;color:var(--muted);}
.post-hero h1{font-family:'Syne',sans-serif;font-size:clamp(28px,4.5vw,46px);font-weight:800;line-height:1.12;letter-spacing:-1.5px;margin-bottom:20px;}
.post-hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.post-intro{font-size:17px;color:var(--muted);font-weight:300;line-height:1.75;max-width:680px;margin-bottom:40px;}
/* Content */
.post-content{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:48px 24px 80px;}
.post-content h2{font-family:'Syne',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.4px;margin:40px 0 14px;color:var(--text);}
.post-content h2:first-child{margin-top:0;}
.post-content p{font-size:15.5px;color:var(--muted);line-height:1.85;margin-bottom:18px;}
.post-content p:last-child{margin-bottom:0;}
.post-content strong{color:var(--text);font-weight:600;}
.post-content a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(20,184,166,0.3);transition:border-color 0.2s;}
.post-content a:hover{border-color:var(--accent);}
.highlight-box{display:flex;gap:16px;align-items:flex-start;background:rgba(52,211,153,0.07);border:1px solid rgba(52,211,153,0.25);border-radius:12px;padding:20px 24px;margin:28px 0;}
.highlight-box .icon{font-size:26px;flex-shrink:0;margin-top:2px;}
.highlight-box h3{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--success);margin-bottom:5px;}
.highlight-box p{font-size:14px;color:var(--muted);line-height:1.6;margin:0;}
.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:24px 0;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;}
.stat-value{font-family:'Syne',sans-serif;font-weight:800;font-size:26px;color:var(--accent);margin-bottom:4px;}
.stat-label{font-size:11px;color:var(--muted);line-height:1.4;}
.info-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin:20px 0;font-size:14px;color:var(--muted);line-height:1.7;}
.info-box strong{color:var(--accent);}
.cta-box{background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.3);border-radius:12px;padding:28px 24px;text-align:center;margin-top:48px;}
.cta-box h3{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;margin-bottom:10px;}
.cta-box p{font-size:14px;color:var(--muted);margin-bottom:20px;}
.cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:14px;text-decoration:none;transition:all 0.2s;box-shadow:0 4px 20px rgba(20,184,166,0.35);text-shadow:0 1px 3px rgba(0,0,0,0.4);}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(20,184,166,0.45);border-bottom:none;}
.post-nav{display:flex;justify-content:flex-start;margin-top:48px;padding-top:32px;border-top:1px solid var(--border);}
.post-nav-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font-size:14px;transition:color 0.2s;}
.post-nav-link:hover{color:var(--accent);}
.post-nav-link svg{width:16px;height:16px;}
/* Footer */
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:36px 20px;text-align:center;}
.footer-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:14px;}
.footer-links a{font-size:13px;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--accent);}
.footer-copy{font-size:12px;color:var(--muted);opacity:0.6;}
/* Mobile */
@media(max-width:600px){
  header{padding:14px 16px;}
  .post-hero{padding:40px 16px 0;}
  .post-content{padding:36px 16px 60px;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .stat-row .stat-card:last-child{grid-column:1/-1;}
  .highlight-box{flex-direction:column;gap:10px;padding:16px;}
  .banner-leaderboard{display:none;}
  footer{padding:28px 16px;}
}

/* A paragraph after a bullet list had no top margin (the * reset clears it and
   nothing puts it back), so it sat flush against the last bullet and read as
   part of it. Scoped to the content wrappers because the 39 pages use five
   different ones and only 20 have .page-section. */
main ul + p, article ul + p { margin-top: 16px; }

/* -- BANNER: WIDE SKYSCRAPER 160x600 -------------------------------
   Same position as index.php, which carries this slot as the third
   column of its .app grid. Matching max-width, padding, gap and
   align-items means the banner lands on the same x at any width.
   minmax(0,1fr) not 1fr: .main-grid and .blog-grid-wrap are grids
   themselves and a bare 1fr floors at min-content, which would shove
   the banner off the page rather than let the column shrink.
   Hidden at <=1100px, the breakpoint index.php uses. */
.content-shell {
  position: relative; z-index: 1;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) 160px;
  gap: 24px; align-items: start;
}
.content-shell > .banner-skyscraper {
  width: 160px; min-height: 600px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 24px;
}
.content-shell > .banner-skyscraper .banner-inner {
  width: 160px; height: 600px;
  position: sticky; top: 24px;
  display: flex; align-items: center; justify-content: center;
}
.banner-skyscraper .banner-headline { font-size: 14px; }
@media (max-width: 1100px) {
  .content-shell { display: block; max-width: none; padding: 0; }
  .content-shell > .banner-skyscraper,
  .banner-skyscraper { display: none; }
}
.content-shell > .banner-skyscraper { align-self: stretch; }