/* advertisemyservices.com — one-page funnel into the advertiser portal (ads.thespoollist.com).
   Loaded after /assets/site.css (sites.json extraCss). Re-skins the satellite theme with the portal palette and type
   (web/ads/assets/ads.css: night violet, gold CTA, cyan links, Oxanium + Archivo, chamfered corners) so the click into
   the sign-up page feels like the same product. */
:root{
  --bg:#070612;--card:#0c0c1c;--card2:#11112a;--line:#1d1d38;--line2:#2a2a52;--text:#F5F0FA;--muted:#c9bfe0;--dim:#9a86c4;
  --cyan:#24E2E0;--gold:#FFD700;--pink:#F31C9B;--accent:#FFD700;--on-accent:#050510;
  --head:'Archivo',system-ui,sans-serif;--body:'Oxanium',system-ui,sans-serif;--radius:0px;
  --chamfer:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)
}
body{font:400 16.5px/1.6 var(--body);background:radial-gradient(ellipse 900px 480px at 18% -8%,rgba(36,226,224,.08),transparent 60%),radial-gradient(ellipse 900px 480px at 92% -8%,rgba(255,215,0,.07),transparent 60%),var(--bg)}
html{background:var(--bg)}
a{color:var(--cyan)}a:hover{color:#8ff3f2}
h1,h2,h3{font-family:var(--body);font-weight:800;letter-spacing:.02em}
h1{font-family:var(--head);font-weight:900;letter-spacing:.01em}
h2{letter-spacing:.1em}
.kicker{font-family:var(--body);color:var(--gold);letter-spacing:.2em}
.note{color:var(--dim)}
.btn{font-family:var(--body);border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);background:var(--gold);color:var(--on-accent);letter-spacing:.16em}
.btn:hover{box-shadow:none;filter:brightness(1.06)}
.nav{background:rgba(7,6,18,.92)}
.nav .dot{border-radius:0;clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%);box-shadow:none}
.nav nav a{font-family:var(--body)}
.brand-name{font-family:var(--head)}
.brand-by{font-family:var(--body);color:var(--dim)}

/* Hero */
.hero-dark{background-color:var(--bg)}
.hero-dark::after{background:linear-gradient(90deg,rgba(7,6,18,.9),rgba(7,6,18,.4) 70%,transparent)}
.lp-hero.has-img{grid-template-columns:1.2fr .8fr}
.lp-hero h1{text-shadow:0 0 28px rgba(255,215,0,.22)}
.lp-hero .sub{color:var(--muted)}
.lp-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.lp-badge{display:inline-block;padding:5px 10px;border:1px solid rgba(255,215,0,.5);color:var(--gold);font:800 12px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.lp-where{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);padding:22px;clip-path:var(--chamfer);min-width:0}
.lp-where h2{font-size:.95rem;letter-spacing:.16em;margin:0 0 12px;color:var(--cyan)}
.lp-where ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lp-where li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;color:var(--muted);font-size:.95rem;line-height:1.5}
.lp-where strong{color:var(--text)}
.lp-pin{width:14px;height:14px;margin-top:4px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* Answer-first block (AI search / GEO) */
.lp-answer{margin:22px 0 6px;padding:16px 20px;border-inline-start:3px solid var(--cyan);background:rgba(36,226,224,.05);color:var(--muted)}
.lp-answer p{margin:0}

/* Sections */
.lp-sec{margin-top:36px;scroll-margin-top:120px}
.lp-sec h2{margin-top:0}
.lp-lead{color:var(--muted);max-width:70ch}
.lp-trades{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lp-trades li{padding:7px 12px;border:1px solid var(--line2);background:var(--card);font:600 13.5px/1.3 var(--body);color:var(--text)}
.lp-not{margin-top:16px;padding:16px 18px;border:1px solid rgba(243,28,155,.45);background:rgba(243,28,155,.06);clip-path:var(--chamfer)}
.lp-not h3{color:#ff8fcd;margin-bottom:.3em}
.lp-not p{margin:0;color:var(--muted)}
.lp-steps{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
.lp-steps li{position:relative;padding:20px 18px 16px;background:var(--card);border:1px solid var(--line);clip-path:var(--chamfer)}
.lp-steps h3{margin:.2em 0 .35em}
.lp-steps p{margin:0;color:var(--muted);font-size:.95rem}
.lp-n{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--gold);color:var(--on-accent);font:900 16px var(--head);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.lp-card{padding:18px;background:var(--card);border:1px solid var(--line);clip-path:var(--chamfer)}
.lp-card h3{color:var(--gold);margin-bottom:.35em}
.lp-card p{margin:0;color:var(--muted);font-size:.95rem}

/* Pricing card */
.lp-price{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid rgba(255,215,0,.45);background:linear-gradient(180deg,var(--card2),var(--card));clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.lp-price-main,.lp-price-cov{padding:24px;min-width:0}
.lp-price-cov{border-inline-start:1px solid var(--line2);background:rgba(7,6,18,.35)}
.lp-price-cov h3{color:var(--cyan)}
.lp-price-cov p{color:var(--muted)}
.lp-amount{margin:0 0 10px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.lp-amount span{font:900 clamp(2.6rem,7vw,3.6rem)/1 var(--head);color:var(--gold)}
.lp-amount small{font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.lp-price-main>p{color:var(--muted)}
.lp-price-main .lp-badge{margin:0 0 6px}
.lp-price-cta{margin:16px 0 10px}

/* FAQ + closing band + footer */
.faq details{border-bottom-color:var(--line)}
.faq summary{font-family:var(--body);font-weight:700}
.faq details p{color:var(--muted)}
.cta-band{background:var(--card2);border-color:var(--line)}
.cta-band p{color:var(--muted)}
.lp-final .note{margin:16px auto 0;font-size:.85rem}
.foot{color:var(--dim)}.foot a{color:var(--muted)}
.langs strong{color:var(--gold)}

@media (max-width:900px){
  .lp-steps{grid-template-columns:1fr}
  .lp-price{grid-template-columns:1fr}
  .lp-price-cov{border-inline-start:0;border-top:1px solid var(--line2)}
}
@media (max-width:760px){
  .lp-hero.has-img{grid-template-columns:1fr}
  .hero-dark::after{background:rgba(7,6,18,.55)}
  .lp-where{padding:18px 16px;order:2}
  .lp-answer{padding:14px 16px}
  .lp-price-main,.lp-price-cov{padding:18px 16px}
  .lp-trades li{font-size:13px;padding:6px 10px}
  .hero-text>.kicker{display:block}
  .lp-sec{scroll-margin-top:110px}
}