/* Автогенератор постов — тизер-страница на /blog/generator-postov.
   Всё заскоуплено под #gp, чтобы не сталкиваться с остальным сайтом. */

#gp{
  --paper:#F4F3EE; --ink:#15181C; --lime:#C8F048;
  --line:#E2E0D8; --muted:#6A7178; --card:#FFFFFF;
  max-width:1080px; margin:0 auto; padding:24px 20px 72px;
  color:var(--ink);
  font-family:"Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
#gp *{box-sizing:border-box}
#gp a{color:inherit}

/* Hero */
#gp .gp-hero{padding:12px 0 40px; border-bottom:1px solid var(--line); margin-bottom:40px}
#gp .gp-badge{
  display:inline-block;
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--lime); color:#161a08;
  border-radius:999px; padding:5px 12px;
}
#gp .gp-hero h1{
  font-size:clamp(30px, 5vw, 46px); font-weight:800; line-height:1.06;
  letter-spacing:-.01em; margin:14px 0 14px; text-wrap:balance;
}
#gp .gp-lead{
  color:var(--muted); font-size:clamp(16px, 2vw, 18px); line-height:1.55;
  max-width:760px; margin:0 0 26px; text-wrap:pretty;
}

/* CTA buttons */
#gp .gp-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
#gp .gp-cta--bottom{margin-top:28px}
#gp .gp-btn{
  display:inline-block; padding:14px 26px; border-radius:10px;
  font-weight:700; font-size:15px; text-decoration:none;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
#gp .gp-btn--primary{background:var(--ink); color:var(--paper); border:1.5px solid var(--ink)}
#gp .gp-btn--primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(21,24,28,.16)}
#gp .gp-btn--ghost{border:1.5px solid var(--line); color:var(--ink); background:transparent}
#gp .gp-btn--ghost:hover{border-color:var(--ink)}
#gp .gp-cta-note{color:var(--muted); font-size:13.5px}

/* Section headings */
#gp .gp-formats h2,
#gp .gp-how h2,
#gp .gp-why h2{
  font-size:clamp(22px, 3.5vw, 30px); font-weight:800; line-height:1.15;
  margin:0 0 22px; text-wrap:balance;
}
#gp section{margin-bottom:56px}

/* 2x2 grid of formats */
#gp .gp-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:760px){ #gp .gp-grid{grid-template-columns:1fr} }
#gp .gp-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
#gp .gp-card-tag{
  align-self:flex-start;
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; background:#fff;
}
#gp .gp-card h3{
  font-size:19px; font-weight:800; line-height:1.25;
  margin:4px 0 4px; text-wrap:balance;
}
#gp .gp-card p{color:var(--ink); margin:0; line-height:1.55; text-wrap:pretty}
#gp .gp-features{
  margin:8px 0 0; padding:0 0 0 20px;
  color:var(--muted); font-size:14.5px; line-height:1.55;
}
#gp .gp-features li{margin:6px 0; text-wrap:pretty}

/* Steps */
#gp .gp-steps{
  margin:0; padding:0 0 0 22px; counter-reset:step;
  display:grid; gap:16px; max-width:820px;
}
#gp .gp-steps li{
  position:relative; padding:2px 0 2px 8px; line-height:1.55;
  color:var(--ink); text-wrap:pretty;
}
#gp .gp-steps li b{font-weight:800}

/* Why section */
#gp .gp-why p{
  color:var(--ink); font-size:16px; line-height:1.6;
  max-width:760px; margin:0 0 14px; text-wrap:pretty;
}