/* innerscript design tokens, from Mental Health Community.dc.html */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
}
a { text-decoration: none; color: var(--text); }
a:hover { color: var(--pink); }
h1, h2, h3, .serif { font-family: 'Playfair Display', serif; }

body.light {
  --bg:#fdf8f5; --bg2:#fce7ef; --border:#f0dde4;
  --text:#1a0812; --muted:#7a4858; --faint:#c4a0ae;
  --nav:#fdf8f5; --card:#fdf8f5;
  --score-bg:#f0fff4; --score-border:#c3e6cd; --score-txt:#2d8a4e;
  --rising-bg:#fff8e6; --rising-border:#f0d070; --rising-txt:#8a6000;
  --pink:#f3a5c0; --pink-h:#e97fa5; --on-pink:#4a0f28;
  --th-off-bg:#fce7ef; --th-off-c:#e8186e;
  --th-nv-bg:transparent; --th-nv-c:#9a6878;
}
body.dark {
  --bg:#0d1228; --bg2:#141a35; --border:#1e2a50;
  --text:#e8eaf6; --muted:#8892b8; --faint:#3d4870;
  --nav:#0d1228; --card:#141a35;
  --score-bg:rgba(72,199,142,.1); --score-border:rgba(72,199,142,.25); --score-txt:#48c78e;
  --rising-bg:rgba(251,191,36,.08); --rising-border:rgba(251,191,36,.25); --rising-txt:#fbbf24;
  --pink:#f7b8d0; --pink-h:#f090b3; --on-pink:#3a0a1e;
  --th-off-bg:transparent; --th-off-c:#3d4870;
  --th-nv-bg:#1e2a50; --th-nv-c:#8892b8;
}

.wrap { max-width: 1440px; margin: 0 auto; }
.divider { border-top: 1px solid var(--border); margin: 0 64px; }

/* nav */
.nav {
  display: flex; align-items: center; padding: 0 52px; height: 68px;
  background: var(--nav); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px);
}
.theme-btn {
  display: flex; align-items: center; justify-content: center; margin-right: 32px;
  width: 38px; height: 38px; flex-shrink: 0; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); transition: color .2s, border-color .2s;
}
.theme-btn:hover { color: var(--pink); border-color: var(--pink); }
.theme-btn .ic-sun { display: none; }
.theme-btn .ic-moon { display: block; }
body.dark .theme-btn .ic-sun { display: block; }
body.dark .theme-btn .ic-moon { display: none; }
.logo { display: flex; align-items: center; gap: 9px; margin-right: 48px; flex-shrink: 0; }
.logo img { border-radius: 50%; object-fit: cover; }
.logo span { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; letter-spacing: -.5px; }
.nav-links { display: flex; gap: 32px; flex: 1; align-items: center; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-actions .signin { color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 16px; }

/* buttons */
.btn {
  background: var(--pink); border: none; color: var(--on-pink); font-size: 14px; font-weight: 600;
  padding: 10px 24px; border-radius: 4px; cursor: pointer; font-family: 'DM Sans', sans-serif;
  display: inline-block; transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--pink-h); color: var(--on-pink); }
.btn-lg { font-size: 15px; padding: 15px 34px; }
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,24,110,.3); }
.link-pink { color: var(--pink); font-size: 15px; font-weight: 500; }

