: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 SLOTS */
.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 */
.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:560px;margin:0 auto;line-height:1.7;}
/* CONTENT */
.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:20px;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 CARDS */
.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;margin-bottom:10px;}
.step-body p:last-child{margin-bottom:0;}
.step-body ul{list-style:none;padding:0;margin:8px 0 0;}
.step-body ul li{font-size:14px;color:var(--muted);line-height:1.7;padding-left:20px;position:relative;margin-bottom:6px;}
.step-body ul li::before{content:'→';position:absolute;left:0;color:var(--accent);font-size:12px;}
.step-body ul li strong{color:var(--text);font-weight:600;}
/* FORMAT GRID */
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.format-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.format-card .fmt-name{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;color:var(--text);margin-bottom:4px;}
.format-card .fmt-desc{font-size:12px;color:var(--muted);line-height:1.5;}
/* CTA */
.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: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 */
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;}
/* RESPONSIVE */
@media(max-width:600px){
  header{padding:14px 16px;} .page-hero{padding:40px 16px 32px;} .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;} .format-grid{grid-template-columns:1fr;} 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; }

/* FAQ accordion. This page carries the same .faq-q/.faq-a markup as the
   generator landing pages but never carried their CSS, so the questions
   rendered as bare browser buttons and every answer sat open at full
   height. Copied verbatim from qr-code-with-logo.php so all FAQ pages
   collapse identically; theme.css layers the visibility fix on top. */
.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}