/* Sober Woke sticker style for the inner pages (everything except home, about and join).
   Brand colours only: lime, soft lime, light lime wash, white, grey, black.
   Cards re-define the text variables locally so they stay readable in dark mode.
   Linked last in <head>, after footer-pop.css. Needs --pop-line from footer-pop.css. */

:root{
  --tint-d:#F5FBDA;--tint-e:#EDEDED;
  --hero-bg:linear-gradient(125deg,#FCFFEC 0%,#F5FBDA 52%,#ECF8B4 100%);
}
@media (prefers-color-scheme: dark){
  :root{--hero-bg:linear-gradient(125deg,#161B00 0%,#10140A 52%,#0E0E0E 100%)}
}

/* ---------- top strip of every inner page ---------- */
.intro{
  position:relative;overflow:hidden;padding-bottom:40px;background:var(--hero-bg);
  border-bottom:2px solid var(--pop-line);
}
.intro::after{
  content:"";position:absolute;right:max(14px,5%);bottom:14px;width:104px;height:84px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 84'%3E%3Cpath d='M32 4 C33.5 20 43 29.5 59 31 C43 32.5 33.5 42 32 58 C30.5 42 21 32.5 5 31 C21 29.5 30.5 20 32 4Z' fill='%23CFEE2E' stroke='%231A1A1A' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M78 36 C79 46 85 52 95 53 C85 54 79 60 78 70 C77 60 71 54 61 53 C71 52 77 46 78 36Z' fill='%23FFFFFF' stroke='%231A1A1A' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M84 8 C84.6 13 87 15.4 92 16 C87 16.6 84.6 19 84 24 C83.4 19 81 16.6 76 16 C81 15.4 83.4 13 84 8Z' fill='%231A1A1A'/%3E%3C/svg%3E") no-repeat right bottom/contain;
}
.free-tag,.premium-tag{
  background:#fff;color:#1A1A1A!important;border:2px solid #1A1A1A!important;box-shadow:2px 2px 0 #1A1A1A;
  transform:rotate(-2deg);font-weight:800;
}
.premium-tag{background:var(--accent)}

/* ---------- sticker buttons and fields ---------- */
main .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{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pop-line)}
main .field input,main .field textarea,main .field select{border:2px solid var(--pop-line);border-radius:12px}

/* ---------- cards: dark text on light fills, always ---------- */
.myth,.section-block,.help-box,.helpline,.story,.book-card,.tile,.watch-card,.recipe,
.contact-row,.results li,.paywall,.tier-card,.start-form,.milestone-chip,.counter-display{
  --ink:#1A1A1A;--ink-soft:#4A4A4A;--hairline:rgba(26,26,26,.2);--paper:#fff;--paper-shade:#F3F3F3;
  color:var(--ink);
}
.myth,.section-block,.helpline,.story,.book-card,.tile,.watch-card,.recipe,.contact-row,.results li,.paywall,.start-form{
  border:2px solid var(--pop-line);border-radius:20px;box-shadow:6px 6px 0 var(--pop-line);
}
.myth,.section-block,.helpline,.story,.tile,.watch-card,.contact-row,.results li{margin-bottom:26px;padding:28px 32px}
.myth:last-child,.helpline:last-child,.story:last-child,.tile:last-child{border-bottom:2px solid var(--pop-line)}
.contact-row:first-child{border-top:2px solid var(--pop-line)}

/* alternating brand fills */
.myth:nth-child(3n+1),.story:nth-child(3n+1),.helpline:nth-child(2n+1),.tile:nth-child(3n+2),.book-card:nth-child(2n+1),.contact-row:nth-child(3n+2),.section-block:nth-child(3n+1){background:#fff}
.myth:nth-child(3n+2),.story:nth-child(3n+2),.helpline:nth-child(2n+2),.tile:nth-child(3n+3),.book-card:nth-child(2n+2),.contact-row:nth-child(3n+3),.section-block:nth-child(3n+2){background:var(--tint-d)}
.myth:nth-child(3n+3),.story:nth-child(3n+3),.tile:nth-child(3n+1),.contact-row:nth-child(3n+1),.section-block:nth-child(3n+3){background:var(--tint-a)}
.tile:nth-child(3n+1){background:var(--accent)}
.watch-card,.results li{background:#fff}
.recipe:nth-child(2n+1){background:#fff}.recipe:nth-child(2n+2){background:var(--tint-d)}
.paywall,.start-form{background:var(--tint-d)}
.help-box{background:var(--accent);border:2px solid var(--pop-line);box-shadow:4px 4px 0 var(--pop-line)}
.help-box a.help-cta{background:#1A1A1A;color:var(--accent);border:2px solid #1A1A1A}

/* card details */
.myth-tag{background:#1A1A1A;color:var(--accent);padding:4px 11px;border-radius:999px}
.myth-more summary{border-bottom-color:#1A1A1A}
.section-num{border:2px solid #1A1A1A;box-shadow:2px 2px 0 #1A1A1A}
.section-block{padding:26px 28px}
.tier-card{border:2px solid var(--pop-line);border-radius:16px;box-shadow:4px 4px 0 var(--pop-line);background:#fff}
.tier-card.featured{
  background:#1A1A1A;border-color:var(--pop-line);
  --ink:#fff;--ink-soft:rgba(255,255,255,.82);--hairline:rgba(255,255,255,.25);color:#fff;
}
.milestone-chip{border:2px solid #1A1A1A;background:#fff;color:#1A1A1A;box-shadow:2px 2px 0 #1A1A1A}
.counter-display{
  border:2px solid var(--pop-line);border-radius:24px;box-shadow:6px 6px 0 var(--pop-line);
  background:var(--accent);padding:28px 24px;
}
.waitlist{border-top:2px dashed rgba(26,26,26,.3)}
.recipe-grid{gap:20px;background:none;border:none}
.recipe{padding:24px}
.tile,.helpline,.story,.book-card,.recipe,.myth{transition:transform .15s ease,box-shadow .15s ease}
a.tile:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--pop-line)}
.activity-list .a-num{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;
  background:var(--accent);color:#1B2400!important;border:2px solid #1A1A1A;font-weight:800;
}
.results li{box-shadow:4px 4px 0 var(--pop-line);padding:20px 24px;margin-bottom:18px}
.results li:last-child{border-bottom:2px solid var(--pop-line)}

/* ---------- phones ---------- */
@media (max-width:640px){
  .myth,.section-block,.helpline,.story,.tile,.watch-card,.contact-row{padding:20px 20px;margin-bottom:20px}
  .myth,.section-block,.helpline,.story,.tile,.watch-card,.contact-row,.book-card,.recipe{box-shadow:4px 4px 0 var(--pop-line)}
  .book-card,.recipe{padding:20px}
  .section-block{gap:14px}
  .intro{padding-bottom:84px}
  .intro::after{width:76px;height:62px}
  .section-block{flex-direction:column;gap:10px}
  .counter-display{padding:22px 16px}
}
@media (min-width:641px) and (max-width:900px){
  .intro{padding-bottom:96px}
}