/* Comic Videos AI · sticky top offer bar
   desktop: [label / code line] [big timer with hundredths] [discount button]
   mobile : one short row, kept under 10% of the screen height (a webinar bar will sit at the bottom) */
.sbar.sbar--top{position:sticky;top:0;z-index:95;width:100%;background:linear-gradient(180deg,#151311,#0c0b0a);border-bottom:1px solid color-mix(in srgb,var(--pop) 40%,transparent);box-shadow:0 14px 34px -18px rgba(0,0,0,.85);font-family:var(--body);animation:ob-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes ob-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.ob-in{max-width:1220px;margin:0 auto;padding:10px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:30px}
.ob-txt{display:grid;gap:7px;min-width:0}
.ob-txt p{margin:0}
.sbar--top .sm{display:none}
.ob-lb{display:flex;align-items:center;gap:8px;font:800 19px/1.2 var(--display);color:#fff;white-space:nowrap}
.ob-lb svg{width:19px;height:19px;flex:none;color:var(--pop);fill:currentColor}
.ob-code{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 15.5px/1.3 var(--display);color:rgba(255,255,255,.88)}
.ob-amt{color:#fff;font-weight:800}
.ob-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:7px;border:1.5px dashed var(--pop);background:color-mix(in srgb,var(--pop) 13%,transparent);color:var(--pop);font:800 15.5px/1.2 var(--display);letter-spacing:.05em;cursor:pointer;transition:background .25s ease,transform .25s ease}
.ob-chip:hover{background:color-mix(in srgb,var(--pop) 24%,transparent);transform:translateY(-1px)}
.ob-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ob-chip svg{width:13px;height:13px}
.ob-chip.is-copied{background:var(--go);border-color:var(--go);color:#fff}

/* big timer */
.sbar--top .sbar-cd{display:flex;align-items:center;gap:6px}
.sbar--top .sbar-cd .u{display:grid;justify-items:center;gap:3px;min-width:58px;padding:7px 8px 5px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.sbar--top .sbar-cd b{font:800 30px/1 var(--display);letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.sbar--top .sbar-cd .u-ms{min-width:52px;background:color-mix(in srgb,var(--pop) 14%,transparent);border-color:color-mix(in srgb,var(--pop) 40%,transparent)}
.sbar--top .sbar-cd .u-ms b{color:var(--pop)}
.sbar--top .sbar-cd small{margin:0;font:700 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sbar--top .sbar-cd i{font-style:normal;font:800 24px/1 var(--display);color:var(--pop);margin-top:-14px}

/* button */
.sbar--top .ob-btn{position:relative;overflow:hidden;flex:none;padding:20px 30px;font-size:18px;font-weight:800;white-space:nowrap;border-radius:16px;transition:transform .25s ease,box-shadow .25s ease}
.sbar--top .ob-btn:hover{transform:translateY(-2px)}
.sbar--top .ob-btn .s{display:none}
.sbar--top .ob-btn svg{width:19px;height:19px}
.sbar--top .ob-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:ob-shine 4.5s ease-in-out 1.2s infinite}
@keyframes ob-shine{0%{left:-60%}22%,100%{left:130%}}

@media (max-width:1060px){
  .ob-in{column-gap:18px}
  .ob-lb{font-size:16.5px}
  .sbar--top .sbar-cd .u{min-width:48px}
  .sbar--top .sbar-cd b{font-size:24px}
  .sbar--top .ob-btn{padding:16px 20px;font-size:16px}
}
/* phones: one short row, about 58px tall */
@media (max-width:760px){
  .sbar--top .lg{display:none}
  .sbar--top .sm{display:inline}
  .ob-in{grid-template-columns:auto 1fr auto;column-gap:10px;padding:7px 10px}
  .ob-txt{gap:4px}
  .ob-lb{font-size:12.5px;gap:4px}
  .ob-lb svg{width:12px;height:12px}
  .ob-code{font-size:11.5px;gap:4px;flex-wrap:nowrap;white-space:nowrap}
  .ob-chip{font-size:11.5px;padding:2px 6px;border-width:1.2px}
  .ob-chip svg{display:none}
  .sbar--top .sbar-cd{justify-self:center;gap:2px}
  .sbar--top .sbar-cd .u{min-width:0;padding:4px 4px 3px;border-radius:7px;gap:0}
  .sbar--top .sbar-cd small{display:none}
  .sbar--top .sbar-cd b{font-size:16px}
  .sbar--top .sbar-cd i{font-size:13px;margin-top:0}
  .sbar--top .sbar-cd .u:first-child,.sbar--top .sbar-cd .u:first-child+i{display:none}
  .sbar--top a.ob-btn.btn{width:auto;max-width:none;display:inline-flex;padding:11px 12px;font-size:13px;border-radius:11px;gap:5px}
  .sbar--top .ob-btn .l{display:none}
  .sbar--top .ob-btn .s{display:inline}
  .sbar--top .ob-btn svg{width:13px;height:13px}
}
@media (max-width:400px){
  .ob-in{column-gap:7px;padding:7px 8px}
  .ob-code{font-size:11px}
  .ob-chip{font-size:11px;padding:2px 5px}
  .sbar--top .sbar-cd b{font-size:14.5px}
  .sbar--top .sbar-cd .u{padding:4px 3px 3px}
  .sbar--top .sbar-cd i{font-size:12px}
  .sbar--top a.ob-btn.btn{padding:10px 10px;font-size:12.5px}
  .sbar--top .ob-btn svg{display:none}
}
@media (max-width:340px){
  .sbar--top .sbar-cd .u-ms,.sbar--top .sbar-cd .ms-sep{display:none}
}
@media (prefers-reduced-motion:reduce){.sbar.sbar--top{animation:none}.sbar--top .ob-btn::after{animation:none;display:none}}