/* Free Grok Bot giveaway pages (/bot, /bot-thank-you, /bot-on-list). Loaded AFTER styles.css + guide.css.
   Separate file so /guide and guide.css stay byte-for-byte unchanged. (2026-10-31)
   1) Opt-in hero: form sits right after the headline on phones (copy / form / more); desktop = copy left, sticky form right.
      Same rules as the prepared Oct 31 guide mobile fix, scoped to these pages.
   2) Bottom safe space so the fixed "Powered by Netlify" badge never covers the last CTA/footer. */
.optin-layout{grid-template-areas:"copy" "form" "more"}
.hero-copy{grid-area:copy}.optin-form{grid-area:form}.hero-more{grid-area:more}
.hero-copy .lead{margin-bottom:0}
@media (min-width:960px){.optin-layout{grid-template-areas:"copy form" "more form";grid-template-rows:auto 1fr;row-gap:20px}}
@media (max-width:959px){
  .hero{padding:20px 0 32px}
  .optin-layout{gap:18px}
  .hero h1{font-size:clamp(1.65rem,7.4vw,2.2rem);margin-bottom:.4em}
  .hero-copy .eyebrow{margin-bottom:.4em}
  .hero-copy .lead{font-size:1rem;line-height:1.45}
  .optin-form{padding:18px}
  .optin-form h2{font-size:1.2rem;margin-bottom:.3em}
  .optin-form > .muted.small{margin:0 0 10px}
  .optin-form .field{margin-bottom:12px}
}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.page-hero .steps{margin:0 0 1.2em}
@media (min-width:960px){.steps.steps-3{grid-template-columns:repeat(3,1fr)}}
/* Plan requirement note inside the form: visible, honest, not alarming */
.req-note{display:flex;gap:8px;align-items:flex-start;background:rgba(167,139,250,.10);border:1px solid var(--accent);border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:.92rem;color:var(--text)}
.req-note .i{color:var(--brand2);font-weight:800;line-height:1.35}
.good-to-know{margin:0;padding-left:1.2em}
.good-to-know li{margin:.35em 0;color:var(--muted)}
.good-to-know strong{color:var(--text)}
.foot-legal{margin-top:6px}
@media (max-width:959px){.req-note{padding:7px 10px;margin:0 0 10px;font-size:.88rem}.optin-form .field label{margin-bottom:4px}}