/* Sober Woke "pop" style: stickers, outlines, offset shadows, pastel colour.
   Linked at the END of <head> on index, join and about so it wins over the page's own CSS.
   Outline and shadow colour flips in dark mode via --pop-line. Pastel cards keep fixed dark text. */

:root{
  --pop-line:#1A1A1A;
  --tint-a:#E4F58A;--tint-b:#FFFFFF;--tint-c:#1A1A1A;--tint-d:#F5FBDA;--tint-e:#EDEDED;
  --hero-bg:linear-gradient(125deg,#FCFFEC 0%,#F5FBDA 52%,#ECF8B4 100%);
}
@media (prefers-color-scheme: dark){
  :root{--pop-line:#F2F2F2;--hero-bg:linear-gradient(125deg,#161B00 0%,#10140A 52%,#0E0E0E 100%)}
}

/* ---------- sticker buttons (page content only, the header keeps its clean pill) ---------- */
main .btn,main .tier-btn{
  border:2px solid var(--pop-line);box-shadow:4px 4px 0 var(--pop-line);color:var(--on-accent);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
main .btn-outline{background:var(--paper);color:var(--ink)}
main .btn:hover,main .tier-btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pop-line)}

/* ---------- sparkles ---------- */
.spark{position:absolute;fill:var(--accent);stroke:var(--pop-line);stroke-width:1.2;stroke-linejoin:round;overflow:visible;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  @keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(14deg)}}
  .spark.tw{animation:twinkle 3.6s ease-in-out infinite}
  .spark.tw2{animation:twinkle 4.4s ease-in-out .9s infinite}
}

/* ---------- homepage extras ---------- */
#founder .founder-photo{border:3px solid var(--pop-line);box-shadow:5px 5px 0 var(--pop-line)}
#join .newsletter{background:var(--tint-a);color:#1A1A1A;border:2px solid var(--pop-line);border-radius:16px;box-shadow:5px 5px 0 var(--pop-line)}
#join .newsletter p{color:rgba(26,26,26,.8)}
#join .newsletter-form input{background:#fff;color:#1A1A1A;border:2px solid #1A1A1A;border-radius:999px}

