/* Release banner (Chrome extension + iOS app) — self-contained module.
   Every selector is prefixed with .apb- so nothing here can collide with
   css-style.css. Loaded only from views/partials/apps-banner.ejs. */

/* Same box as .container in css-style.css (960px; 16/12/8px side margins on mobile). */
.apb{position:relative;z-index:10;max-width:960px;margin:24px auto 0;box-sizing:border-box}
.apb-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 26px;border-radius:16px;overflow:hidden;
  color:#fff;
  background:
    radial-gradient(ellipse 46% 170% at 12% 50%, rgba(65,105,225,.62) 0%, rgba(65,105,225,.24) 42%, transparent 76%),
    radial-gradient(ellipse 42% 170% at 90% 50%, rgba(16,185,129,.30) 0%, rgba(16,185,129,.12) 40%, transparent 74%),
    #0B0F14;
  box-shadow:0 10px 28px rgba(11,15,20,.22),0 2px 6px rgba(11,15,20,.12);
  -webkit-font-smoothing:antialiased}

.apb-text{min-width:0}
.apb-title{margin:0;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#fff}
.apb-title em{font-style:normal;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.apb-sub{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.72)}

.apb-cta{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.apb-btns{display:flex;align-items:center;gap:10px}
.apb-btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 12px;border-radius:10px;
  background:#fff;color:#0B0F14!important;font-size:15px;font-weight:600;white-space:nowrap;
  text-decoration:none!important;box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .15s,box-shadow .15s}
.apb-btn svg{flex:none;display:block}
.apb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.apb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.apb-note{font-size:12px;line-height:1.2;color:rgba(255,255,255,.7);white-space:nowrap}

@media only screen and (max-width:1000px){
  .apb{margin:20px 20px 0}
}
@media only screen and (max-width:860px){
  .apb-inner{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 20px}
  .apb-cta{align-items:flex-start;width:100%}
  .apb-btns{width:100%}
  .apb-btn{flex:1 1 0;justify-content:center;box-sizing:border-box;padding:0 10px}
  .apb-note{white-space:normal}
}
@media only screen and (max-width:640px){
  .apb{margin:14px 16px 0}
  .apb-title{font-size:17px}
  .apb-sub{font-size:13px}
}
@media only screen and (max-width:420px){
  .apb{margin:14px 12px 0}
  .apb-inner{padding:14px 14px}
  .apb-btns{flex-direction:column;gap:8px}
  .apb-btn{width:100%;height:44px}
}
@media only screen and (max-width:360px){
  .apb{margin:12px 8px 0}
  .apb-title{font-size:16px}
}