: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;
  --error: #f43f5e;
  --banner-leaderboard-h: 90px;
  --banner-rect-h: 250px;
  --banner-sticky-h: 60px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-bottom: var(--banner-sticky-h);
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(20,184,166,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(251,113,133,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(20,184,166,0.05) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* Animated grid lines */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(20,184,166,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,184,166,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

/* ── 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);
  flex-shrink: 0;
}

.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;
  -webkit-tap-highlight-color: transparent;
}
.back-link:hover { color: var(--accent); }
.back-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── MAIN CONTENT ────────────────────────────────────────────── */
main {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

/* Floating icon */
.coming-icon {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  margin: 0 auto 32px;
  box-shadow: 0 0 0 8px rgba(20,184,166,0.06), 0 0 40px rgba(20,184,166,0.12);
  animation: float 3.5s ease-in-out infinite;
  position: relative;
}

/* Pulsing ring around icon */
.coming-icon::before {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 36px;
  border: 1px solid rgba(20,184,166,0.2);
  animation: pulse-ring 3.5s ease-in-out infinite;
}
.coming-icon::after {
  content: '';
  position: absolute; inset: -24px;
  border-radius: 48px;
  border: 1px solid rgba(20,184,166,0.08);
  animation: pulse-ring 3.5s ease-in-out infinite 0.3s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes pulse-ring {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.06); }
}

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 100px;
  background: rgba(20,184,166,0.12);
  border: 1px solid rgba(20,184,166,0.3);
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 24px;
}

.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: blink 1.4s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* Heading */
h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -2px; margin-bottom: 20px;
}

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;
}

/* Subheading */
.subtitle {
  font-size: 17px; font-weight: 300; color: var(--muted);
  max-width: 480px; line-height: 1.7; margin: 0 auto 48px;
}

/* What's coming cards */
.features {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; max-width: 560px;
  margin: 0 auto 52px;
}

.feature-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
  transition: all 0.2s;
}

.feature-pill:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(20,184,166,0.08);
}

.feature-pill .pill-icon { font-size: 15px; }

/* Divider */
.divider {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 auto 48px;
}

/* Notify form */
.notify-label {
  font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: 0.5px; margin-bottom: 16px;
  text-transform: uppercase; font-size: 11px; letter-spacing: 1.2px;
}

.notify-form {
  display: flex; gap: 10px; max-width: 420px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}

.notify-input {
  flex: 1; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  padding: 12px 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.notify-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.notify-input::placeholder { color: var(--muted); }

.notify-btn {
  padding: 12px 24px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: all 0.2s; box-shadow: 0 4px 20px var(--accent-glow);
  -webkit-tap-highlight-color: transparent;
}

.notify-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(20,184,166,0.4); }
.notify-btn:active { transform: translateY(0); }

/* Success state */
.notify-success {
  display: none;
  align-items: center; gap: 10px; justify-content: center;
  padding: 14px 24px; border-radius: 12px;
  background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3);
  color: var(--success); font-size: 14px; font-weight: 500;
  max-width: 420px; margin: 0 auto;
  animation: fadeIn 0.4s ease;
}

.notify-success.visible { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notify-hint {
  margin-top: 12px; font-size: 11px; color: var(--muted);
  opacity: 0.6; letter-spacing: 0.3px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  padding: 28px 20px; text-align: center;
  flex-shrink: 0;
}

.footer-links {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; margin-bottom: 12px;
}

.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.5; }

/* ── HONEYPOT - invisible to humans, bait for bots ──────────── */
.hp-field {
  position: absolute;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ── MATH CAPTCHA ────────────────────────────────────────────── */
.math-wrap {
  display: flex; align-items: center; gap: 10px;
  justify-content: center; flex-wrap: wrap;
  margin: 0 auto 4px; max-width: 420px;
}

.math-equation {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 17px; color: var(--accent); flex-shrink: 0;
}

.math-answer {
  width: 72px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 16px;
  padding: 9px 12px; outline: none; text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}
.math-answer:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.math-answer.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.15);
}

.math-hint-text {
  font-size: 12px; color: var(--muted);
}

.math-error-msg {
  display: none; font-size: 12px; color: var(--error);
  text-align: center; margin-top: 4px;
}
.math-error-msg.visible { display: block; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  header { padding: 14px 16px; }
  main { padding: 48px 16px; }
  .banner-leaderboard { display: none; }
  h1 { letter-spacing: -1px; }
  .coming-icon { width: 64px; height: 64px; font-size: 28px; border-radius: 20px; }
  .notify-input { min-width: 100%; }
  .notify-btn { width: 100%; }
  footer { padding: 24px 16px; }
}

/* ── BANNER LEADERBOARD ──────────────────────────────────────── */
.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; flex-shrink: 0;
}
.banner-leaderboard .banner-inner {
  width: 728px; max-width: 100%; height: var(--banner-leaderboard-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;
}

/* Shared banner placeholder styling */
.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-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; }

/* 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; }