/* Nestomatic promo banner — copied from the BuildPlanners planners (keep in sync) */
/* promo banner — styled as a slice of nestomatic.com (its own dark theme in both app themes) */
.promo{position:relative;max-width:1500px;margin:16px auto 0;padding:0 20px;
  /* nestomatic.com design tokens */
  --n-bg:#1a1c20; --n-raised:#202226; --n-raised-2:#25282d; --n-text:#ecedef; --n-soft:#d7d9dd; --n-muted:#a1a6ae; --n-subtle:#7c828b;
  --n-line:#2c2f35; --n-line-strong:#3a3e46; --n-accent:#8ab4ff; --n-accent-dim:rgba(106,150,255,.14); --n-accent-line:rgba(106,150,255,.38);
  --n-fill:linear-gradient(180deg,#2a4aa3,#1e3a8a); --n-fill-hover:linear-gradient(180deg,#3b63c4,#27479e); --n-fill-border:rgba(106,150,255,.75); --n-glow:rgba(59,99,196,.7);
  --n-grid:rgba(255,255,255,.04)}
.promo[hidden]{display:none}
.promo-link{display:flex;align-items:center;gap:18px;padding:14px 56px 14px 14px;border-radius:14px;text-decoration:none;color:var(--n-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(91,134,240,.20),transparent 55%),
    linear-gradient(var(--n-grid) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,var(--n-grid) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),var(--n-bg);
  border:1px solid var(--n-line-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 22px -10px rgba(0,0,0,.55)}
.promo-link[href]:hover{border-color:var(--n-accent-line)}
.promo-link:not([href]){cursor:default}

/* copy: brand row, headline, tagline */
.promo-copy{display:grid;gap:3px;flex:1;min-width:0}
.promo-brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.promo-logo{width:22px;height:22px;display:block}
.promo-brand b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--n-text)}
.promo-beta{font-size:9.6px;font-weight:600;letter-spacing:.1em;color:var(--n-accent);background:var(--n-accent-dim);border:1px solid var(--n-accent-line);border-radius:4px;padding:1px 5px}
.promo-tag{font-size:9.6px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--n-subtle);border:1px solid var(--n-line-strong);border-radius:4px;padding:1px 5px}
.promo-head{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--n-text)}
.promo-head em{font-style:normal;background:linear-gradient(90deg,#5b86f0 10%,#a9c6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-sub{font-size:13px;color:var(--n-muted)}

/* nestomatic's primary button */
.promo-cta{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--n-fill);color:#fff;font-weight:700;font-size:14px;padding:10px 16px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--n-fill-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px -10px var(--n-glow);transition:transform .2s}
.promo-cta i{font-style:normal;transition:transform .2s}
.promo-link[href]:hover .promo-cta{background:var(--n-fill-hover)}
.promo-link[href]:hover .promo-cta i{transform:translateX(3px)}
.promo-close{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--n-subtle);font-size:18px;cursor:pointer;line-height:1}
.promo-close:hover{background:var(--n-raised-2);color:var(--n-text)}

/* animated nesting sheet (8s loop): parts fly in and nest → laser pass → "nested" badge → parts clear */
.promo-art{flex:none;width:112px;height:68px;display:block;border-radius:10px;background:var(--n-raised);border:1px solid var(--n-line);padding:4px;box-sizing:content-box}
.promo-art svg{display:block;overflow:visible;width:112px;height:68px}
.promo-art .sheet{fill:var(--n-raised-2);stroke:var(--n-line-strong);stroke-width:.8}
.promo-art .part{stroke:#0b1a3d;stroke-width:.6;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:nestIn 8s cubic-bezier(.2,.8,.25,1) infinite;animation-delay:calc(var(--i) * .2s)}
/* blues from nestomatic's palette, a few shades so the nest reads */
.promo-art .part:nth-child(3n+1){fill:#3d7bff}
.promo-art .part:nth-child(3n+2){fill:#8ab4ff}
.promo-art .part:nth-child(3n){fill:#5b86f0}
.promo-art .laser{fill:#dbe7ff;opacity:0;filter:drop-shadow(0 0 2px #8ab4ff) drop-shadow(0 0 6px #3d7bff);animation:laserPass 8s linear infinite}
.promo-art .badge rect{fill:var(--n-fill-border)}
.promo-art .badge text{fill:#fff;font:700 7px Inter,system-ui,sans-serif}
.promo-art .badge{transform-box:fill-box;transform-origin:center;opacity:0;animation:badgePop 8s ease-out infinite}
@keyframes nestIn{
  0%{opacity:0;transform:translate(70px,-14px) rotate(35deg) scale(.7)}
  11%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
  80%{opacity:1;transform:none}
  90%{opacity:0;transform:translate(0,6px) scale(.96)}
  100%{opacity:0;transform:translate(70px,-14px) rotate(35deg) scale(.7)}
}
@keyframes laserPass{
  0%,52%{opacity:0;transform:translateX(0)}
  54%{opacity:1;transform:translateX(0)}
  70%{opacity:1;transform:translateX(93px)}
  72%,100%{opacity:0;transform:translateX(93px)}
}
@keyframes badgePop{
  0%,70%{opacity:0;transform:scale(.5)}
  74%{opacity:1;transform:scale(1.12)}
  77%{transform:scale(1)}
  88%{opacity:1;transform:scale(1)}
  93%,100%{opacity:0;transform:scale(.9)}
}
/* banner entrance + slow shimmer */
.promo:not([hidden]){animation:promoIn .55s cubic-bezier(.2,.8,.25,1) both}
@keyframes promoIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.promo-link::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(138,180,255,.10) 50%,transparent 65%);
  transform:translateX(-120%);animation:promoShine 7s ease-in-out 1.2s infinite}
@keyframes promoShine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion: reduce){
  .promo:not([hidden]),.promo-link::after,.promo-art .part,.promo-art .laser,.promo-art .badge{animation:none}
  .promo-art .part{opacity:1;transform:none}
  .promo-art .badge{opacity:1}
  .promo-link::after{display:none}
}
@media (max-width:820px){ .promo-sub{display:none} }
@media (max-width:640px){
  .promo-link{flex-wrap:wrap;padding-right:44px;gap:12px}
  .promo-cta{width:100%;justify-content:center}
  .promo-art{display:none}
  .promo-tag{margin-left:0}
  .promo-close{top:10px;transform:none;right:22px}
}
@media (max-width:900px){ .promo{padding:0 16px;margin-top:12px} }