: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-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);text-decoration:none;transition:all 0.2s}
.banner-placeholder:hover{border-color:var(--accent);background:rgba(20,184,166,0.08)}
.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{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}
.page-hero{position:relative;z-index:1;text-align:center;padding:60px 20px 48px;border-bottom:1px solid var(--border)}
.page-hero .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;background:rgba(20,184,166,0.12);border:1px solid rgba(20,184,166,0.3);font-size:12px;color:var(--accent);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}
.page-hero h1{font-family:'Syne',sans-serif;font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.1;letter-spacing:-1.5px;margin-bottom:16px}
.page-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}
.page-hero p{color:var(--muted);font-size:16px;font-weight:300;max-width:620px;margin:0 auto 28px;line-height:1.7}
.hero-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:100px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:15px;text-decoration:none;transition:all 0.2s;box-shadow:0 6px 24px rgba(20,184,166,0.35)}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(20,184,166,0.45)}
.content{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:60px 24px 80px}
.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-bottom:48px}
.highlight-box .icon{font-size:28px;flex-shrink:0;margin-top:2px}
.highlight-box h2{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--success);margin-bottom:6px}
.highlight-box p{font-size:14px;color:var(--muted);line-height:1.6}
.page-section{margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--border)}
.page-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.page-section h2{font-family:'Syne',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.3px;margin-bottom:16px;color:var(--text)}
.page-section p{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.page-section p:last-child{margin-bottom:0}
.page-section strong{color:var(--text);font-weight:600}
.step-card{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:16px}
.step-number{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:#fff}
.step-body h3{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--text);margin-bottom:8px}
.step-body p{font-size:14px;color:var(--muted);line-height:1.7}
.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}
.use-case{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.use-case .emoji{font-size:24px;margin-bottom:10px;display:block}
.use-case h3{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--text);margin-bottom:6px}
.use-case p{font-size:13px;color:var(--muted);line-height:1.6}
.faq-list{margin-top:16px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.faq-q{padding:16px 20px;font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;border:none;background:none;width:100%;text-align:left}
.faq-q::after{content:'+';font-size:20px;color:var(--accent);transition:transform 0.2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}
.faq-item.open .faq-a{padding:0 20px 18px;max-height:300px}
.faq-a p{font-size:14px;color:var(--muted);line-height:1.7}
.cta-box{background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.3);border-radius:12px;padding:32px 24px;text-align:center;margin-top:48px}
.cta-box h3{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;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:13px 30px;border-radius:100px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;text-decoration:none;transition:all 0.2s;box-shadow:0 4px 20px rgba(20,184,166,0.35)}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(20,184,166,0.45)}
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}
@media(max-width:600px){
  header{padding:14px 16px}.page-hero{padding:40px 16px 36px}.content{padding:40px 16px 60px}
  .highlight-box{flex-direction:column;gap:10px;padding:16px}.banner-leaderboard{display:none}
  .step-card{flex-direction:column;gap:12px}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% matters. advertise.php sets display:flex on the body element, so the shell
     is a flex item there and sized to its CONTENT (949px) rather than filling
     to max-width, which put its banner 226px left of where index.php puts it.
     width:100% resolves against the container and then clamps to max-width,
     so the column lands identically whether the parent is block or flex. */
  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; }
  /* Must repeat the CHILD selector, not just .banner-skyscraper: the rule
     above is `.content-shell > .banner-skyscraper` at specificity (0,2,0) and
     a bare `.banner-skyscraper` at (0,1,0) loses to it, so the banner stayed
     visible below 1100px and rendered flush left under the content. Measured:
     index.php hidden at 1100, these pages showing it at x 0-160. Equal
     specificity plus later source order wins cleanly. */
  .content-shell > .banner-skyscraper,
  .banner-skyscraper { display: none; }
}

/* Same fix as index.php: the aside was content-height under align-items:start,
   so the sticky inner had no travel and the banner scrolled away. Stretching
   it to fill the grid row is what makes position:sticky do anything. */
.content-shell > .banner-skyscraper { align-self: stretch; }