/* StreamPaid brand layer. Loaded after refine.css on every page: the wordmark, the pink accent's
   special cases, and the homepage overlay showcase. Brand tokens live on :root in styles.css
   (--brand, --brand-hi, --brand-rgb). */

/* ── Wordmark: lowercase "stream" in white, "paid" in mint ─────────────────────────── */
.logo > span i, .brand-stream { color:#f5f5f3 !important; }
.logo > span b, .brand-pay { color:var(--brand) !important; }
.sidebar .logo { gap:11px; align-items:center; }
.sidebar .logo svg { border-radius:12px; box-shadow:0 6px 22px rgba(var(--brand-rgb),.28); }
.sidebar .logo > span { font-size:23px; }
.logo:hover svg { transform:rotate(-5deg) scale(1.05); }

/* ── Sidebar: the Overlay item carries a small pink alert that pops on hover ── */
.nav-overlay .overlay-pop { fill:var(--brand); transform-box:fill-box; transform-origin:center; }
.sidenav a:hover .nav-overlay .overlay-pop, .nav-overlay.icon-arrive .overlay-pop { animation:navOverlayPop .7s var(--ease-spring); }
@keyframes navOverlayPop { 0% { transform:scale(.2); opacity:0; } 60% { transform:scale(1.15); opacity:1; } 100% { transform:none; } }
.sidenav a.active:before { background:var(--brand); box-shadow:0 0 12px rgba(var(--brand-rgb),.55); }

/* ── Hero news pill in brand pink (was Twitch purple) ──────────────────── */
.homehero .hero-news { border-color:rgba(var(--brand-rgb),.38); background:linear-gradient(90deg, rgba(var(--brand-rgb),.14), rgba(var(--brand-rgb),.03)); }
.homehero .hero-news:hover { border-color:rgba(var(--brand-rgb),.7); }
.homehero .hero-news .hn-tag { background:var(--brand); }
.homehero .hero-news .hn-logo svg { width:17px; height:17px; }

/* ── Claim banner: two actions ─────────────────────────────────────────── */
.claim-banner .cb-actions { display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1; }
.claim-banner .cb-ghost { display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#f2f2ef; font-weight:700; font-size:14px; transition:background-color .18s, border-color .18s; }
.claim-banner .cb-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }

/* ── Homepage overlay showcase ─────────────────────────────────────────── */
.ov-show { position:relative; display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:48px; align-items:center; margin:0 0 28px; padding:44px; border-radius:30px; border:1px solid rgba(var(--brand-rgb),.2); overflow:hidden;
  background:radial-gradient(90% 120% at 100% 0%, rgba(var(--brand-rgb),.16), transparent 55%), radial-gradient(60% 80% at 0% 100%, rgba(145,70,255,.08), transparent 60%), linear-gradient(180deg, #161616, #101010); scroll-margin-top:90px; }
.ov-show:before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:18px 18px; mask-image:radial-gradient(70% 70% at 30% 40%, #000, transparent); }
.ov-copy { position:relative; min-width:0; }
.ov-copy h2 { margin:12px 0 14px; font-size:clamp(38px, 4vw, 56px); line-height:.98; letter-spacing:-.05em; font-weight:800; }
.ov-copy h2 span { color:var(--brand); }
.ov-lede { max-width:48ch; margin:0; color:#a7a7a4; font-size:16px; line-height:1.65; }

.ov-loop { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:24px 0 20px; padding:0; list-style:none; counter-reset:ov; }
.ov-loop li { position:relative; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); counter-increment:ov; }
.ov-loop li:before { content:counter(ov); display:grid; place-items:center; width:20px; height:20px; margin-bottom:8px; border-radius:50%; background:rgba(var(--brand-rgb),.16); color:var(--brand-hi); font:700 11px/1 Inter, sans-serif; }
.ov-loop li:last-child { border-color:rgba(var(--brand-rgb),.35); background:rgba(var(--brand-rgb),.08); }
.ov-loop li:last-child:before { background:var(--brand); color:#fff; }
.ov-loop li + li:after { content:""; position:absolute; left:-8px; top:50%; width:8px; height:1px; background:rgba(255,255,255,.18); }
.ov-loop b { display:block; font-size:14px; letter-spacing:-.01em; }
.ov-loop span { display:block; margin-top:2px; color:#8f8f8c; font-size:12.5px; line-height:1.35; }

.ov-points { display:grid; gap:9px; margin:0 0 26px; padding:0; list-style:none; }
.ov-points li { position:relative; padding-left:28px; color:#9a9a97; font-size:14px; line-height:1.5; }
.ov-points li:before { content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:rgba(62,224,143,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%234fe39a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.ov-points b { color:#ededeb; font-weight:700; }

.ov-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ov-primary, .ov-ghost { display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 22px; border-radius:999px; font:750 14.5px/1 Inter, sans-serif; letter-spacing:-.01em; transition:transform .14s var(--ease-out), background-color .18s, box-shadow .2s, border-color .18s; }
.ov-primary { background:var(--brand); color:#fff; box-shadow:0 10px 30px rgba(var(--brand-rgb),.3), inset 0 1px rgba(255,255,255,.2); }
.ov-primary:hover { background:#9671ff; box-shadow:0 12px 36px rgba(var(--brand-rgb),.42), inset 0 1px rgba(255,255,255,.22); }
.ov-primary svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease-out); }
.ov-primary:hover svg { transform:translateX(2px); }
.ov-ghost { border:1px solid var(--hair-2); background:rgba(255,255,255,.03); color:#ededeb; }
.ov-ghost:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.ov-primary:active, .ov-ghost:active { transform:scale(.97); }

.ov-stage { position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; }
.ov-screen { position:relative; aspect-ratio:16 / 10; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#121216 url(media/ig-stream-poster.jpg) center/cover no-repeat;
  box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--brand-rgb),.12), 0 0 80px rgba(var(--brand-rgb),.12); }
.ov-vid { position:absolute; inset:0; z-index:0; overflow:hidden; }
.ov-vid video { position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; filter:blur(4px) saturate(1.15); }
.ov-vid::after { content:""; position:absolute; inset:0; background:radial-gradient(70% 80% at 40% 50%, rgba(8,8,12,.2), rgba(8,8,12,.7)), linear-gradient(160deg, rgba(145,70,255,.14), transparent 45%, rgba(var(--brand-rgb),.18)); }
.ov-top { position:absolute; left:16px; right:16px; top:14px; display:flex; align-items:center; gap:8px; z-index:3; }
.ov-live { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; background:#e91916; color:#fff; font:800 11px/1 Inter, sans-serif; letter-spacing:.08em; }
.ov-live i { width:6px; height:6px; border-radius:50%; background:#fff; animation:igBlink 1.6s ease-in-out infinite; }
.ov-viewers { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; background:rgba(0,0,0,.45); color:#e9e9e7; font:700 11.5px/1 Inter, sans-serif; }
.ov-viewers svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; }
.ov-example { margin-left:auto; color:rgba(255,255,255,.55); font:500 10.5px/1 "DM Mono", monospace; letter-spacing:.14em; text-transform:uppercase; }

/* The alert: what the Streamlabs Alert Box shows when a payout confirms. */
.ov-alert { position:absolute; left:34.5%; top:47%; width:57%; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; text-align:center; z-index:2; opacity:0; pointer-events:none; }
.ov-alert-mark { display:block; width:78px; height:78px; border-radius:20px; box-shadow:0 18px 50px rgba(var(--brand-rgb),.45), 0 0 0 6px rgba(var(--brand-rgb),.12); }
.ov-alert-mark svg { display:block; width:100%; height:100%; border-radius:20px; }
.ov-alert-msg { margin-top:14px; font:800 clamp(18px, 1.9vw, 26px)/1.16 "Plus Jakarta Sans", Inter, sans-serif; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.ov-alert-msg em { font-style:normal; color:var(--brand-hi); }
.ov-alert-sub { margin-top:6px; color:#dededb; font:600 13px/1.3 Inter, sans-serif; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.ov-alert.show { opacity:1; }
.ov-alert.show .ov-alert-mark { animation:ovPop .75s var(--ease-spring) both; }
.ov-alert.show .ov-alert-msg { animation:ovRise .55s .12s var(--ease-out) both; }
.ov-alert.show .ov-alert-sub { animation:ovRise .55s .22s var(--ease-out) both; }
.ov-alert.hide { opacity:0; transform:translate(-50%, -62%); transition:opacity .5s var(--ease-out), transform .6s var(--ease-out); }
@keyframes ovPop { from { opacity:0; transform:scale(.35) rotate(-12deg); } to { opacity:1; transform:none; } }
@keyframes ovRise { from { opacity:0; transform:translateY(14px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }

/* Mock chat down the right side, so the payout reads as a moment the audience sees. */
.ov-chat { position:absolute; right:0; top:0; bottom:0; width:31%; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:52px 12px 14px; background:linear-gradient(90deg, transparent, rgba(8,8,10,.62) 22%); mask-image:linear-gradient(180deg, transparent 8%, #000 34%); }
.ov-chat p { margin:0; color:#e6e6e3; font:500 12px/1.35 Inter, sans-serif; text-shadow:0 1px 6px rgba(0,0,0,.6); animation:ovChatIn .35s var(--ease-out) both; overflow-wrap:anywhere; }
.ov-chat b { font-weight:750; margin-right:2px; }
@keyframes ovChatIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.ov-meta { display:grid; grid-template-columns:repeat(3, 1fr); margin:0; border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:rgba(0,0,0,.18); }
.ov-meta div { padding:12px 16px; }
.ov-meta div + div { border-left:1px solid var(--hair); }
.ov-meta dt { color:#7d7d7b; font:500 10.5px/1 "DM Mono", monospace; letter-spacing:.12em; text-transform:uppercase; }
.ov-meta dd { margin:6px 0 0; font-size:14px; font-weight:700; letter-spacing:-.01em; }

/* ── Overlay page: why streamers turn it on ────────────────────────────── */
.ov-why { margin:14px 0; padding:34px; border-radius:24px; border:1px solid var(--hair); background:radial-gradient(80% 120% at 0% 0%, rgba(var(--brand-rgb),.09), transparent 55%), var(--card); }
.ov-why-head h2 { margin:10px 0 24px; font-size:clamp(28px, 2.8vw, 38px); line-height:1.04; letter-spacing:-.045em; font-weight:800; }
.ov-why-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.ov-why-grid article { padding:20px; border-radius:18px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); }
.ov-why-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border-radius:12px; background:rgba(var(--brand-rgb),.12); }
.ov-why-icon svg { width:21px; height:21px; fill:none; stroke:var(--brand-hi); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ov-why-grid b { display:block; font-size:16px; letter-spacing:-.015em; }
.ov-why-grid p { margin:6px 0 0; color:#8f8f8c; font-size:14px; line-height:1.55; }

@media (max-width:1100px) {
  .ov-why-grid { grid-template-columns:1fr; }
  .ov-show { grid-template-columns:1fr; gap:30px; padding:32px; }
}
@media (max-width:640px) {
  .ov-why { padding:22px 18px; }
  .ov-show { padding:22px 18px; border-radius:22px; margin-left:0; margin-right:0; }
  .ov-loop { grid-template-columns:1fr; }
  .ov-loop li + li:after { display:none; }
  .ov-chat { display:none; }
  .ov-alert { left:50%; width:88%; }
  .ov-alert-mark { width:58px; height:58px; border-radius:15px; }
  .ov-alert-msg { font-size:17px; }
  .ov-alert-sub { font-size:11.5px; }
  .ov-meta div { padding:10px 12px; }
  .ov-meta dd { font-size:12.5px; }
  .ov-actions a { flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .ov-alert.show .ov-alert-mark, .ov-alert.show .ov-alert-msg, .ov-alert.show .ov-alert-sub, .ov-chat p, .ov-live i { animation:none !important; }
  .sidenav a:hover .nav-overlay .overlay-pop { animation:none; }
}

/* ── Ink on mint ───────────────────────────────────────────────────────────
   The brand color is light, so anything sitting on it uses dark ink instead of white. */
:root { --brand-ink:#ffffff; }
.redbtn, .hero-composer button, .hero-composer button:hover, .launch-resume button, .ov-primary, .ov-primary:hover,
.launch-reminder-action, .launch-reminder-action:hover, .homehero .hero-news .hn-tag, .ov-loop li:last-child:before { color:var(--brand-ink) !important; }
.cabar, .cabar-ca, .cabar-buy { color:var(--brand-ink) !important; }
.cabar-live i { background:var(--brand-ink) !important; }
.cabar-ca { background:rgba(0,0,0,.12) !important; }
.cabar-copy { background:var(--brand-ink) !important; color:var(--brand) !important; }

/* ── Live on Twitch (Explore) ───────────────────────────────────────────── */
.tw-dot { display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:50%; background:#eb0400; vertical-align:2px; animation:twPulse 1.8s ease-out infinite; }
@keyframes twPulse { 0% { box-shadow:0 0 0 0 rgba(235,4,0,.6); } 70%, 100% { box-shadow:0 0 0 8px rgba(235,4,0,0); } }
.tw-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:26px 18px; }
.tw-card { display:block; min-width:0; }
.tw-thumb { position:relative; display:block; aspect-ratio:16 / 9; background:var(--brand); }
.tw-thumb > * { transition:transform .12s ease-out; }
.tw-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.tw-live-tag { position:absolute; left:10px; top:10px; padding:1px 6px; border-radius:4px; background:#eb0400; color:#fff; font:800 12.5px/1.4 "Plus Jakarta Sans", sans-serif; }
.tw-viewers { position:absolute; left:10px; bottom:10px; padding:1px 6px; border-radius:4px; background:rgba(0,0,0,.72); color:#fff; font-size:13px; font-weight:600; }
.tw-meta { display:grid; grid-template-columns:40px minmax(0, 1fr); gap:10px; margin-top:10px; }
.tw-av { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#1d1d20; display:block; }
.tw-meta b { display:block; font-size:14.5px; font-weight:700; color:#efeff1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tw-meta small { display:block; color:#adadb8; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-tw-icon { width:22px; height:22px; vertical-align:-3px; }

/* ── Twitch-style hover: a thumbnail lifts off a corner in the brand colour ── */
.tw-card:hover .tw-thumb > *, .tw-card:focus-visible .tw-thumb > * { transform:translate(6px, -6px); }
.tw-card:hover .tw-meta b { color:var(--brand-hi); }
.coin-card .coin-media { transition:transform .12s ease-out, box-shadow .12s ease-out !important; }
.coin-card:hover .coin-media, .coin-card:focus-visible .coin-media { transform:translate(5px, -5px) !important; box-shadow:-5px 5px 0 var(--brand) !important; }
@media (prefers-reduced-motion:reduce) { .tw-dot { animation:none; } .tw-card:hover .tw-thumb > *, .coin-card:hover .coin-media { transform:none !important; } }

/* A hair of space between "on" and the platform box in the hero. */
.homehero h1 .plat-rotator { margin-left:.14em; }

/* Hero headline: bigger and heavier; the platform box (Twitch, Kick, YouTube) scales with it. */
.homehero { max-width:1080px !important; }
.homehero h1 { font-size:clamp(58px, 6.8vw, 108px) !important; line-height:.95 !important; font-weight:800 !important; letter-spacing:-.05em !important; }
.homehero h1 .yt-word b { padding:0 .14em .05em; }
@media (max-width:560px) { .homehero h1 { font-size:48px !important; } }

/* Explore panel tiles for streams live on Twitch. */
.tc-mini .token-type.tc-live { background:#eb0400; color:#fff; font-weight:800; letter-spacing:.04em; }
.tc-stream .token-image img { object-fit:cover; }
.tw-plat { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:rgba(0,0,0,.6); }
.tw-plat svg { width:16px; height:16px; display:block; }

/* The hero's Launch coin button takes the colour of the platform in the rotating word. */
.homehero[data-platform] .hero-composer button { transition:background-color .6s cubic-bezier(.22,1,.36,1), color .4s, box-shadow .6s, filter .2s, transform .14s; }
.homehero[data-platform] .hero-composer button:hover { filter:brightness(1.1); }
.homehero[data-platform="twitch"] .hero-composer button { background:#9146ff !important; color:#fff !important; box-shadow:0 9px 26px rgba(145,70,255,.35), inset 0 1px rgba(255,255,255,.2) !important; }
.homehero[data-platform="kick"] .hero-composer button { background:#53fc18 !important; color:#0b0b0b !important; box-shadow:0 9px 26px rgba(83,252,24,.28), inset 0 1px rgba(255,255,255,.35) !important; }
.homehero[data-platform="youtube"] .hero-composer button { background:#ff0033 !important; color:#fff !important; box-shadow:0 9px 26px rgba(255,0,51,.32), inset 0 1px rgba(255,255,255,.2) !important; }

/* The overlay showcase, a little more compact. */
.ov-show { padding:32px 38px; gap:38px; }
.ov-copy h2 { margin:8px 0 10px; font-size:clamp(32px, 3.3vw, 46px); }
.ov-lede { font-size:15px; line-height:1.6; }
.ov-loop { margin:18px 0 14px; }
.ov-loop li { padding:10px 12px; }
.ov-loop li:before { margin-bottom:6px; }
.ov-points { gap:6px; margin-bottom:20px; }
.ov-points li { font-size:13.5px; }
.ov-screen { aspect-ratio:16 / 9; }
.ov-actions a { height:44px; }

/* ── Coin page: the streamer's stream ───────────────────────────────────── */
.tk-stream { padding:0 !important; overflow:hidden; }
.tk-stream-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 18px; }
.tk-stream-status { display:flex; align-items:center; gap:8px; min-width:0; color:#c9c9cf; font-size:14px; }
.tk-stream-status:empty { display:none; }
.tk-stream-status b { color:#f2f2ef; }
.tk-stream-live { padding:2px 7px; border-radius:5px; background:#eb0400; color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em; }
.tk-stream-offline { padding:2px 8px; border-radius:5px; background:rgba(255,255,255,.1); color:#c9c9cf; font-size:12px; font-weight:700; }
.tk-stream-title { max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9a9aa3; }
.tk-stream-who { display:flex; align-items:center; gap:7px; margin-left:auto; font-size:14px; color:#9a9aa3; }
.tk-stream-who b { color:#f2f2ef; }
.tk-stream-logo { width:18px; height:18px; }
.tk-stream-open { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.08); font-size:13.5px; font-weight:700; transition:background-color .15s; }
.tk-stream-open:hover { background:rgba(255,255,255,.14); }
.tk-stream-open svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
.tk-stream-player { position:relative; aspect-ratio:16 / 9; background:#000; }
.tk-stream-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:640px) { .tk-stream-who { margin-left:0; } .tk-stream-title { max-width:24ch; } }