/* ── Extension promo on the label-crop pages ─────────────────────────────
   A compact strip ABOVE the tool card on all five crop pages: the seller
   who came to crop one file by hand is exactly the seller the Toolkit is
   for, so they are told — in ~150px, not a page — and the tool is right
   below, untouched. ext-promo.js removes the strip when the Toolkit is
   already installed. Tokens are styles.css's own; the marketing pages
   never set data-theme, so this is light-only like the rest of the site. */
.ext-promo{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:26px 26px 22px; margin:0 0 16px; }  /* 26px sides = the crop panel's own inset (.tab-panel), so the strip's text and the panel's heading share one left edge; 16px below; the 16px above comes from the section's own top padding, so the crop window keeps that gap when the strip is closed or never rendered */
.ext-promo::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(26,111,255,.08), rgba(8,145,178,.05) 55%, rgba(255,153,0,.07)); pointer-events:none; }
.ext-promo > *{ position:relative; }
.ext-promo[hidden]{ display:none; }
.ext-promo-main{ display:flex; align-items:center; gap:22px; }
.ext-promo-copy{ flex:1; min-width:0; }
.ext-promo-title{ font-family:'Space Grotesk','Inter',sans-serif; font-size:clamp(17px,1.7vw,21px); font-weight:700; line-height:1.2; letter-spacing:-.015em; margin:0 0 4px; text-wrap:balance; }
.ext-promo-title span{ color:var(--accent); }
.ext-promo-sub{ font-size:13.5px; color:var(--text-secondary); line-height:1.5; margin:0; }
.ext-promo-cta{ flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; margin-right:22px; }  /* clear of the × */
/* The button breathes: a soft ring swells out and fades every ~3s — slow
   enough to be a pulse, not a flash. */
.ext-promo-btn{ font-size:14.5px; padding:12px 22px; box-shadow:var(--shadow-md); animation:extPromoBreathe 3.2s ease-in-out infinite; }
@keyframes extPromoBreathe{
  0%,100%{ box-shadow:var(--shadow-md), 0 0 0 0 rgba(26,111,255,.42); }
  55%{ box-shadow:var(--shadow-md), 0 0 0 11px rgba(26,111,255,0); }
}
/* Small × in the top-right: hides the strip for THIS page view only (no
   storage — it is back on the next load), see ext-promo.js. */
.ext-promo-close{ position:absolute; top:10px; right:10px; z-index:1; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font:400 18px/1 'Inter',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 2px; box-shadow:var(--shadow-sm); transition:color .15s, background .15s; }
.ext-promo-close:hover{ color:var(--text-primary); background:var(--body-bg); }
.ext-promo-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* "New" tag hanging from the strip's top-left edge, its star pulsing. */
.ext-promo-new{ position:absolute; top:0; left:26px; z-index:1; display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:0 0 8px 8px; background:var(--mred); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; line-height:1.2; box-shadow:0 2px 6px rgba(226,68,92,.35); }
.ext-promo-new-star{ font-size:12px; line-height:1; animation:extPromoStar 1.5s ease-in-out infinite; }
@keyframes extPromoStar{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(1.3); } }
@media (prefers-reduced-motion:reduce){ .ext-promo-btn,.ext-promo-new-star{ animation:none; } }
.ext-promo-note{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.ext-promo-feats{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ext-promo-feats li{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-primary); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:5px 11px 5px 8px; box-shadow:var(--shadow-sm); white-space:nowrap; }
.ext-promo-feats i,.ext-promo-feats svg{ width:14px; height:14px; flex:none; color:var(--accent); }
@media (max-width:820px){
  .ext-promo-main{ flex-wrap:wrap; }
  .ext-promo-copy{ order:1; flex-basis:100%; }
  .ext-promo-cta{ order:2; flex-basis:100%; align-items:stretch; margin-right:0; }
  .ext-promo-btn{ justify-content:center; }
  .ext-promo-note{ text-align:center; white-space:normal; }
}
@media (max-width:640px){ .ext-promo{ padding:24px 20px 18px; } .ext-promo-new{ left:20px; } .ext-promo-feats li{ font-size:12px; } }