/* ============================================================
   jar-ext.css — JarForAI extension promo components
   Self-contained: defines its own vars (mapped to the site
   palette) so it never depends on the host page's var names.
   Covers: announcement bar, dashboard card, /extension guide.
   Go-live: flip data-state="review" -> "live" on each component.
   ============================================================ */
.jar-ext-bar, .jar-ext-card, .jar-guide {
  --amber:#c2670a;
  --amber-dk:#a5560a;
  --ink:#141412;
  --muted:#8f8b83;
  --line:#e8e6e0;
  --cream:#fef2e1;
  --bg:#f8f7f4;
  --ok:#0f7a4e;
}



  /* ============================================================
     1. ANNOUNCEMENT BAR
     ============================================================ */
  .jar-ext-bar{
    width:100%;background:var(--amber);color:#fff;
    display:flex;align-items:center;justify-content:center;gap:14px;
    padding:10px 18px;font-size:14px;font-weight:600;text-align:center;
    flex-wrap:wrap;
  }
  .jar-ext-bar .jar-ext-bar-icon{font-size:16px}
  .jar-ext-bar .jar-ext-bar-cta{
    background:#fff;color:var(--amber-dk);text-decoration:none;
    padding:5px 14px;border-radius:999px;font-weight:700;font-size:13px;
    white-space:nowrap;transition:transform .12s ease;
  }
  .jar-ext-bar .jar-ext-bar-cta:hover{transform:translateY(-1px)}
  .jar-ext-bar .jar-ext-bar-close{
    position:absolute;right:14px;background:none;border:none;color:#fff;
    font-size:18px;cursor:pointer;opacity:.8;line-height:1;
  }
  .jar-ext-bar{position:relative;z-index:9999;transform:translateZ(0)}
  /* copy swap by state */
  .jar-ext-bar[data-state="live"]  .msg-review{display:none}
  .jar-ext-bar[data-state="review"] .msg-live{display:none}

  /* ============================================================
     2. DASHBOARD CARD
     ============================================================ */
  .jar-ext-card{
    display:flex;gap:20px;align-items:center;
    background:linear-gradient(135deg,var(--cream) 0%,#fff 100%);
    border:1px solid var(--line);border-radius:16px;
    padding:22px 24px;margin:24px 0;
    box-shadow:0 1px 3px rgba(42,35,32,.04);
  }
  .jar-ext-card .jar-ext-card-badge{
    flex-shrink:0;width:56px;height:56px;border-radius:14px;
    background:var(--amber);display:flex;align-items:center;justify-content:center;
    font-size:28px;box-shadow:0 4px 12px rgba(200,121,26,.25);
  }
  .jar-ext-card .jar-ext-card-body{flex:1;min-width:0}
  .jar-ext-card .jar-ext-card-eyebrow{
    font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--amber-dk);margin-bottom:3px;
  }
  .jar-ext-card h3{margin:0 0 5px;font-size:18px;font-weight:700}
  .jar-ext-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
  .jar-ext-card .jar-ext-card-actions{
    flex-shrink:0;display:flex;flex-direction:column;gap:8px;align-items:stretch;
  }
  .jar-ext-btn{
    display:inline-block;text-align:center;text-decoration:none;cursor:pointer;
    padding:10px 20px;border-radius:10px;font-size:14px;font-weight:700;
    border:1.5px solid var(--amber);white-space:nowrap;transition:all .14s ease;
  }
  .jar-ext-btn.primary{background:var(--amber);color:#fff}
  .jar-ext-btn.primary:hover{background:var(--amber-dk);border-color:var(--amber-dk)}
  .jar-ext-btn.ghost{background:transparent;color:var(--amber-dk)}
  .jar-ext-btn.ghost:hover{background:var(--cream)}
  .jar-ext-card .free-tag{
    font-size:12px;color:var(--ok);font-weight:700;text-align:center;margin-top:2px;
  }
  /* copy swap by state */
  .jar-ext-card[data-state="live"]  .msg-review{display:none}
  .jar-ext-card[data-state="review"] .msg-live{display:none}

  @media(max-width:640px){
    .jar-ext-card{flex-direction:column;text-align:center;align-items:stretch}
    .jar-ext-card .jar-ext-card-badge{margin:0 auto}
  }

  /* ============================================================
     3. INSTALL GUIDE PAGE
     ============================================================ */
  .jar-guide{max-width:720px;margin:0 auto;padding:48px 24px 80px}
  .jar-guide .guide-hero{text-align:center;margin-bottom:8px}
  .jar-guide .guide-hero .badge{
    display:inline-flex;width:72px;height:72px;border-radius:18px;
    background:var(--amber);align-items:center;justify-content:center;
    font-size:38px;margin-bottom:18px;box-shadow:0 6px 18px rgba(200,121,26,.28);
  }
  .jar-guide h1{font-size:32px;margin:0 0 10px;letter-spacing:-.01em}
  .jar-guide .sub{font-size:17px;color:var(--muted);margin:0 auto 8px;max-width:520px}
  .jar-guide .free-line{color:var(--ok);font-weight:700;font-size:15px}
  .jar-guide .dl-row{text-align:center;margin:28px 0 8px}
  .jar-guide .dl-btn{
    display:inline-block;background:var(--amber);color:#fff;text-decoration:none;
    padding:15px 34px;border-radius:12px;font-size:17px;font-weight:700;
    box-shadow:0 4px 14px rgba(200,121,26,.3);transition:all .14s ease;
  }
  .jar-guide .dl-btn:hover{background:var(--amber-dk);transform:translateY(-2px)}
  .jar-guide .dl-sub{font-size:13px;color:var(--muted);margin-top:10px}

  .jar-guide .review-callout{
    background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--amber);
    border-radius:8px;padding:14px 18px;margin:28px 0;font-size:14px;color:var(--ink);
  }
  .jar-guide .review-callout strong{color:var(--amber-dk)}

  .jar-guide .steps{margin:40px 0 0;padding:0;list-style:none;counter-reset:step}
  .jar-guide .steps > li{
    position:relative;padding:0 0 28px 56px;counter-increment:step;
  }
  .jar-guide .steps > li::before{
    content:counter(step);position:absolute;left:0;top:0;
    width:38px;height:38px;border-radius:50%;background:var(--amber);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
  }
  /* connector line between steps */
  .jar-guide .steps > li:not(:last-child)::after{
    content:"";position:absolute;left:18px;top:38px;bottom:6px;width:2px;background:var(--line);
  }
  .jar-guide .steps h3{margin:6px 0 6px;font-size:17px}
  .jar-guide .steps p{margin:0 0 8px;font-size:15px;color:#4a423c}
  .jar-guide .steps code{
    background:var(--cream);border:1px solid var(--line);border-radius:5px;
    padding:2px 7px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--amber-dk);
  }
  .jar-guide .warn{
    background:#fdf4e8;border:1px solid #f0dcc0;border-radius:8px;
    padding:10px 14px;font-size:13.5px;color:#7a5a2a;margin:8px 0;
  }
  .jar-guide .warn strong{color:var(--amber-dk)}

  .jar-guide .finish{
    margin-top:16px;padding:22px;background:var(--cream);border-radius:14px;text-align:center;
  }
  .jar-guide .finish h3{margin:0 0 6px;color:var(--amber-dk)}
  .jar-guide .finish p{margin:0;font-size:14px;color:var(--muted)}

  .jar-guide .faq{margin-top:48px}
  .jar-guide .faq h2{font-size:20px;margin:0 0 16px}
  .jar-guide .faq details{
    border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px;background:#fff;
  }
  .jar-guide .faq summary{font-weight:700;cursor:pointer;font-size:15px;list-style:none}
  .jar-guide .faq summary::-webkit-details-marker{display:none}
  .jar-guide .faq summary::before{content:"+ ";color:var(--amber);font-weight:700}
  .jar-guide .faq details[open] summary::before{content:"– "}
  .jar-guide .faq p{margin:10px 0 0;font-size:14px;color:#4a423c}

  .jar-guide[data-state="live"]  .msg-review{display:none}
  .jar-guide[data-state="review"] .msg-live{display:none}
  .jar-guide[data-state="live"]  .guide-zip-only{display:none}