/* hero */
.hero { padding: 88px 64px 72px; }
.hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: end; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.eyebrow span { color: var(--pink); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.hero h1 { font-size: 74px; font-weight: 800; line-height: 1.02; margin: 0 0 24px; letter-spacing: -2px; }
.hero h1 em { color: var(--pink); font-style: italic; }
.hero p { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0 0 40px; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; align-items: center; }
.stats { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.stat { background: var(--bg2); border-radius: 6px; padding: 24px 28px; }
.stat .n { font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 800; letter-spacing: -1px; }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 4px; font-weight: 500; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats-row .stat { padding: 20px 22px; }
.stats-row .n { font-size: 30px; letter-spacing: -.8px; }
.stats-row .l { font-size: 12px; margin-top: 3px; }

/* topics */
.topics { padding: 52px 64px; display: flex; align-items: center; gap: 48px; }
.topics-label { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; border: 1.5px solid var(--border); color: var(--muted); font-size: 13px; padding: 8px 18px; border-radius: 4px; }
.chip:hover, .chip.active { border-color: var(--pink); color: var(--pink); }
.chip.active { border-color: var(--pink); color: var(--pink); font-weight: 600; }

/* sections */
.section { padding: 64px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 48px; }
.section-head h2 { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 0; }
.sorts { display: flex; gap: 6px; }
.sorts a { background: none; border: 1.5px solid var(--border); color: var(--faint); font-size: 12px; padding: 8px 16px; border-radius: 4px; }
.sorts a.active { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.sorts a:hover { border-color: var(--pink); color: var(--pink); }

/* badges */
.badge-kind { color: var(--pink); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.badge-kind.solid { background: var(--pink); color: var(--on-pink); padding: 4px 10px; border-radius: 3px; }
.score { background: var(--score-bg); border: 1px solid var(--score-border); color: var(--score-txt); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.rising { background: var(--rising-bg); border: 1px solid var(--rising-border); color: var(--rising-txt); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; }

/* featured post */
.featured { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 28px; transition: border-color .2s, box-shadow .2s; }
.featured:hover { border-color: var(--pink); box-shadow: 0 12px 48px rgba(232,24,110,.1); }
.featured .cover { background: var(--bg2); display: flex; align-items: center; justify-content: center; min-height: 300px; border-right: 1.5px solid var(--border); }
.featured .cover img { width: 100%; height: 100%; object-fit: cover; }
.featured .body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; background: var(--card); }
.featured .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.featured h2 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.5px; }
.featured p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 28px; }
.muted-sm { color: var(--faint); font-size: 12px; }

/* post grid */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); transition: border-color .2s, box-shadow .2s, transform .2s; display: block; }
.card:hover { border-color: var(--pink); box-shadow: 0 8px 32px rgba(232,24,110,.1); transform: translateY(-3px); }
.card .thumb { height: 140px; background: var(--bg2); display: flex; align-items: center; justify-content: center; border-bottom: 1.5px solid var(--border); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .inner { padding: 22px; }
.card .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card h3 { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.card p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 16px; }
.card .foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); }
.card .foot .who { color: var(--faint); font-size: 12px; }
.card .foot .react { display: flex; gap: 8px; color: var(--faint); font-size: 12px; }

/* avatar */
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--on-pink); flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }

/* modern card touches */
.tag-row { display: flex; align-items: center; gap: 8px; }
.cat-pill { background: var(--bg2); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .3px; padding: 3px 9px; border-radius: 10px; }
.card .thumb.empty { background: linear-gradient(135deg, var(--bg2), var(--pink) 220%); position: relative; }
.thumb-mark { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--pink); opacity: .55; }
.card-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-author .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .foot .react span { display: inline-flex; align-items: center; gap: 3px; }