/* ---------- 90s band with the friends sticker ---------- */
.nineties{
  position:relative;overflow:hidden;padding:0;color:#1A1A1A;background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M24 60 q10 -16 20 0 t20 0 t20 0' fill='none' stroke='%23B6D41B' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M186 170 l22 38 h-44 z' fill='none' stroke='%23B6D41B' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='70' cy='196' r='8' fill='%23B6D41B'/%3E%3Cpath d='M206 46 v26 M193 59 h26' stroke='%23B6D41B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.nineties::before,.nineties::after{
  content:"";display:block;height:14px;
  background:conic-gradient(#1A1A1A 25%,#fff 0 50%,#1A1A1A 0 75%,#fff 0) 0 0/14px 14px;
}
.nineties .n-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-top:54px;padding-bottom:54px}
.wordart{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(34px,5.2vw,58px);line-height:1.04;max-width:12ch;
  color:#fff;-webkit-text-stroke:3px #1A1A1A;paint-order:stroke fill;text-shadow:5px 5px 0 #1A1A1A;
  transform:rotate(-2.5deg);margin:0 0 34px;letter-spacing:-.01em;
}
.wordart .wa-hi{color:#fff;background:#1A1A1A;-webkit-text-stroke:0;text-shadow:none;padding:0 .14em;border-radius:8px;display:inline-block;transform:rotate(2deg)}
.n-text p{font-size:17px;font-weight:600;max-width:34ch;margin:0 0 26px;color:#1A1A1A;background:#fff;border:2px solid #1A1A1A;border-radius:14px;padding:12px 16px;box-shadow:4px 4px 0 #1A1A1A}
.nineties .n-btn{background:#fff;color:#1A1A1A}
.n-photo{position:relative;display:flex;justify-content:center;padding:20px 10px}
.n-sticker{width:min(300px,100%);height:auto;filter:drop-shadow(8px 8px 0 #1A1A1A);transform:rotate(3deg)}
.n-bubble{
  position:absolute;top:2%;left:-4%;z-index:2;max-width:170px;background:#fff;color:#1A1A1A;
  border:3px solid #1A1A1A;border-radius:18px;padding:10px 14px;font-weight:800;font-size:15px;line-height:1.25;
  box-shadow:4px 4px 0 #1A1A1A;transform:rotate(-4deg);
}
.n-bubble::after{
  content:"";position:absolute;right:26px;bottom:-13px;width:20px;height:20px;background:#fff;
  border-right:3px solid #1A1A1A;border-bottom:3px solid #1A1A1A;transform:rotate(45deg) skew(10deg,10deg);
}
.n-tag{
  position:absolute;bottom:6%;right:-2%;z-index:2;background:#1A1A1A;color:var(--accent);border:3px solid #fff;
  padding:6px 12px;font-weight:800;font-size:12px;letter-spacing:.06em;box-shadow:4px 4px 0 #1A1A1A;transform:rotate(6deg);
}
.nineties .spark.n1{width:44px;height:44px;top:2%;right:6%;fill:#fff}
.nineties .spark.n2{width:30px;height:30px;bottom:24%;left:2%;fill:#1A1A1A}
.nineties .spark.n3{width:36px;height:36px;top:38%;right:-3%;fill:#fff}
@media (max-width:760px){
  .nineties .n-grid{grid-template-columns:1fr;gap:4px;padding-top:34px;padding-bottom:34px}
  .wordart{font-size:clamp(30px,9vw,40px);-webkit-text-stroke:2px #1A1A1A;text-shadow:3px 3px 0 #1A1A1A;margin-bottom:20px;max-width:11ch}
  .n-text p{font-size:15px;margin-bottom:18px;padding:10px 13px;box-shadow:3px 3px 0 #1A1A1A}
  .n-photo{justify-self:center;padding:50px 24px 10px}
  .n-sticker{width:190px;filter:drop-shadow(6px 6px 0 #1A1A1A)}
  .n-bubble{font-size:12px;padding:7px 10px;max-width:118px;left:auto;right:60%;top:-4px;border-width:2px;box-shadow:3px 3px 0 #1A1A1A}
  .n-bubble::after{right:14px;bottom:-11px;width:16px;height:16px;border-width:2px}
  .n-tag{font-size:10px;padding:5px 8px;border-width:2px;box-shadow:3px 3px 0 #1A1A1A;right:-34%;bottom:8%}
}
@media (max-width:560px){
  .n-text p{display:none}
  .wordart{margin-bottom:24px}
}

/* ---------- Join page ---------- */
.join-hero{background:var(--hero-bg);position:relative;overflow:hidden;padding-bottom:28px}
.join-hero .wrap{position:relative}
.join-hero .spark.j1{width:46px;height:46px;top:-6px;right:8%}
.join-hero .spark.j2{width:28px;height:28px;top:88px;right:16%;fill:#fff}
.join-hero .spark.j3{width:34px;height:34px;bottom:-10px;right:3%;fill:#1A1A1A}
.tier{border:2px solid var(--pop-line);border-radius:18px;box-shadow:5px 5px 0 var(--pop-line);color:#1A1A1A}
.tier:nth-child(1){background:#fff}
.tier:nth-child(2){background:var(--tint-a)}
.tier-featured{background:#1A1A1A!important;color:#fff;border:2px solid var(--pop-line)}
.tier.tier-featured h3{color:#fff}
.tier.tier-featured .tier-price{color:var(--accent)}
.tier.tier-featured .tier-note,.tier.tier-featured .tier-price span{color:rgba(255,255,255,.85)}
.tier.tier-featured .tier-btn{background:var(--accent);color:#1B2400}
.tier .tier-note,.tier-price span{color:rgba(26,26,26,.75)}
.tier-badge{background:#fff;color:#1A1A1A;border:2px solid #1A1A1A;box-shadow:2px 2px 0 #1A1A1A;transform:translateX(-50%) rotate(-3deg);top:-15px}
.tier .tier-btn{background:#fff;color:#1A1A1A}
@media (min-width:721px){.tier-featured{transform:scale(1.03)}}
.gets-grid > div{border:2px solid var(--pop-line);border-radius:16px;box-shadow:4px 4px 0 var(--pop-line);padding:22px 24px;color:#1A1A1A}
.gets-grid > div:nth-child(1){background:var(--tint-a)}
.gets-grid > div:nth-child(2){background:#fff}
.gets ul,.gets .soon{color:rgba(26,26,26,.85)}
.gets ul a{color:#1A1A1A}
.join-walkthrough{background:var(--tint-d);color:#1A1A1A;border:2px solid var(--pop-line);border-radius:16px;box-shadow:5px 5px 0 var(--pop-line)}
.join-walkthrough li{color:rgba(26,26,26,.85)}
.join-walkthrough li strong{color:#1A1A1A}

/* ---------- About page ---------- */
#founder{background:var(--hero-bg)}
.founder{position:relative}
.founder .founder-photo{border:3px solid var(--pop-line);border-radius:18px;box-shadow:8px 8px 0 var(--pop-line);transform:rotate(-2deg)}
.founder .spark.f1{width:44px;height:44px;top:-18px;left:230px}
.founder .spark.f2{width:28px;height:28px;bottom:14%;left:262px;fill:#fff}
.founder .spark.f3{width:34px;height:34px;top:40%;left:-14px;fill:#1A1A1A}
.founder-text h1{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:6px;text-underline-offset:7px;text-decoration-skip-ink:none}
.media-card img{border:2px solid var(--pop-line);border-radius:12px;box-shadow:4px 4px 0 var(--pop-line)}
.media-card:nth-child(odd) img{transform:rotate(-1.2deg)}
.media-card:nth-child(even) img{transform:rotate(1.2deg)}
.stat-grid{gap:16px;border:none}
.stat{border:2px solid var(--pop-line);border-radius:16px;box-shadow:4px 4px 0 var(--pop-line);color:#1A1A1A}
.stat:nth-child(4n+1){background:var(--accent)}
.stat:nth-child(4n+2){background:#fff}
.stat:nth-child(4n+3){background:var(--tint-a)}
.stat:nth-child(4n+4){background:#1A1A1A;color:#fff}
.stat:nth-child(4n+4) .label,.stat:nth-child(4n+4) .stat-source{color:rgba(255,255,255,.82)}
.stat:nth-child(4n+4) .stat-source{border-top-color:rgba(255,255,255,.3)}
.stat:nth-child(4n+4) .num{color:var(--accent)}
.stat .label,.stat-source{color:rgba(26,26,26,.8)}
.stat-source{border-top:1px solid rgba(26,26,26,.25)}
.stat-source:hover{color:#1A1A1A}
@media (max-width:720px){
  .tier{box-shadow:4px 4px 0 var(--pop-line)}
  .founder .spark.f1{left:auto;right:18%}
  .founder .spark.f2,.founder .spark.f3{display:none}
  .founder .founder-photo{box-shadow:6px 6px 0 var(--pop-line)}
}