/* ============================================================
   POPPY DESIGN SYSTEM  ·  Indie Music India
   Bright candy-gradient theme. Loaded after each page's inline
   <style> so it overrides the old dark editorial look.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* remap the existing variable names to the candy palette so
     every old rule that used them flips automatically */
  --bg:#FFF7EE;
  --surface:#FFFFFF;
  --surface2:#FFF0E2;
  --border:#241B2E;
  --text:#241B2E;
  --muted:#6B6076;
  --accent:#FF4D8D;
  --amber:#FF9130;
  --green:#1FCF9E;

  /* new candy tokens */
  --ink:#241B2E;
  --cream:#FFF7EE;
  --pink:#FF4D8D;  --pink-s:#FFE1EC;
  --orange:#FF9130;--orange-s:#FFE7D0;
  --yellow:#FFD23F;--yellow-s:#FFF3CE;
  --violet:#8B5CF6;--violet-s:#EDE4FF;
  --blue:#3AA0FF;  --blue-s:#DCEEFF;
  --mint:#1FCF9E;  --mint-s:#D2F6EC;
  --g-sunset:linear-gradient(120deg,#FF4D8D,#FF9130);
  --g-grape:linear-gradient(120deg,#8B5CF6,#3AA0FF);
  --g-mint:linear-gradient(120deg,#1FCF9E,#3AA0FF);
  --g-candy:linear-gradient(120deg,#FF4D8D,#8B5CF6);
  --font-d:'Bricolage Grotesque',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'Space Mono',ui-monospace,monospace;
  /* chips / tags used across the directory pages */
  --tag-bg:#FFFFFF;
  --card-bg:#FFFFFF;
  --tag-bg-dark:#FFFFFF;
}

/* ---- base ---- */
html,body{background:var(--cream)!important;color:var(--ink)!important}
body{
  font-family:var(--font-b)!important;
  background:var(--cream)!important;
}
/* living animated candy background (looping webp) — kept subtle so text stays readable */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('/assets/anim/bg-loop.webp') center center/cover no-repeat;opacity:.16;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body>*{position:relative;z-index:1}

/* confetti GIF accent */
.confetti-accent{position:absolute;pointer-events:none;z-index:3;width:200px;height:200px;background:url('/assets/anim/confetti.gif') center/contain no-repeat}
/* confetti spread across a whole block, behind the content */
.confetti-full{position:absolute;inset:0;pointer-events:none;z-index:0;background:url('/assets/anim/confetti.gif') repeat;background-size:200px 200px;opacity:.14}
/* keep the copy crisp: give text a readable backdrop above the confetti */
.pg-cta>*:not(.confetti-full),.contact-card>*:not(.confetti-full){position:relative;z-index:1}
.pg-cta h2,.pg-cta p,.contact-left h3,.contact-left p{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.pg-cta,.contact-card{position:relative;overflow:hidden}
.pg-cta>*:not(.confetti-full),.contact-card>*:not(.confetti-full){position:relative;z-index:1}
/* money coin GIFs */
.poppy-band{position:relative}
.coins-band{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:300px;height:180px;pointer-events:none;z-index:2;background:url('/assets/anim/coins-band.gif') center/contain no-repeat}
.coins-row{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:64px;height:64px;pointer-events:none;z-index:2;background-position:center;background-repeat:no-repeat;background-size:contain}
.coins-row.out{background-image:url('/assets/anim/coins-down.gif')}
.coins-row.back{background-image:url('/assets/anim/coins-up.gif')}
@media(max-width:640px){.coins-band{display:none}}

/* animated equaliser sticker */
.hero-eq{position:absolute!important;z-index:3;display:flex;align-items:flex-end;gap:5px;height:38px}
.hero-eq span{display:block;width:7px;border:2px solid var(--ink);border-radius:3px;background:var(--yellow);height:40%}
.hero-eq span:nth-child(2){background:var(--mint)}
.hero-eq span:nth-child(3){background:#fff}
.hero-eq span:nth-child(4){background:var(--pink)}
.hero-eq span:nth-child(5){background:var(--yellow)}
@keyframes eqA{0%,100%{height:30%}50%{height:100%}}
@keyframes eqB{0%,100%{height:85%}50%{height:25%}}
@keyframes eqC{0%,100%{height:45%}50%{height:95%}}
.hero-eq span:nth-child(1){animation:eqA .9s ease-in-out infinite}
.hero-eq span:nth-child(2){animation:eqB .8s ease-in-out infinite}
.hero-eq span:nth-child(3){animation:eqC 1s ease-in-out infinite}
.hero-eq span:nth-child(4){animation:eqA .7s ease-in-out infinite}
.hero-eq span:nth-child(5){animation:eqB 1.1s ease-in-out infinite}

/* ---- type ---- */
h1,h2,h3,.pg-h1,.pg-h2,.hero-headline,.section-title,.tool-name,.pg-person-name,
.builder-name,.stat-num,.fact-num,.pg-price,.programme-callout .section-title{
  font-family:var(--font-d)!important;color:var(--ink)!important;letter-spacing:-1px;
}
.pg-h1,.hero-headline{letter-spacing:-2px!important;line-height:.98!important}
p,.pg-p,.pg-lead,.pg-both,.hero-deck,.builder-text,.tool-desc,.problem-body,
.fact-label,.m1-t,.pg-person-bio{color:var(--ink)!important}
.muted,.pg-price-sub,.fact-source,.stat-label,.problem-nudge{color:var(--muted)!important}
.contact-value,.contact-item .contact-value{color:var(--ink)!important;font-weight:600!important}
.contact-label{color:var(--violet)!important;font-family:var(--font-m)!important}
a{color:inherit}

/* mono labels */
.pg-label,.section-label,.pg-eyebrow,.eyebrow,.stat-label,.m1-when,.kicker,
.fact-source,.contact-label{
  font-family:var(--font-m)!important;text-transform:uppercase;letter-spacing:.6px;
}
.pg-label,.section-label,.pg-eyebrow,.kicker{color:var(--violet)!important;font-weight:700!important}

/* eyebrow as a tilted sticker where it sits alone at the top of a hero */
.pg-eyebrow{
  display:inline-block;background:var(--yellow);color:var(--ink)!important;
  padding:6px 14px;border-radius:999px;border:2px solid var(--ink);transform:rotate(-2deg);
}

/* ---- header / nav ---- */
header{background:var(--cream)!important;border-bottom:2px solid var(--ink)!important;backdrop-filter:none!important}
.logo,.logo a{color:var(--ink)!important;font-family:var(--font-d)!important;font-weight:800!important}
nav,.js-primnav{background:var(--cream)!important;border-bottom:2px solid var(--ink)!important;
  -webkit-mask-image:none!important;mask-image:none!important}
.tab{
  font-family:var(--font-m)!important;color:var(--ink)!important;border:2px solid transparent!important;
  border-radius:999px!important;height:auto!important;margin:8px 2px;padding:7px 14px!important;font-weight:700!important;
}
.tab:hover{background:#fff!important;border-color:var(--ink)!important}
.tab.active{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
/* mobile hamburger: white chip + ink lines so it's visible on cream */
.mnav-burger{background:#fff!important;border:2px solid var(--ink)!important;box-shadow:2px 2px 0 var(--ink)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mnav-burger span{background:var(--ink)!important}
/* mobile full-screen menu: cream bg so nav links are visible (was dark) */
body.mnav-open .js-primnav{background:var(--cream)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.mnav-open .js-primnav .tab{color:var(--ink)!important;font-size:20px!important}
body.mnav-open .js-primnav .tab.active{background:var(--ink)!important;color:#fff!important}

/* ---- generic card / tile treatment ---- */
.pg-person,.problem-card,.tool-card,.fact,.m1-step,.builder-card,.pg-terms,
.programme-callout,.contact-card,.contact-item,.hero-visual,.deep-card,.read-card,
.resource-card,.card,.rc,.tile{
  background:var(--surface)!important;
  border:2px solid var(--ink)!important;
  border-radius:20px!important;
  box-shadow:5px 5px 0 var(--ink)!important;
  transition:transform .16s ease, box-shadow .16s ease!important;
}
.pg-person:hover,.problem-card:hover,.tool-card:hover,.fact:hover,.m1-step:hover,
.deep-card:hover,.read-card:hover,.resource-card:hover,.card:hover,.tile:hover{
  transform:translate(-3px,-3px)!important;
  box-shadow:8px 8px 0 var(--pink)!important;
  border-color:var(--pink)!important;
}
/* candy tinting: cycle colours across problem cards & tool cards */
.problem-card:nth-child(5n+1),.tool-card:nth-child(4n+1){background:var(--pink-s)!important}
.problem-card:nth-child(5n+2),.tool-card:nth-child(4n+2){background:var(--blue-s)!important}
.problem-card:nth-child(5n+3),.tool-card:nth-child(4n+3){background:var(--mint-s)!important}
.problem-card:nth-child(5n+4),.tool-card:nth-child(4n+4){background:var(--violet-s)!important}
.problem-card:nth-child(5n+5){background:var(--yellow-s)!important}
.problem-card{border-top:2px solid var(--ink)!important}

/* ============ MOTION: nothing sits static ============ */
@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes popin{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* keep content visible; page JS reveal handled separately */
.reveal,.scroll-reveal,.reveal-stagger,[class*="reveal"]{opacity:1!important}

/* flowing candy gradients on the gradient bands + buttons */
.pg-hero,.hero-visual,.page-hero,.res-hero,.poppy-band,.band-top,.pg-price,.deep-dive-cta,
.pg-wa,.cta-primary,.contact-cta,.btn,.hero-cta{
  background-size:220% 220%!important;animation:flow 9s ease-in-out infinite!important;
}
/* gradient stat tiles: flow AND pop in (backwards fill so hover still works) */
.stat-block,.fact{
  background-size:220% 220%!important;
  animation:flow 9s ease-in-out infinite, popin .55s cubic-bezier(.16,1,.3,1) backwards!important;
}
/* tinted cards: pop in on load (backwards fill keeps hover transforms intact) */
.problem-card,.tool-card,.feat-card,.doc-item,.read-item,.pg-person,.m1-step{
  animation:popin .55s cubic-bezier(.16,1,.3,1) backwards!important;
}
.problem-card:nth-child(2),.tool-card:nth-child(2),.feat-card:nth-child(2),.doc-item:nth-child(2){animation-delay:.06s!important}
.problem-card:nth-child(3),.tool-card:nth-child(3),.feat-card:nth-child(3),.doc-item:nth-child(3){animation-delay:.12s!important}
.problem-card:nth-child(4),.tool-card:nth-child(4),.feat-card:nth-child(4),.doc-item:nth-child(4){animation-delay:.18s!important}
.problem-card:nth-child(5),.doc-item:nth-child(5){animation-delay:.24s!important}
.doc-item:nth-child(6){animation-delay:.30s!important}

.pg-eyebrow{animation:flow 9s ease-in-out infinite, wiggle 3.5s ease-in-out infinite!important;background-size:200% 200%!important}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.scroll-reveal,.reveal-stagger,[class*="reveal"]{opacity:1!important;transform:none!important}
}

/* support-network grid */
.net-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}

/* ============ MOBILE: stop horizontal overflow ============ */
html,body{overflow-x:hidden!important;max-width:100%}
@media(max-width:640px){
  /* tall card sections become swipeable strips (one row, not many) */
  .problem-section .problem-track,.problem-track,.net-grid{
    display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;
    gap:12px!important;margin:0 -16px!important;padding:4px 16px 12px!important;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .problem-track::-webkit-scrollbar,.net-grid::-webkit-scrollbar{display:none}
  .problem-track>*,.net-grid>*{flex:0 0 80%!important;scroll-snap-align:start;min-width:0!important}
  /* founder cards → swipe strip (2 cards, one row) */
  .pg-people{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;gap:12px!important;margin:0 -16px!important;padding:4px 16px 12px!important;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pg-people::-webkit-scrollbar{display:none}
  .pg-people>*{flex:0 0 84%!important;scroll-snap-align:start;min-width:0!important}
  /* credibility ladder → compact horizontal strip */
  .ladder{flex-direction:row!important;overflow-x:auto!important;gap:8px!important;margin:0 -16px!important;padding:4px 16px 10px!important;scrollbar-width:none}
  .ladder::-webkit-scrollbar{display:none}
  .ladder .rung{flex:0 0 128px!important;min-width:128px!important;height:auto!important;min-height:0!important}
  /* tighter tiles on mobile */
  .problem-card,.tool-card,.net-grid .tool-card{padding:14px!important}
  .problem-title{font-size:15px!important}
  .problem-body{font-size:12.5px!important}
  .net-grid .tool-name{font-size:14px!important}
  .net-grid .tool-desc{font-size:12px!important}
  /* stop card grids expanding past the viewport (minmax(0,..) not 1fr) */
  .grid{grid-template-columns:minmax(0,1fr)!important}
  .card,.tool-card,.problem-card,.fact,.feat-card,.doc-item,.read-item,.pg-person{min-width:0!important}
  .card *,.tool-desc,.problem-body,.doc-why,.read-why{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .feat-track{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  /* condense vertical rhythm so mobile pages aren't endless */
  .section{margin-bottom:30px!important}
  .pg-block{margin-top:34px!important}
  .page{padding-top:30px!important;padding-bottom:48px!important}
  .pg-p,.pg-lead{margin-bottom:10px!important}
  .pg-hero,.hero-visual{padding:32px 24px!important}
  /* app-page heroes (industry/reviewers/resources) — trim on mobile */
  .page-hero{padding:22px 16px 0!important}
  .page-title{font-size:25px!important;margin-bottom:6px!important}
  .page-sub{font-size:13px!important;line-height:1.55!important;margin-bottom:14px!important}
  .feat-card{flex:0 0 176px!important;padding:14px!important}
  .feat-desc{font-size:11px!important}
  .res-hero{padding:24px 18px!important}
  /* the header total badge collides with the hamburger — hide on mobile */
  .total-badge,.header-right .total-badge{display:none!important}
  /* compact the About contact block */
  .contact-card{padding:18px!important}
  .contact-items{gap:8px!important}
  .contact-item{padding:11px 14px!important}
  .contact-left p{font-size:13.5px!important;line-height:1.55!important}
  /* reviewer summary chips → one swipe row instead of a tall grid */
  .stats-bar{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;margin:0 -16px!important;padding:2px 16px 10px!important;scrollbar-width:none}
  .stats-bar::-webkit-scrollbar{display:none}
  .stat-chip{flex:0 0 auto!important;white-space:nowrap!important}
  .pg-cta{padding:28px 20px!important;margin-top:48px!important}
  .m1-steps,.stats-strip,.tools-grid,.net-grid,.path-grid{gap:10px!important}
  .problem-nudge{margin-top:6px!important}
  /* the 3 short 'who it's for' tiles go 2-up to cut height */
  .path-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .path-block-note{font-size:12.5px!important}
  .tool-icon{margin-bottom:8px!important}
  .coins-band{display:none!important}
  /* money rows: shrink coin, keep text room */
  .coins-row{width:44px!important;height:44px!important;right:8px!important}
  /* hero decorative circles smaller so they don't crowd */
  .pg-hero::before,.hero-visual::before{width:120px;height:120px;top:-40px;right:-30px}
  .pg-hero::after,.hero-visual::after{width:100px;height:100px;top:auto!important;right:auto!important;bottom:-56px;left:-46px}
  .hero-eq{transform:scale(.85)}
}

/* playbook + directory titles that were near-white in the old theme */
.pb-phase-title,.pb-card-title,.doc-title,.read-title{color:var(--ink)!important}
.pb-phase-title,.pb-card-title{font-family:var(--font-d)!important}

/* card titles / body legibility (old theme made these near-white) */
.problem-title,.deep-title,.read-title,.resource-title{
  color:var(--ink)!important;font-family:var(--font-d)!important;font-size:17px!important;line-height:1.15!important;
}
.problem-body{font-size:14px!important;color:var(--ink)!important;line-height:1.55!important}

/* problem cards → wrapping grid (drop the horizontal carousel + arrows) */
.problem-track{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))!important;
  gap:16px!important;overflow:visible!important;margin:0!important;padding:4px 0 8px!important;
}
.problem-card{flex:none!important;min-width:0!important}
.crsl-btn{display:none!important}

/* icon chips inside cards */
.problem-ic,.tool-icon{
  display:inline-grid!important;place-items:center;width:44px;height:44px;
  border-radius:13px!important;border:2px solid var(--ink);background:#fff;margin-bottom:12px;
}

/* ---- stat strips / number tiles ---- */
.stats-strip,.facts-strip{gap:14px!important;border:none!important;background:transparent!important;overflow:visible!important}
.stat-block,.fact{border-radius:18px!important;border:2px solid var(--ink)!important;color:#fff!important}
.stat-block{box-shadow:none!important}
.stat-block:nth-child(3n+1),.fact:nth-child(4n+1){background:var(--g-sunset)!important}
.stat-block:nth-child(3n+2),.fact:nth-child(4n+2){background:var(--g-grape)!important}
.stat-block:nth-child(3n+3),.fact:nth-child(4n+3){background:var(--g-mint)!important}
.fact:nth-child(4n+4){background:var(--g-candy)!important}
.stat-num,.fact-num,.stat-label,.fact-label,.fact-num span{color:#fff!important}
.fact-source,.fact-source a{color:rgba(255,255,255,.85)!important}

/* ---- buttons ---- */
.pg-wa,.cta-primary,.contact-cta,.btn,.hero-cta,button.primary{
  font-family:var(--font-d)!important;font-weight:700!important;
  background:var(--pink)!important;color:#fff!important;
  border:2px solid var(--ink)!important;border-radius:14px!important;
  box-shadow:5px 5px 0 var(--ink)!important;transition:transform .15s, box-shadow .15s!important;
}
.pg-wa:hover,.cta-primary:hover,.contact-cta:hover,.btn:hover{
  transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 var(--ink)!important;filter:none!important;
}
.pg-email,.tool-link{color:var(--violet)!important;font-family:var(--font-m)!important;font-weight:700!important}
/* radar footer quick-links: give them the poppy button pop */
.disc-link,.deep-dive-cta,.discover-filter-toggle,.show-more-btn{
  background:#fff!important;border:2px solid var(--ink)!important;color:var(--ink)!important;
  border-radius:12px!important;box-shadow:4px 4px 0 var(--ink)!important;font-family:var(--font-m)!important;font-weight:700!important;
}
.disc-link:hover,.deep-dive-cta:hover,.discover-filter-toggle:hover,.show-more-btn:hover{
  transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--ink)!important;background:var(--yellow-s)!important;
}

/* ---- heroes: swap dark photo bands for candy gradient bands ---- */
.pg-hero,.hero-visual{
  background:linear-gradient(180deg,rgba(16,10,28,.30),rgba(16,10,28,.30)),linear-gradient(120deg,#E63A7E 0%,#7A46E0 50%,#2E7FD6 100%)!important;color:#fff!important;
  border:2px solid var(--ink)!important;border-radius:24px!important;box-shadow:8px 8px 0 var(--ink)!important;
  overflow:hidden!important;position:relative!important;
}
.pg-hero *,.hero-visual *{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.32)}
/* soft shadow on other white-on-gradient text for contrast */
.stat-block,.stat-num,.stat-label,.fact-num,.fact-label,.fact,.poppy-band,.poppy-band *,.band-top,.band-top *,.deep-dive-cta{text-shadow:0 1px 2px rgba(0,0,0,.25)}
.fact-source,.fact-source a{color:#fff!important}
.pg-hero>*,.hero-visual>*{position:relative;z-index:2}
.pg-hero .pg-eyebrow{background:var(--yellow)!important;color:var(--ink)!important}
/* decorative candy shapes peeking from the corners (kept out of the text) */
.pg-hero::before,.hero-visual::before{
  content:''!important;display:block!important;position:absolute!important;z-index:1!important;
  top:-74px;right:-64px;width:150px;height:150px;border-radius:50%;
  background:#FFD23F;border:4px solid var(--ink);
}
.pg-hero::after,.hero-visual::after{
  content:''!important;display:block!important;position:absolute!important;z-index:1!important;
  top:auto!important;right:auto!important;bottom:-84px;left:-74px;width:128px;height:128px;border-radius:50%;
  background:#1FCF9E;border:4px solid var(--ink);
}
/* keep hero copy clear of the corner shapes on desktop */
@media(min-width:721px){
  .pg-hero>*,.hero-visual>*{max-width:600px}
  .pg-h1,.hero-headline{max-width:660px}
}
/* equaliser sticker was colliding with hero copy — retire it */
.hero-eq{display:none!important}

/* terms / callout / cta accent blocks */
.pg-cta,.pg-terms,.programme-callout{background:var(--surface)!important}
.pg-cta{background:var(--yellow-s)!important}

/* ---- app / directory pages (industry, resources, reviewers, radar) ---- */
.page-hero{
  background:linear-gradient(180deg,rgba(16,10,28,.30),rgba(16,10,28,.30)),linear-gradient(120deg,#7A46E0,#2E7FD6)!important;
  border-bottom:2px solid var(--ink)!important;overflow:hidden;
}
.page-hero::after{display:none!important}
.page-title{color:#fff!important;font-family:var(--font-d)!important;text-shadow:0 1px 3px rgba(0,0,0,.32)}
.page-sub{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.32)}
.feat-card,.stat-card,.metric-card{
  background:#fff!important;border:2px solid var(--ink)!important;border-top:2px solid var(--ink)!important;
  border-radius:14px!important;box-shadow:4px 4px 0 var(--ink)!important;
}
/* colourful stat tiles */
.feat-card:nth-child(4n+1),.stat-card:nth-child(4n+1){background:var(--pink-s)!important}
.feat-card:nth-child(4n+2),.stat-card:nth-child(4n+2){background:var(--yellow-s)!important}
.feat-card:nth-child(4n+3),.stat-card:nth-child(4n+3){background:var(--mint-s)!important}
.feat-card:nth-child(4n+4),.stat-card:nth-child(4n+4){background:var(--blue-s)!important}
.feat-card:hover,.stat-card:hover{transform:translate(-3px,-3px)!important;box-shadow:7px 7px 0 var(--pink)!important;border-color:var(--pink)!important}
.feat-num,.feat-name{color:var(--ink)!important}
.feat-num{color:var(--pink)!important;font-family:var(--font-d)!important}
.feat-num{font-family:var(--font-d)!important}
.artist-chip,.chip,.tag,.token,.roster-tag{
  background:var(--tag-bg)!important;border:1.5px solid var(--ink)!important;color:var(--ink)!important;border-radius:999px!important;
}
/* colourful filter option pills */
.pill,.filter-pill,.city-pill,.platform-pill,.buzz-lang-pill,.toolkit-pill{
  border:2px solid var(--ink)!important;color:var(--ink)!important;border-radius:999px!important;font-family:var(--font-m)!important;
}
.pill:nth-child(6n+1),.city-pill:nth-child(6n+1),.platform-pill:nth-child(6n+1),.buzz-lang-pill:nth-child(6n+1){background:var(--pink-s)!important}
.pill:nth-child(6n+2),.city-pill:nth-child(6n+2),.platform-pill:nth-child(6n+2),.buzz-lang-pill:nth-child(6n+2){background:var(--yellow-s)!important}
.pill:nth-child(6n+3),.city-pill:nth-child(6n+3),.platform-pill:nth-child(6n+3),.buzz-lang-pill:nth-child(6n+3){background:var(--mint-s)!important}
.pill:nth-child(6n+4),.city-pill:nth-child(6n+4),.platform-pill:nth-child(6n+4),.buzz-lang-pill:nth-child(6n+4){background:var(--blue-s)!important}
.pill:nth-child(6n+5),.city-pill:nth-child(6n+5),.platform-pill:nth-child(6n+5),.buzz-lang-pill:nth-child(6n+5){background:var(--violet-s)!important}
.pill:nth-child(6n+6),.city-pill:nth-child(6n+6),.platform-pill:nth-child(6n+6),.buzz-lang-pill:nth-child(6n+6){background:var(--orange-s)!important}
.pill:hover,.city-pill:hover,.platform-pill:hover,.buzz-lang-pill:hover{border-color:var(--pink)!important;transform:translateY(-1px)!important}
.pill.active,.pill[aria-pressed="true"],.filter-pill.active,.city-pill.active,.platform-pill.active,.buzz-lang-pill.active,.toolkit-pill-active{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.filter-label{color:var(--muted)!important;font-family:var(--font-m)!important}
.search-input{background:#fff!important;border:2px solid var(--ink)!important;color:var(--ink)!important;border-radius:12px!important}
.filter-bar{background:rgba(255,247,238,.92)!important;backdrop-filter:none!important}
.pitch-note,.how-to,.approach{background:var(--yellow-s)!important;color:var(--ink)!important;border-radius:0 10px 10px 0!important}
.badge-global,.status-major-only,.status-closed{background:var(--violet-s)!important;color:var(--violet)!important}
.show-more-btn{background:#fff!important;border:2px solid var(--ink)!important;color:var(--ink)!important;border-radius:999px!important;font-family:var(--font-m)!important}
.group-header-label{color:var(--violet)!important;font-family:var(--font-m)!important}

/* resources page specifics */
.res-hero{background:linear-gradient(180deg,rgba(16,10,28,.30),rgba(16,10,28,.30)),linear-gradient(120deg,#7A46E0,#2E7FD6)!important;border:2px solid var(--ink)!important;border-radius:20px!important;box-shadow:6px 6px 0 var(--ink)!important}
.res-hero *{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.32)}
.res-hero::after,.res-hero::before{display:none!important}
.res-search,.res-search-row input{background:#fff!important;border:2px solid var(--ink)!important;color:var(--ink)!important;border-radius:12px!important}
.res-search-row,.res-jump{background:var(--cream)!important}
.kit-title,.kit-toggle .kit-title{color:var(--ink)!important;font-family:var(--font-d)!important}
.kit-desc,.kit-count{color:var(--ink)!important}
.res-jump a,.res-jump .tab{background:#fff!important;border:2px solid var(--ink)!important;border-radius:999px!important;color:var(--ink)!important;font-family:var(--font-m)!important}
.res-jump a.active,.res-jump .active{background:var(--pink)!important;color:#fff!important}
/* drop the outer frame that boxed + clipped the doc cards */
.doc-list{border:none!important;overflow:visible!important;background:transparent!important;padding:0!important;gap:14px!important}
.doc-item,.read-item{border:2px solid var(--ink)!important;border-radius:14px!important;box-shadow:4px 4px 0 var(--ink)!important;margin-bottom:0!important}
/* candy tints so the cards pop */
.doc-item:nth-child(6n+1){background:var(--pink-s)!important}
.doc-item:nth-child(6n+2){background:var(--blue-s)!important}
.doc-item:nth-child(6n+3){background:var(--mint-s)!important}
.doc-item:nth-child(6n+4){background:var(--violet-s)!important}
.doc-item:nth-child(6n+5){background:var(--yellow-s)!important}
.doc-item:nth-child(6n+6){background:var(--orange-s)!important}
.doc-item,.read-item{cursor:pointer}
.doc-item:hover,.read-item:hover{background:var(--yellow-s)!important;transform:translate(-3px,-3px)!important;box-shadow:7px 7px 0 var(--pink)!important;border-color:var(--pink)!important}
.doc-item:hover .doc-title,.read-item:hover .read-title{color:var(--pink)!important}
/* reading-list rows: colour-blocked left edge so they pop without over-saturating */
.read-item{background:#fff!important}
.read-item:nth-child(4n+1){border-left:8px solid var(--pink)!important}
.read-item:nth-child(4n+2){border-left:8px solid var(--blue)!important}
.read-item:nth-child(4n+3){border-left:8px solid var(--mint)!important}
.read-item:nth-child(4n+4){border-left:8px solid var(--violet)!important}
/* pop the index numbers + arrows */
.doc-num,.read-num{color:var(--violet)!important;font-family:var(--font-m)!important;font-size:13px!important;font-weight:700!important}
.doc-arrow,.read-arrow{color:var(--pink)!important}
.res-section-label,.res-kicker{color:var(--violet)!important;font-family:var(--font-m)!important}

/* playbook page specifics */
#phase-nav{background:var(--cream)!important;border-bottom:2px solid var(--ink)!important}
.phase-tabs{background:transparent!important;border-bottom:none!important;padding:6px 0!important}
.phase-tab{background:#fff!important;border:2px solid var(--ink)!important;border-radius:999px!important;color:var(--ink)!important;font-family:var(--font-m)!important;margin:6px 3px!important;padding:6px 14px!important;height:auto!important;font-weight:700!important}
.phase-tab.active,.phase-tab[aria-selected="true"]{background:var(--ink)!important;color:#fff!important}
.pb-section-card{background:#fff!important;border:2px solid var(--ink)!important;border-radius:14px!important;box-shadow:4px 4px 0 var(--ink)!important}
.pb-phase-eyebrow{color:var(--violet)!important;font-family:var(--font-m)!important}
.pb-back-btn{background:#fff!important;border:2px solid var(--ink)!important;color:var(--ink)!important;border-radius:999px!important}
.income-bar-track{background:var(--cream2)!important}
#phase-context{background:transparent!important;border:none!important}
#phase-context *{background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important}
#search-input{background:#fff!important;border:2px solid var(--ink)!important;color:var(--ink)!important;border-radius:10px!important}

/* reusable candy header band (replaces old dark photo headers) */
.poppy-band{
  background:var(--g-candy)!important;border:2px solid var(--ink)!important;border-radius:22px!important;
  box-shadow:6px 6px 0 var(--ink)!important;padding:34px 32px!important;overflow:hidden!important;
}
.poppy-band,.poppy-band *{color:#fff!important}
.poppy-band .pg-label,.poppy-band .section-label{color:rgba(255,255,255,.92)!important}

/* dividers */
hr,.divider{border-color:var(--ink)!important;opacity:.15}

/* footer */
footer{background:var(--cream)!important;border-top:2px solid var(--ink)!important;color:var(--ink)!important}
footer *{color:var(--ink)!important}