/* Offer bands - shared component styles. Ported verbatim from the
   approved preview (ticker + candle/sparkline + edge-mask + reduced-motion).
   Linked ONCE per page; the bands themselves are injected by offer-bands.js
   from the partner registry. Do not restyle here; a later design pass is
   planned (real ticker data / distinctive treatment). */

.band,.band *{box-sizing:border-box;margin:0;padding:0;}
.band{
  --poly:#2d4cf5;--poly2:#5b74ff;--cdc:#1a88ff;--cdc2:#4aa4ff;
  --green:#12d97e;--green2:#7bffbe;--ink:#fff;--mute:#aab4d4;--line:rgba(255,255,255,.12);
  position:relative;display:grid;grid-template-columns:minmax(280px,auto) 1fr auto;align-items:center;gap:26px;
  width:100%;padding:24px 30px;border-radius:18px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-height:150px;
}
.band:hover{transform:translateY(-3px);}
.band:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.band__ad{position:absolute;top:12px;right:16px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);z-index:4;}

.band--poly{background:#080c20;}
.band--poly::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 130% at 6% 50%, rgba(18,217,126,.30), transparent 60%),
  radial-gradient(85% 160% at 42% 50%, rgba(45,76,245,.48), transparent 62%),
  radial-gradient(45% 130% at 99% 50%, rgba(91,116,255,.42), transparent 60%),#080c20;}
.band--poly:hover{border-color:rgba(91,116,255,.55);box-shadow:0 20px 46px -20px rgba(45,76,245,.75);}
.band--cdc{background:#05060c;}
.band--cdc::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 150% at 99% 50%, rgba(26,136,255,.5), transparent 60%),
  radial-gradient(45% 130% at 10% 50%, rgba(74,164,255,.16), transparent 60%),#05060c;}
.band--cdc:hover{border-color:rgba(74,164,255,.5);box-shadow:0 20px 46px -20px rgba(26,136,255,.75);}

.band__logo{height:28px;margin-bottom:2px;} .band__logo svg,.band__logo img{height:100%;width:auto;display:block;}
.band__left{display:flex;flex-direction:column;gap:8px;z-index:2;}
.band__eyebrow{display:inline-flex;align-items:center;gap:7px;width:max-content;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#dfe6ff;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);}
.band__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
.band--cdc .band__eyebrow::before{background:var(--cdc);box-shadow:0 0 10px var(--cdc);}
.band__headline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.band__offer{font-family:'Syne',sans-serif;font-weight:800;font-size:58px;line-height:.9;letter-spacing:-.03em;
  background:linear-gradient(178deg,var(--green2),var(--green) 60%,#06b169);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 14px rgba(18,217,126,.5));}
.band__h{font-family:'Syne',sans-serif;font-weight:800;font-size:28px;line-height:1.02;letter-spacing:-.02em;}
.band__sub{font-size:14px;color:var(--mute);line-height:1.35;}
.band__sub b{color:#fff;}

/* ---- live odds ticker (middle, Polymarket) ---- */
.ticker{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;z-index:1;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.ticker__row{display:flex;gap:9px;width:max-content;will-change:transform;}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;white-space:nowrap;font-size:12px;color:#cdd6ee;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none;} .chip .yes{background:#2ec27e;box-shadow:0 0 8px rgba(46,194,126,.6);} .chip .no{background:#ff5a6e;box-shadow:0 0 8px rgba(255,90,110,.5);}
.chip .px{color:#fff;font-weight:800;}

/* ---- candle/sparkline motif (middle, crypto.com) ---- */
.chart{position:relative;align-self:stretch;overflow:hidden;z-index:1;display:flex;align-items:center;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
.cchart{width:200%;height:88px;opacity:.7;will-change:transform;}

.band__cta{grid-column:3;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;z-index:2;
  font-family:'Syne',sans-serif;font-weight:800;font-size:17px;color:#fff;border-radius:13px;padding:17px 30px;box-shadow:0 12px 28px -8px rgba(0,0,0,.6);position:relative;overflow:hidden;}
.band--poly .band__cta{background:linear-gradient(180deg,var(--poly2),var(--poly));}
.band--cdc .band__cta{background:linear-gradient(180deg,var(--cdc2),var(--cdc));}
.band__cta svg{width:18px;height:18px;transition:transform .16s ease;}
.band:hover .band__cta svg{transform:translateX(4px);}
.band__cta::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);}
.band__fine{position:absolute;left:30px;bottom:7px;font-size:10px;color:rgba(255,255,255,.4);z-index:2;}

@media (prefers-reduced-motion: no-preference){
  .ticker__row{animation:scrollx 26s linear infinite;}
  .ticker__row--rev{animation:scrollx 34s linear infinite reverse;}
  .cchart{animation:drift 30s linear infinite;}
  .band__cta::after{animation:sheen 3.8s ease-in-out infinite;}
  @keyframes scrollx{to{transform:translateX(-50%);}}
  @keyframes drift{to{transform:translateX(-50%);}}
  @keyframes sheen{0%,58%{left:-120%;}80%,100%{left:135%;}}
}

/* Narrow viewports: stack in DOM reading order (logo/offer, then ticker/chart,
   then CTA last). No grid-row/order overrides, so the CTA can never sit above
   the offer it refers to. */
@media(max-width:900px){
  .band{grid-template-columns:1fr;gap:16px;}
  .ticker,.chart{grid-column:1;height:56px;}
  .band__cta{grid-column:1;width:100%;justify-self:stretch;}
}
@media(max-width:600px){
  .band{text-align:left;padding:22px;}
  .band__offer{font-size:46px;} .band__h{font-size:22px;}
  .band__fine{position:static;margin-top:4px;}
}

/* Injection slot: full content-column width, vertical rhythm between rows. */
.offer-band{display:block;width:100%;margin:26px 0;}