/* ===========================================================================
   for-marketers.css — /for/marketers campaign landing ONLY.
   Scoped fm-* classes; loads after landing.css (shared :root tokens there,
   with local fallbacks so the file stays self-describing). Dark + lime, same
   visual direction as the main landing. Pure HTML+CSS first paint.
   =========================================================================== */

/* Hero CTA anchors down to the signup form (the captcha lives there, once);
   give the jump a smooth ride. Page-scoped stylesheet, so this only affects
   /for/marketers. */
html { scroll-behavior: smooth; }

.fm-page {
  --fm-bg:     var(--lw-bg, #0a0a0b);
  --fm-fg:     var(--lw-fg, #f5f5f5);
  --fm-muted:  var(--lw-muted, #a1a1a6);
  --fm-faint:  var(--lw-faint, #6a6a6f);
  --fm-accent: var(--lw-accent, #c6ff3a);
  --fm-card:   var(--lw-card, #131316);
  --fm-border: var(--lw-border, #1d1d20);
  --fm-mono:   var(--lw-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --fm-maxw:   var(--lw-maxw, 1080px);
  background: var(--fm-bg);
  color: var(--fm-fg);
}

.fm-wrap { max-width: var(--fm-maxw); margin: 0 auto; padding: 0 32px; }

/* No .fm-page a color reset here: it would out-rank the .fm-cta class rule
   (0,2,1 beats 0,1,0) and paint the lime CTA's text white once the button
   became an anchor. landing.css's global `a` reset is enough. */
.fm-page a:focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 3px; }

.fm-accent { color: var(--fm-accent); }

/* --- Hero ----------------------------------------------------------------- */

.fm-hero { padding: 84px 0 76px; text-align: center; }
.fm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1.5 var(--fm-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fm-accent);
  border: 1px solid var(--fm-border); background: var(--fm-card);
  padding: 7px 14px; border-radius: 999px;
}
.fm-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fm-accent);
  box-shadow: 0 0 0 0 rgba(198, 255, 58, .6);
  animation: fm-pulse 1.7s infinite;
}
@keyframes fm-pulse {
  70%  { box-shadow: 0 0 0 8px rgba(198, 255, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 255, 58, 0); }
}
.fm-hero h1 {
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.04; letter-spacing: -.032em; font-weight: 800;
  margin: 26px 0 18px;
}
.fm-subhead {
  color: var(--fm-muted); font-size: 18px; line-height: 1.6;
  max-width: 58ch; margin: 0 auto 30px;
}
.fm-cta-form {
  display: flex; flex-direction: column; align-items: center;
  max-width: 420px; margin: 0 auto;
}
.fm-cta {
  display: inline-block;
  background: var(--fm-accent); color: var(--fm-bg);
  font: 800 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 15px 32px; border: 0; border-radius: 10px; cursor: pointer;
}
.fm-cta:hover { filter: brightness(1.06); }
.fm-cta-secondary {
  display: block; margin-top: 14px;
  color: var(--fm-muted); font-size: 14px;
}
.fm-cta-secondary:hover { color: var(--fm-fg); }
.fm-arrow { color: var(--fm-accent); }
.fm-hero-note {
  margin-top: 34px; font-size: 13px; color: var(--fm-faint);
  border-top: 1px dashed var(--fm-border);
  display: inline-block; padding-top: 16px;
}

/* --- Section shells ------------------------------------------------------- */

.fm-sec { border-top: 1px solid var(--fm-border); padding: 62px 0; }
.fm-section-head { margin-bottom: 34px; }
.fm-section-label {
  font: 600 11px/1 var(--fm-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fm-accent); margin: 0 0 14px;
}
.fm-section-title {
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -.025em; line-height: 1.1; font-weight: 800;
  margin: 0; max-width: 26ch;
}

/* --- See it work: poster + phone ------------------------------------------ */

.fm-situ {
  display: grid; grid-template-columns: 340px 1fr; gap: 54px; align-items: center;
}
.fm-poster {
  background: #fdfcf7; color: #141414;
  border-radius: 6px; padding: 34px 30px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 2px 0 #e6e3d8;
  transform: rotate(-1.1deg);
  position: relative;
}
.fm-poster::before {
  content: ""; position: absolute; top: -7px; left: 50%;
  width: 74px; height: 15px;
  background: rgba(20, 20, 20, .55);
  transform: translateX(-50%); border-radius: 2px;
}
.fm-poster-title {
  font-weight: 900; font-size: 44px; line-height: .95;
  letter-spacing: -.04em; text-transform: uppercase;
}
.fm-poster-title em {
  font-style: normal;
  box-shadow: inset 0 -.32em 0 #c6ff3a;
}
.fm-poster-sub { font-size: 17px; font-weight: 600; margin: 14px 0 4px; }
.fm-poster-meta { font-size: 13px; color: #56564f; margin: 0 0 20px; }
.fm-poster-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.fm-poster-scan {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  max-width: 130px; line-height: 1.35;
}
.fm-poster-scan span {
  display: block; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: #56564f; font-size: 11.5px;
}
.fm-poster-row img { width: 128px; height: 128px; display: block; }
.fm-poster-brand { margin: 18px 0 0; font-size: 10.5px; color: #8a887e; letter-spacing: .04em; }

.fm-situ-right { display: flex; gap: 26px; align-items: center; }
.fm-phone { flex: none; }
.fm-phone img {
  display: block; width: 260px; height: auto;
  border-radius: 26px; border: 1px solid #2c2c31;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}
.fm-situ-note { color: var(--fm-muted); max-width: 46ch; margin: 0; }

/* --- How it works ---------------------------------------------------------- */

.fm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fm-step {
  background: var(--fm-card); border: 1px solid var(--fm-border);
  border-radius: 12px; padding: 24px;
}
.fm-num { font: 700 12px/1 var(--fm-mono); color: var(--fm-accent); letter-spacing: .08em; }
.fm-step h3 { font-size: 17px; margin: 12px 0 8px; letter-spacing: -.015em; }
.fm-step p { margin: 0; color: var(--fm-muted); font-size: 14.5px; }

/* --- Analytics ------------------------------------------------------------- */

.fm-shot {
  border: 1px solid #2c2c31; border-radius: 12px; overflow: hidden;
  background: var(--fm-card); margin-bottom: 20px;
}
.fm-shot-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--fm-border);
}
.fm-dot { width: 10px; height: 10px; border-radius: 50%; background: #2f2f35; }
.fm-shot-url {
  margin-left: 10px; font: 500 11.5px/1 var(--fm-mono); color: var(--fm-faint);
  background: var(--fm-bg); border-radius: 6px; padding: 6px 12px;
}
.fm-shot img { display: block; width: 100%; height: auto; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.fm-chip {
  font: 600 12px/1 var(--fm-mono); color: var(--fm-muted);
  background: var(--fm-card); border: 1px solid var(--fm-border);
  padding: 8px 13px; border-radius: 7px;
}
.fm-chip b { color: var(--fm-accent); font-weight: 700; }
.fm-analytics-copy { color: var(--fm-muted); max-width: 62ch; margin: 0; }

/* --- Where it lives --------------------------------------------------------- */

.fm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fm-place {
  background: var(--fm-card); border: 1px solid var(--fm-border);
  border-radius: 12px; padding: 22px 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.fm-place-icon {
  width: 46px; height: 46px; flex: none;
  padding: 10px;
  color: var(--fm-accent);
  background: var(--fm-card);
  border: 1px solid var(--fm-border);
  border-radius: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fm-place h3 { font-size: 16px; margin: 0 0 6px; }
.fm-place p { margin: 0; color: var(--fm-muted); font-size: 14px; }

/* --- Them / you ------------------------------------------------------------- */

.fm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fm-col { border-radius: 12px; padding: 26px 28px; border: 1px solid var(--fm-border); }
.fm-col-them { background: var(--fm-card); }
.fm-col-you { background: #10140a; border-color: #2a3a14; }
.fm-col-label {
  font: 600 11px/1 var(--fm-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fm-faint); margin: 0 0 12px;
}
.fm-col-you .fm-col-label { color: var(--fm-accent); }
.fm-col h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.02em; }
.fm-col ul { margin: 0; padding-left: 18px; }
.fm-col li { color: var(--fm-muted); margin: 8px 0; font-size: 14.5px; }

/* --- FAQ --------------------------------------------------------------------- */

.fm-faq-list { border-top: 1px solid var(--fm-border); }
.fm-faq-item { border-bottom: 1px solid var(--fm-border); }
.fm-faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 4px; font-weight: 600; font-size: 15.5px;
  display: flex; justify-content: space-between; align-items: center;
}
.fm-faq-item summary::-webkit-details-marker { display: none; }
.fm-faq-toggle { color: var(--fm-accent); font-weight: 700; }
.fm-faq-item[open] .fm-faq-toggle { transform: rotate(45deg); }
.fm-faq-a { color: var(--fm-muted); padding: 0 4px 18px; max-width: 72ch; font-size: 14.5px; }
.fm-faq-a strong { color: var(--fm-fg); }

/* --- Closing ------------------------------------------------------------------ */

.fm-closing {
  border-top: 1px solid var(--fm-border);
  text-align: center; padding: 84px 0 90px;
  background: radial-gradient(60% 80% at 50% 110%, rgba(198, 255, 58, .09), transparent);
}
.fm-closing h2 {
  font-size: clamp(30px, 4vw, 44px); letter-spacing: -.028em;
  line-height: 1.08; font-weight: 800; margin: 0 0 12px;
}
.fm-closing-sub { color: var(--fm-muted); margin: 0 0 28px; }

/* --- Responsive ---------------------------------------------------------------- */

@media (max-width: 920px) {
  .fm-situ { grid-template-columns: 1fr; gap: 40px; }
  .fm-poster { margin: 0 auto; max-width: 360px; }
  .fm-situ-right { flex-direction: column; align-items: flex-start; }
  .fm-situ-note { max-width: 60ch; }
}
@media (max-width: 760px) {
  .fm-hero { padding: 60px 0 56px; }
  .fm-sec { padding: 48px 0; }
  .fm-steps { grid-template-columns: 1fr; }
  .fm-grid2 { grid-template-columns: 1fr; }
  .fm-split { grid-template-columns: 1fr; }
  .fm-situ-right { align-items: center; }
}
@media (max-width: 480px) {
  .fm-wrap { padding: 0 20px; }
  .fm-subhead { font-size: 16.5px; }
  .fm-poster { padding: 26px 22px 20px; }
  .fm-poster-row img { width: 104px; height: 104px; }
  .fm-phone img { width: 220px; }
}