/* how-it-works */
.how { padding: 88px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.how h2 { font-size: 48px; font-weight: 800; line-height: 1.06; margin: 0; letter-spacing: -1.5px; }
.how h2 em { color: var(--pink); font-style: italic; }
.how-steps { display: flex; flex-direction: column; gap: 28px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step .num { flex-shrink: 0; width: 38px; height: 38px; background: var(--bg2); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 800; color: var(--pink); }
.step .t { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.step .d { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* crisis */
.crisis { padding: 72px 64px; }
.crisis-box { background: var(--bg2); border-radius: 8px; padding: 52px 60px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.crisis-box h2 { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; }
.crisis-box p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* footer */
.footer { border-top: 1px solid var(--border); padding: 44px 64px; display: flex; align-items: center; justify-content: space-between; }
.footer-links { display: flex; gap: 28px; }
.footer-links a, .footer .copy { color: var(--faint); font-size: 13px; }

/* forms + content */
.content { padding: 72px 64px; max-width: 820px; }
.content h1 { font-size: 52px; font-weight: 800; letter-spacing: -1.5px; margin: 0 0 24px; }
.content h2 { font-size: 28px; margin: 40px 0 12px; }
.content p, .content li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.eyebrow-txt { color: var(--pink); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 18px; }
.form { max-width: 640px; padding: 64px; }
.form label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 6px; }
.form input, .form textarea, .form select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--card); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--pink); }
.form .errorlist { color: var(--pink); font-size: 13px; list-style: none; padding: 0; margin: 6px 0; }
.form .helptext { color: var(--faint); font-size: 12px; }
.messages { list-style: none; padding: 0; margin: 0 64px; }
.messages li { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 12px 18px; margin-top: 12px; font-size: 14px; }

/* toolkit / list cards */
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 32px; }
.tk { border: 1.5px solid var(--border); border-radius: 8px; padding: 26px; background: var(--card); }
.tk h3 { font-size: 18px; margin: 0 0 10px; }
.tk p { color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .hero-grid, .how, .featured, .crisis-box { grid-template-columns: 1fr; gap: 40px; }
  .post-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; }
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero, .section, .how, .crisis, .content, .form { padding-left: 20px; padding-right: 20px; }
  .divider, .messages { margin: 0 20px; }
}

/* --- Classes externalized from inline style="" attributes so CSP can drop
   style-src 'unsafe-inline'. Values copied verbatim from the templates. --- */
.h-display{font-family:'Playfair Display',serif;font-size:40px;font-weight:800;letter-spacing:-1px;margin:0 0 8px}
.mt-12{margin-top:12px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.ml-auto{margin-left:auto}
.ml-16{margin-left:16px}
.w-full{width:100%}
.fw-600{font-weight:600}
.fs-16{font-size:16px}
.text-pink{color:var(--pink)}
.bg-pink{background:var(--pink)}
.oauth-btn{display:block;text-align:center;background:var(--bg2);color:var(--text);border:1.5px solid var(--border);padding:13px}
.or-divider{text-align:center;color:var(--faint);font-size:12px;margin:20px 0}
.wrap-wide{max-width:1100px}
.stat-num{font-size:38px;font-weight:800;color:var(--pink)}
.profile-head{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.avatar-lg{width:72px;height:72px;font-size:28px}
.name-lg{font-size:36px;margin:0}
.list-row{padding:16px 0;border-bottom:1px solid var(--border)}
.post-title{font-size:18px;font-weight:700}
.sep-top{margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}
.between{display:flex;align-items:center;justify-content:space-between}
.card-react{display:flex;gap:12px;color:var(--faint);font-size:13px}
.author-row{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.author-row-lg{display:flex;align-items:center;gap:10px;margin:0 0 32px}
.post-hero{width:100%;border-radius:8px;margin-bottom:28px}
.post-body{white-space:pre-wrap;color:var(--text);font-size:17px;line-height:1.75}
.react-bar{display:flex;gap:14px;align-items:center;margin:36px 0;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.like-off{background:var(--bg2);color:var(--pink)}
.comment{display:flex;gap:12px;margin:20px 0}
.comment-body{color:var(--muted);font-size:15px;line-height:1.6;margin-top:4px;white-space:pre-wrap}
.comments-form{padding:24px 0 0;max-width:none}
.contact-list{list-style:none;padding:0;margin:0 0 8px;max-width:520px}
.contact-list li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border);font-size:16px}
.contact-label{flex:0 0 96px;color:var(--faint);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.contact-list a{color:var(--pink);font-weight:500}
.post-hidden{color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--border);border-radius:3px;padding:2px 8px;margin-left:8px}
.vis-form{display:inline}
.vis-btn{background:none;border:1.5px solid var(--border);color:var(--muted);font-size:12px;padding:5px 12px;border-radius:4px;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:8px}
.vis-btn:hover{border-color:var(--pink);color:var(--pink)}