/* ============================================================
   Sonder · Snowball
   Shared: the NEW button (home + nav) with snow/frost states,
   and the /snowball experience (hero, always-watching bar,
   control slider, receipts, dashboard, compounding, CTA).
   Base = sondersites.com (near-black + Space Grotesk + JetBrains Mono).
   Signature = one green accent + snow white, used sharply.
   ============================================================ */
:root{
  --sb-accent: #ffffff;
  --sb-accent-dim: rgba(255,255,255,.42);
  --sb-accent-ink: #0a0a0a;
  --sb-snow: oklch(0.98 0.005 240);
  --sb-glow: rgba(255,255,255,.4);
  --sb-disp: 'Space Grotesk', system-ui, sans-serif;
  --sb-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sb-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------- NEW · Snowball nav pill ---------------- */
.sb-new-btn{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sb-mono); font-size:12px; letter-spacing:.02em;
  color:var(--sb-snow); text-decoration:none; white-space:nowrap;
  padding:9px 14px; border-radius:999px; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,32,24,.92), rgba(9,14,11,.92));
  border:1px solid var(--sb-accent-dim);
  box-shadow:0 8px 30px -12px var(--sb-glow), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s, color .25s;
}
.sb-new-btn:hover{ transform:translateY(-1px); }
.sb-new-btn .sb-tag{
  font-weight:700; letter-spacing:.14em; font-size:10px;
  color:var(--sb-accent-ink); background:var(--sb-accent);
  border-radius:5px; padding:2px 6px;
}
.sb-new-btn .sb-word{ font-weight:600; letter-spacing:.02em; }
.sb-new-btn .sb-dot{
  width:6px; height:6px; border-radius:50%; background:var(--sb-accent);
  box-shadow:0 0 10px 2px var(--sb-glow); animation:sb-pulse-dot 2.4s ease-in-out infinite;
}
.sb-new-btn::before{ /* pulsing aura */
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  box-shadow:0 0 24px 2px var(--sb-glow); opacity:.5; animation:sb-pulse 3s ease-in-out infinite;
}
.sb-new-btn::after{ /* shimmer sweep */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%; z-index:1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); animation:sb-shimmer 4.6s ease-in-out infinite;
}
.sb-new-btn.is-frosted{
  border-color:var(--sb-snow); color:#fff;
  background:linear-gradient(180deg, rgba(228,242,255,.24), rgba(200,224,255,.12)),
             linear-gradient(180deg, rgba(20,32,24,.92), rgba(9,14,11,.92));
  box-shadow:0 10px 40px -10px rgba(214,236,255,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.sb-new-btn.is-frosted .sb-tag{ background:var(--sb-snow); color:var(--sb-accent-ink); }

@keyframes sb-pulse{ 0%,100%{opacity:.32} 50%{opacity:.65} }
@keyframes sb-pulse-dot{ 0%,100%{opacity:.5; transform:scale(.78)} 50%{opacity:1; transform:scale(1)} }
@keyframes sb-shimmer{ 0%,16%{left:-60%} 52%,100%{left:130%} }

/* ---------------- home standout strip (near services) ---------------- */
.sb-standout{
  position:relative; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  justify-content:space-between; margin:0 auto; max-width:1240px;
  padding:20px clamp(28px,4vw,40px); border-radius:18px; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, rgba(16,26,20,.7), rgba(8,12,10,.7));
  border:1px solid var(--sb-accent-dim);
  box-shadow:0 30px 80px -50px var(--sb-glow);
}
.sb-standout::after{ /* faint frost glaze top-left */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(80% 120% at 0% 0%, var(--sb-glow), transparent 60%);
}
.sb-standout .sb-so-copy{ display:flex; flex-direction:column; gap:6px; min-width:min(100%,420px); }
.sb-standout .sb-so-kicker{
  font-family:var(--sb-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sb-accent); display:flex; align-items:center; gap:8px;
}
.sb-standout .sb-so-title{ font-family:var(--sb-disp); font-weight:700; font-size:clamp(19px,2.4vw,25px); color:var(--sb-snow); line-height:1.2; }
.sb-standout .sb-so-sub{ font-family:var(--sb-sans); color:#c9c9c6; font-size:14.5px; max-width:60ch; }
.sb-standout .sb-so-cta{
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  font-family:var(--sb-mono); font-size:13px; color:var(--sb-accent-ink);
  background:var(--sb-accent); border:0; border-radius:999px; padding:12px 20px;
  text-decoration:none; font-weight:600;
  box-shadow:0 12px 40px -14px var(--sb-glow); transition:transform .25s, box-shadow .25s;
}
.sb-standout .sb-so-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 50px -14px var(--sb-glow); }
.sb-standout .sb-so-cta.is-frosted{ background:var(--sb-snow); color:var(--sb-accent-ink); }

/* ================================================================
   /snowball + /snowball/for/* pages  (scoped under .sb-page)
   ================================================================ */
.sb-page, .sb-page *, .sb-page *::before, .sb-page *::after{ box-sizing:border-box; }
.sb-page{ margin:0; background:#070707; color:#f2f1ee; font-family:var(--sb-sans);
  -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden; }
.sb-page ::selection{ background:var(--sb-accent); color:var(--sb-accent-ink); }
.sb-wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,32px); }
.sb-page h1,.sb-page h2,.sb-page h3{ font-family:var(--sb-disp); font-weight:700; line-height:1.08; letter-spacing:-.01em; overflow-wrap:break-word; }
.sb-page section{ padding:clamp(56px,9vw,110px) 0; border-top:1px solid rgba(255,255,255,.06); }
.sb-page section:first-of-type{ border-top:0; }
.sb-eyebrow{ font-family:var(--sb-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--sb-accent); margin:0 0 14px; }
.sb-lead{ color:#c7c7c3; font-size:clamp(16px,1.4vw,19px); max-width:64ch; }
.sb-num{ font-family:var(--sb-mono); font-variant-numeric:tabular-nums; }

/* header (reuses site look, self-contained) */
.sb-head{ position:sticky; top:0; z-index:60; backdrop-filter:blur(14px) saturate(140%);
  background:rgba(7,7,7,.72); border-bottom:1px solid rgba(255,255,255,.07); }
.sb-head .sb-wrap{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.sb-head a.sb-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.sb-head img{ height:22px; width:auto; display:block; }
.sb-head .sb-back{ font-family:var(--sb-mono); font-size:12px; color:#9a9a98; text-decoration:none; letter-spacing:.04em; }
.sb-head .sb-back:hover{ color:#fff; }

/* hero */
.sb-hero{ text-align:left; }
.sb-hero h1{ font-size:clamp(40px,6.6vw,78px); margin:0 0 20px; }
.sb-hero .sb-accent{ color:var(--sb-accent); }
.sb-hero .sb-money{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin-top:10px;
  font-family:var(--sb-mono); font-size:14px; color:#9a9a98;
}
.sb-hero .sb-money b{ color:var(--sb-snow); font-weight:600; }
.sb-cta{ display:inline-flex; align-items:center; gap:.5em; margin-top:30px; text-decoration:none;
  font-family:var(--sb-mono); font-size:14px; font-weight:600; color:var(--sb-accent-ink);
  background:var(--sb-accent); border-radius:999px; padding:14px 24px;
  box-shadow:0 16px 50px -16px var(--sb-glow); transition:transform .25s, box-shadow .25s; }
.sb-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 60px -16px var(--sb-glow); }
.sb-cta.ghost{ background:transparent; color:var(--sb-snow); border:1px solid rgba(255,255,255,.2); box-shadow:none; }

/* pay -> get equation: the whole pitch in one glance */
.sb-equation{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; margin:30px 0 8px; }
.sb-eq-side{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:5px;
  background:#0e0e0e; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px 22px; }
.sb-eq-get{ background:linear-gradient(180deg,#ffffff,#ececec); border-color:#fff; box-shadow:0 20px 60px -30px rgba(255,255,255,.5); }
.sb-eq-k{ font-family:var(--sb-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8f8f8d; }
.sb-eq-get .sb-eq-k{ color:#4a4a48; }
.sb-eq-v{ font-family:var(--sb-disp); font-weight:700; font-size:clamp(30px,5.2vw,52px); line-height:1; color:var(--sb-snow); font-variant-numeric:tabular-nums; }
.sb-eq-get .sb-eq-v{ color:#0a0a0a; }
.sb-eq-mo{ font-family:var(--sb-mono); font-size:12px; color:#8f8f8d; }
.sb-eq-get .sb-eq-mo{ color:#3a3a38; }
.sb-eq-arrow{ align-self:center; font-size:26px; color:#8f8f8d; padding:0 2px; }
.sb-cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.sb-silly{ font-family:var(--sb-mono); font-size:12.5px; color:#8f8f8d; max-width:46ch; }
@media (max-width:560px){ .sb-eq-arrow{ transform:rotate(90deg); width:100%; text-align:center; } }

/* credibility anchor strip */
.sb-anchor{ padding:18px 0 !important; }
.sb-anchor .sb-wrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.sb-anchor p{ margin:0; font-family:var(--sb-mono); font-size:12.5px; letter-spacing:.02em; color:#9a9a98; }
.sb-anchor b{ color:var(--sb-snow); font-weight:600; }

/* how it works */
.sb-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:38px; }
.sb-step{ background:#101010; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:22px; position:relative; }
.sb-step .sb-no{ font-family:var(--sb-mono); font-size:12px; color:var(--sb-accent); }
.sb-step h3{ font-size:18px; margin:12px 0 8px; }
.sb-step p{ margin:0; color:#b7b7b3; font-size:14px; }
.sb-step.is-human{ border-color:var(--sb-accent-dim); box-shadow:0 24px 70px -50px var(--sb-glow); }
.sb-step.is-human .sb-no{ color:var(--sb-snow); }

/* always-watching bar */
.sb-watch{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0 auto 8px; }
.sb-watch .sb-ind{
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.1); font-family:var(--sb-mono); font-size:13px; color:#dededa;
}
.sb-watch .sb-live{ width:9px; height:9px; border-radius:50%; background:var(--sb-accent);
  box-shadow:0 0 0 0 var(--sb-glow); animation:sb-live 2.2s ease-out infinite; }
.sb-watch .sb-ind:nth-child(2) .sb-live{ animation-delay:.5s; }
.sb-watch .sb-ind:nth-child(3) .sb-live{ animation-delay:1s; }
.sb-watch-cap{ text-align:center; font-family:var(--sb-mono); font-size:12px; color:#8f8f8d; margin:6px 0 0; }
@keyframes sb-live{ 0%{box-shadow:0 0 0 0 var(--sb-glow)} 70%{box-shadow:0 0 0 9px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} }

/* control slider */
.sb-control{ margin-top:34px; background:linear-gradient(180deg,#0d0d0d,#0a0a0a);
  border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:clamp(22px,3vw,34px); }
.sb-throttle-row{ display:flex; justify-content:space-between; font-family:var(--sb-mono);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8f8f8d; margin-bottom:12px; }
.sb-throttle-row .r{ color:var(--sb-accent); }
.sb-track{ position:relative; }
.sb-track input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.16)); outline:none; margin:6px 0 4px; cursor:pointer; }
.sb-track .sb-fill{ position:absolute; left:0; top:6px; height:8px; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--sb-accent-dim), var(--sb-accent)); pointer-events:none; box-shadow:0 0 18px -2px var(--sb-glow); }
.sb-track input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--sb-snow); border:3px solid var(--sb-accent); box-shadow:0 6px 20px -4px var(--sb-glow), 0 0 0 6px rgba(255,255,255,.04); cursor:grab; }
.sb-track input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%;
  background:var(--sb-snow); border:3px solid var(--sb-accent); cursor:grab; }
.sb-readout{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:26px; }
.sb-readout .sb-cell{ background:#111; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; }
.sb-readout .k{ font-family:var(--sb-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8f8f8d; }
.sb-readout .v{ font-family:var(--sb-disp); font-weight:700; font-size:clamp(22px,3vw,30px); color:var(--sb-snow); margin-top:6px; font-variant-numeric:tabular-nums; }
.sb-readout .v.accent{ color:var(--sb-accent); }
.sb-readout .sub{ font-family:var(--sb-mono); font-size:11px; color:var(--sb-accent-dim); margin-top:5px; letter-spacing:.02em; }
.sb-price-note{ font-family:var(--sb-mono); font-size:11px; color:#7a7a78; margin-top:14px; }

/* receipts feed */
.sb-feed{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sb-receipt{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-radius:12px;
  background:#101010; border:1px solid rgba(255,255,255,.08); }
.sb-receipt.is-new{ animation:sb-slidein .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes sb-slidein{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
.sb-r-type{ font-family:var(--sb-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:6px; }
.sb-receipt.is-heal .sb-r-type{ color:var(--sb-accent-ink); background:#fff; }
.sb-receipt.is-improve .sb-r-type{ color:#0a0a0a; background:rgba(255,255,255,.72); }
.sb-receipt.is-catch .sb-r-type{ color:#fff; background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.sb-r-text{ flex:1 1 200px; min-width:0; font-size:14px; color:#dededa; }
.sb-r-tag{ font-family:var(--sb-mono); font-size:11px; color:var(--sb-accent); white-space:nowrap; }
.sb-r-tag.sb-r-queued{ color:#8f8f8d; }

/* dashboard preview */
.sb-dash{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:32px; }
.sb-dash .sb-tile{ background:#0e0e0e; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; }
.sb-dash .n{ font-family:var(--sb-disp); font-weight:700; font-size:30px; color:var(--sb-snow); font-variant-numeric:tabular-nums; }
.sb-dash .l{ font-family:var(--sb-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8f8f8d; margin-top:6px; }
.sb-dash .sb-tile.accent .n{ color:var(--sb-accent); }

/* compounding chart */
.sb-compound{ margin-top:30px; background:#0c0c0c; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:26px; }
.sb-compound svg{ width:100%; height:auto; display:block; }

/* human line */
.sb-human{ display:flex; gap:16px; align-items:flex-start; padding:24px; border-radius:16px;
  background:linear-gradient(180deg, rgba(16,26,20,.6), rgba(8,12,10,.6)); border:1px solid var(--sb-accent-dim); }
.sb-human .sb-human-mark{ font-family:var(--sb-disp); font-weight:700; color:var(--sb-accent); font-size:22px; line-height:1; }
.sb-human p{ margin:0; color:#d4d4d0; font-size:15px; }

/* final CTA */
.sb-final{ text-align:center; }
.sb-final h2{ font-size:clamp(30px,5vw,52px); }

/* footer */
.sb-foot{ border-top:1px solid rgba(255,255,255,.08); padding:34px 0; }
.sb-foot .sb-wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--sb-mono); font-size:12px; color:#7a7a78; }
.sb-foot a{ color:#9a9a98; text-decoration:none; }
.sb-foot a:hover{ color:#fff; }

/* personalised client page extras */
.sb-client-hero .sb-client-badge{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  padding:8px 14px; border-radius:999px; background:#0f0f0f; border:1px solid rgba(255,255,255,.1);
  font-family:var(--sb-mono); font-size:12px; color:#c9c9c6; }
.sb-client-hero .sb-client-badge img{ height:20px; width:auto; }
.sb-note{ background:#0e0e0e; border:1px solid rgba(255,255,255,.08); border-left:2px solid var(--sb-accent);
  border-radius:12px; padding:18px 20px; color:#cfcfcb; font-size:15px; }
.sb-illus{ font-family:var(--sb-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#7a7a78; }

/* ---------------- responsive ---------------- */
/* keep the mobile header decluttered: pill lives in the hamburger menu there */
@media (max-width:900px){ .nav-cta > .sb-new-btn{ display:none; } }

@media (max-width:820px){
  .sb-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sb-readout{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sb-dash{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sb-standout{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .sb-readout,.sb-dash{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sb-steps{ grid-template-columns:1fr; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .sb-new-btn::before,.sb-new-btn::after,.sb-new-btn .sb-dot,
  .sb-watch .sb-live,.sb-receipt.is-new{ animation:none !important; }
  .sb-cta,.sb-so-cta,.sb-new-btn{ transition:none !important; }
}

/* ============ v2: split hero + live dashboard + scroll snowball ============ */
.sb-hero-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(28px,5vw,60px); align-items:center; }
.sb-hero-copy{ min-width:0; }
.sb-hero-copy h1{ font-size:clamp(38px,5.2vw,68px); margin:0 0 18px; }
.sb-hero-viz{ min-width:0; }
@media (max-width:900px){ .sb-hero-grid{ grid-template-columns:1fr; } .sb-hero-viz{ order:2; } }

/* live dashboard mockup (what you get) */
.sb-dash-card{ position:relative; overflow:hidden; font-family:var(--sb-mono);
  background:linear-gradient(180deg,#101012,#0b0b0d); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:18px; box-shadow:0 50px 110px -55px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05); }
.sb-dc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sb-dc-head .t{ font-size:12px; color:#c9c9c6; letter-spacing:.04em; }
.sb-dc-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.sb-dc-live i{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:sb-live 2s ease-out infinite; }
.sb-dc-big{ background:#0e0e10; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; margin-bottom:12px; }
.sb-dc-big .k{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8f8f8d; }
.sb-dc-big .v{ font-family:var(--sb-disp); font-weight:700; font-size:clamp(26px,3.6vw,38px); color:#fff; margin-top:4px; font-variant-numeric:tabular-nums; }
.sb-dc-big .v .up{ font-family:var(--sb-mono); font-size:11px; color:#8f8f8d; margin-left:8px; letter-spacing:.06em; }
.sb-dc-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.sb-dc-tile{ background:#0e0e10; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; }
.sb-dc-tile .n{ font-family:var(--sb-disp); font-weight:700; font-size:22px; color:#fff; font-variant-numeric:tabular-nums; }
.sb-dc-tile .l{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:#8f8f8d; margin-top:3px; }
.sb-dc-chart{ display:flex; align-items:flex-end; gap:5px; height:66px; padding:10px 12px; margin-bottom:12px;
  background:#0e0e10; border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.sb-dc-bar{ flex:1; height:0; min-height:3px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#fff,#9aa0a8);
  transition:height .9s cubic-bezier(.16,1,.3,1); }
.sb-dc-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.sb-dc-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:#cfcfcb;
  background:#0e0e10; border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:8px 10px; }
.sb-dc-row.is-new{ animation:sb-slidein .5s cubic-bezier(.16,1,.3,1) both; }
.sb-dc-row .tag{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:#fff; color:#0a0a0a; white-space:nowrap; }
.sb-dc-row .tag.out{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.sb-dc-row .txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-dc-foot{ margin-top:12px; font-size:10.5px; color:#8f8f8d; letter-spacing:.03em; }

/* reveal-on-scroll */
.sb-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.sb-reveal.is-in{ opacity:1; transform:none; }

/* the snowball that grows as you scroll (sits behind everything) */
#sb-scrollball{ position:fixed; right:5vw; bottom:7vh; width:74px; height:74px; border-radius:50%; z-index:-1;
  transform-origin:100% 100%; pointer-events:none; will-change:transform,opacity; opacity:.16;
  background:radial-gradient(circle at 36% 30%, #ffffff, #d7dde6 42%, #7f8794 100%);
  box-shadow:0 0 70px 12px rgba(255,255,255,.14); }

/* compounding chart draw-in */
.sb-line-draw{ stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.9s ease .15s; }
.is-in .sb-line-draw{ stroke-dashoffset:0; }
.sb-fade-in{ opacity:0; transition:opacity 1.3s ease .5s; }
.is-in .sb-fade-in{ opacity:1; }

@media (max-width:520px){ #sb-scrollball{ right:2vw; bottom:4vh; width:60px; height:60px; } }
@media (prefers-reduced-motion: reduce){
  .sb-reveal{ opacity:1 !important; transform:none !important; }
  #sb-scrollball{ display:none; }
  .sb-dc-live i{ animation:none; }
  .sb-line-draw{ stroke-dashoffset:0; transition:none; }
  .sb-fade-in{ opacity:1; transition:none; }
}