/* wj-jarvi-promo.css — the Jarvi promo on every audit and contact form.
   Two pieces: .wj-jp-proof (one line under each form's submit button, static markup in the form sources) and
   .wj-jp-card (the card wj-jarvi-promo.js builds into a form's success state).
   Linked from the SEO audit widget, the contact form, the website-report block and the PPC page's form.
   These sit inside page-authored cards (.form-card, .wj-cform, .wj-wdr) whose own p/a/label rules reach in, so every
   rule here is doubled-class scoped (.wj-jp.wj-jp-…) and sets its own font, colour and margin. Measure the rendered
   element after any change, never the stylesheet. */

.wj-jp, .wj-jp *{box-sizing:border-box}

/* ── proof line (before submit; no link on purpose) ───────────────────────── */
.wj-jp.wj-jp-proof{display:flex;gap:10px;align-items:center;margin:.85rem 0 0;padding:10px 12px;
  background:#FFF3EA;border:1px solid rgba(218,120,54,.22);border-radius:10px;
  font-family:'DM Sans',Arial,Helvetica,sans-serif;font-size:13px;line-height:1.45;color:#1A1A1A;text-align:left}
.wj-jp.wj-jp-proof svg{flex:0 0 auto;width:18px;height:18px}
.wj-jp.wj-jp-proof b{font-weight:700;color:#1A1A1A}

/* ── success card ─────────────────────────────────────────────────────────── */
.wj-jp.wj-jp-card{margin:16px 0 0;padding:24px 22px;border-radius:14px;
  background:#0C0F1A;background:linear-gradient(135deg,#1A0A04,#0C0F1A 40%,#020617);
  color:#fff;font-family:'DM Sans',Arial,Helvetica,sans-serif;font-size:14.5px;line-height:1.55;text-align:left;
  display:flex;flex-direction:column;gap:16px}
.wj-jp.wj-jp-card .wj-jp-lock{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wj-jp.wj-jp-card .wj-jp-word{display:flex;align-items:center;gap:6px;font-weight:700;font-size:20px;line-height:1.2;color:#fff}
.wj-jp.wj-jp-card .wj-jp-word svg{width:18px;height:18px}
.wj-jp.wj-jp-card .wj-jp-by{font-size:13px;font-weight:500;color:#D8D4CE}
.wj-jp.wj-jp-card .wj-jp-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.22em;line-height:1.3;color:#F59E0B;text-transform:uppercase}
.wj-jp.wj-jp-card .wj-jp-lock .wj-jp-eyebrow{margin-left:auto}
.wj-jp.wj-jp-card .wj-jp-h{margin:0;font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:400;
  font-size:clamp(36px,9vw,48px);line-height:.92;letter-spacing:.01em;color:#fff;text-transform:uppercase;text-wrap:balance}
.wj-jp.wj-jp-card .wj-jp-h span{color:#F27D2F}
.wj-jp.wj-jp-card .wj-jp-h--wide{font-size:clamp(34px,7vw,50px)}
.wj-jp.wj-jp-card .wj-jp-body{margin:0;font-size:14.5px;line-height:1.55;color:#D8D4CE}
.wj-jp.wj-jp-card .wj-jp-body b{color:#fff;font-weight:700}

.wj-jp.wj-jp-card .wj-jp-rings{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px}
.wj-jp.wj-jp-card .wj-jp-ringrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wj-jp.wj-jp-card .wj-jp-ring{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.3;color:#D8D4CE;text-align:center}
.wj-jp.wj-jp-card .wj-jp-dial{position:relative;width:64px;height:64px}
.wj-jp.wj-jp-card .wj-jp-dial svg{display:block;width:64px;height:64px}
.wj-jp.wj-jp-card .wj-jp-dial span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-size:27px;line-height:1;color:#fff}
.wj-jp.wj-jp-card .wj-jp-cap{margin:0;font-size:11px;line-height:1.4;color:#A8A29E;text-align:center}
.wj-jp.wj-jp-card .wj-jp-cap--left{text-align:left;margin-top:-8px}

.wj-jp.wj-jp-card .wj-jp-launches{display:flex;flex-direction:column}
.wj-jp.wj-jp-card .wj-jp-launches .wj-jp-eyebrow{font-size:10.5px;letter-spacing:.2em;padding-bottom:6px}
.wj-jp.wj-jp-card .wj-jp-ln{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.08)}
.wj-jp.wj-jp-card .wj-jp-ln > span:first-child{display:flex;flex-direction:column;gap:1px;min-width:0}
/* text-align is pinned: a page rule centres every <small> on some pages (measured on /little-rock-seo/) */
.wj-jp.wj-jp-card .wj-jp-ln b{font-size:13.5px;font-weight:600;line-height:1.3;color:#fff;text-align:left}
.wj-jp.wj-jp-card .wj-jp-ln small{font-size:11.5px;line-height:1.3;color:#A8A29E;text-align:left}
.wj-jp.wj-jp-card .wj-jp-num{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-size:25px;line-height:1;white-space:nowrap;color:#A8A29E}
.wj-jp.wj-jp-card .wj-jp-num i{font-style:normal;color:#F59E0B}
.wj-jp.wj-jp-card .wj-jp-num u{text-decoration:none;color:#4ADE80}

.wj-jp.wj-jp-card .wj-jp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wj-jp.wj-jp-card .wj-jp-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:14px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.wj-jp.wj-jp-card .wj-jp-tile small{font-size:10.5px;font-weight:700;letter-spacing:.12em;line-height:1.3;color:#A8A29E;text-align:left}
.wj-jp.wj-jp-card .wj-jp-tile .wj-jp-num{font-size:32px}
.wj-jp.wj-jp-card .wj-jp-tile b{font-size:12.5px;font-weight:600;line-height:1.3;color:#fff;text-align:left}

.wj-jp.wj-jp-card .wj-jp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wj-jp.wj-jp-card .wj-jp-chips li{margin:0;font-size:12.5px;font-weight:600;line-height:1.3;color:#fff;
  background:rgba(239,91,0,.14);border:1px solid rgba(239,91,0,.35);border-radius:999px;padding:6px 11px}
.wj-jp.wj-jp-card .wj-jp-chips li::before{content:"✓ ";color:#F59E0B}

.wj-jp.wj-jp-card .wj-jp-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:2px}
.wj-jp.wj-jp-card a.wj-jp-btn{display:inline-block;padding:13px 28px;background:linear-gradient(135deg,#EF5B00,#F59E0B);
  color:#111;font-family:'DM Sans',Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);border:0;border-radius:0;min-height:44px}
.wj-jp.wj-jp-card a.wj-jp-btn:hover{filter:brightness(1.07);color:#111}
.wj-jp.wj-jp-card a.wj-jp-link{font-size:13px;font-weight:600;line-height:1.3;color:#F59E0B;text-decoration:underline}
.wj-jp.wj-jp-card a.wj-jp-link:hover{color:#FBBF24}
.wj-jp.wj-jp-card a:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media screen and (max-width:520px){
  .wj-jp.wj-jp-card{padding:20px 16px}
  .wj-jp.wj-jp-card .wj-jp-tiles{grid-template-columns:1fr}
  .wj-jp.wj-jp-card .wj-jp-lock .wj-jp-eyebrow{margin-left:0;flex-basis:100%}
}