/* ── DESIGN TOKENS ───────────────────────────────────────────── */
: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;
  --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;
}

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

/* ── PAGE 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: 500px; margin: 0 auto; line-height: 1.7;
}

/* ── MAIN GRID ───────────────────────────────────────────────── */
.main-grid {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 480px;
  gap: 48px; padding: 60px 24px 80px; align-items: start;
}

/* ── LEFT: Info panel ────────────────────────────────────────── */
.info-section h2 {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: -0.5px; margin-bottom: 24px;
}

.info-section h2 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.info-list { list-style: none; margin-bottom: 36px; }

.info-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.info-item:first-child { padding-top: 0; }
.info-item:last-child { border-bottom: none; }

.info-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--surface2); border: 1px solid var(--border);
}

.info-text h3 {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  margin-bottom: 4px; color: var(--text);
}
.info-text p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Response time notice */
.response-notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(20,184,166,0.08);
  border: 1px solid rgba(20,184,166,0.25);
  border-radius: 10px; padding: 16px 18px;
}
.response-notice .icon { font-size: 20px; flex-shrink: 0; }
.response-notice p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.response-notice strong { color: var(--text); }

/* ── RIGHT: Contact Form panel ───────────────────────────────── */
.form-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  position: sticky; top: 24px;
}

.form-panel-header {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}

.form-panel-header .icon-badge {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.form-panel-header h2 {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px;
}

/* ── FORM FIELDS ─────────────────────────────────────────────── */
.contact-form { padding: 24px; }

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: 8px;
}

.form-group label .required {
  color: var(--accent); margin-left: 3px; font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: 'DM Sans', sans-serif;
  font-size: 14px; padding: 12px 14px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.15);
}

.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-group select option { background: var(--surface2); }

.field-error {
  display: none; font-size: 12px; color: var(--error);
  margin-top: 5px; padding-left: 2px;
}
.field-error.visible { display: block; }

/* ── HONEYPOT ─────────────────────────────────────────────────── */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

/* ── MATH CAPTCHA ─────────────────────────────────────────────── */
.math-challenge {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; margin-bottom: 18px;
}

.math-challenge-label {
  font-size: 12px; font-weight: 500; color: var(--muted);
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px;
}

.math-question {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

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

.math-answer {
  width: 80px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif;
  font-size: 16px; padding: 8px 12px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; text-align: center;
  -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 { font-size: 12px; color: var(--muted); }

/* ── SUBMIT BUTTON ───────────────────────────────────────────── */
.submit-btn {
  width: 100%; padding: 14px; 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: 15px; letter-spacing: 0.5px; cursor: pointer;
  transition: all 0.25s; box-shadow: 0 6px 24px var(--accent-glow);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; -webkit-tap-highlight-color: transparent;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(20,184,166,0.4); }
.submit-btn:active { transform: translateY(0); }

.form-privacy {
  margin-top: 12px; font-size: 11px; color: var(--muted);
  text-align: center; line-height: 1.6; opacity: 0.7;
}
.form-privacy a { color: var(--accent); text-decoration: none; }
.form-privacy a:hover { text-decoration: underline; }

/* ── SUCCESS STATE ───────────────────────────────────────────── */
.success-state {
  display: none; padding: 40px 24px; text-align: center;
  flex-direction: column; align-items: center; gap: 16px;
}
.success-state.visible { display: flex; }

.success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(52,211,153,0.15); border: 2px solid var(--success);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}

.success-state h3 {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px;
  color: var(--success);
}
.success-state p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 300px; }

/* ── 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: 900px) {
  .main-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-panel { position: static; }
}

@media (max-width: 600px) {
  header { padding: 14px 16px; }
  .page-hero { padding: 40px 16px 32px; }
  .banner-leaderboard { display: none; }
  .main-grid { padding: 32px 16px 60px; }
  footer { padding: 28px 16px; }
}

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

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

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