/* =====================================================================
 * Run or Rumble — landing / tool pages
 *
 * The homepage keeps its own inline <style> (it is a collage and shares
 * almost nothing structurally). This is the shared skin for the generated
 * search-landing pages: nav, hero with the paste box, prose body, FAQ,
 * related links, CTA band, footer.
 *
 * Generated pages are written by tools/build_landing_pages.py — edit the
 * copy there, not in the HTML.
 * ===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(circle at 12% 4%, var(--pastel-lemon), transparent 26%),
    radial-gradient(circle at 88% 2%, var(--pastel-sky), transparent 24%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.65;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 0 var(--space-6); }
.wrap--wide { max-width: 1080px; }
a { color: var(--rumble-coral); }
a.ror-btn, .nav a { text-decoration: none; }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); flex-wrap: wrap; }
.nav__links { display: flex; gap: var(--space-5); align-items: center; }
.nav__links a { font-family: var(--font-display); font-weight: 600; color: var(--fg-2); font-size: var(--text-sm); }
.nav__links a:hover { color: var(--fg); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand__fig { height: 34px; width: auto; }
.brand__wm { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: .9; white-space: nowrap; letter-spacing: -.01em; }
.brand__wm .run { color: #E3A900; }
.brand__wm .or  { font-size: .46em; color: var(--fg); display: inline-block; transform: rotate(-8deg); margin: 0 .12em; vertical-align: .18em; }
.brand__wm .rum { color: var(--rumble-coral); }

/* ---------- hero ---------- */
.lp-hero { padding: var(--space-8) 0 var(--space-4); text-align: center; }
.lp-kicker {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase;
  background: var(--pastel-lemon); color: var(--fg);
  padding: 6px 14px; border-radius: var(--radius-full); transform: rotate(-1.5deg);
}
.lp-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem); line-height: 1.04;
  letter-spacing: -.02em; margin: var(--space-4) 0 0;
}
.lp-hero h1 .hl { color: var(--rumble-coral); }
.lp-lede { font-size: var(--text-md); font-weight: 600; color: var(--fg-2); margin: var(--space-4) auto var(--space-6); max-width: 40rem; }

/* ---------- the paste box (the tool, on the page) ---------- */
.lp-quick {
  text-align: left; max-width: 34rem; margin: 0 auto;
  background: var(--surface); border: 2px solid var(--fg); border-radius: var(--radius-xl);
  padding: var(--space-5); box-shadow: 4px 4px 0 var(--fg);
}
.hq__label { display: block; font-size: var(--text-sm); font-weight: 800; font-family: var(--font-display); margin-bottom: var(--space-2); }
.lp-quick textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: var(--text-base); line-height: 1.5;
  border: 1px solid var(--fg-3); border-radius: var(--radius-md); resize: vertical;
  background: #fff; color: var(--fg);
}
.lp-quick textarea:focus { outline: none; border-color: var(--rumble-coral); box-shadow: var(--ring); }
.hq__meta { font-size: var(--text-xs); color: var(--fg-2); margin: var(--space-2) 0 var(--space-4); font-weight: 600; }
.hq__go { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hq__go .ror-btn { flex: 1 1 auto; justify-content: center; padding-inline: var(--space-4); font-size: var(--text-sm); border: 0; cursor: pointer; }
.hq__go .ror-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fg); }

/* ---------- prose body ---------- */
.lp-body { padding: var(--space-10) 0 var(--space-4); }
.lp-body h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  line-height: 1.2; margin: var(--space-10) 0 var(--space-3);
}
.lp-body h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); }
.lp-body p  { margin: 0 0 var(--space-4); }
.lp-body ul { margin: 0 0 var(--space-4); padding-left: 1.2em; }
.lp-body li { margin-bottom: var(--space-2); }

/* ---------- three steps ---------- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); }
.lp-step {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.lp-step .n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: var(--space-2);
  background: var(--race-yellow); color: var(--fg-on-accent); border-radius: var(--radius-full);
}
.lp-step h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.lp-step p  { margin: 0; font-size: var(--text-sm); color: var(--fg-2); }

/* ---------- FAQ ---------- */
.lp-faq details {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
}
.lp-faq summary { font-family: var(--font-display); font-weight: 700; cursor: pointer; }
.lp-faq details p { margin: var(--space-3) 0 0; color: var(--fg-2); }

/* ---------- related ---------- */
.lp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-8); }
.lp-related a {
  display: block; background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none; color: var(--fg);
  font-family: var(--font-display); font-weight: 600; box-shadow: var(--shadow-sm);
}
.lp-related a:hover { border-color: var(--rumble-coral); color: var(--rumble-coral); }
.lp-related span { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--fg-2); margin-top: 4px; }

/* ---------- CTA band + footer ---------- */
.lp-cta {
  text-align: center; background: var(--surface); border: 3px solid var(--fg);
  border-radius: var(--radius-xl); padding: var(--space-10) var(--space-6);
  margin: var(--space-10) 0; box-shadow: 6px 6px 0 var(--fg);
}
.lp-cta h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.lp-cta p { color: var(--fg-2); margin: 0 0 var(--space-5); }
.lp-foot { text-align: center; padding: var(--space-8) 0 var(--space-10); font-size: var(--text-xs); color: var(--fg-2); }
.lp-foot a { color: var(--fg-2); margin: 0 var(--space-2); }

@media (max-width: 720px) {
  .lp-steps { grid-template-columns: 1fr; }
  .nav__links { gap: var(--space-3); }
  .lp-cta { padding: var(--space-8) var(--space-4); box-shadow: 4px 4px 0 var(--fg); }
}