/* Shared template for problem-specific pages */

.p-hero {
  padding: 180px 0 80px;
  position: relative;
  overflow: hidden;
}
.p-hero .label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--mw-border);
}
.p-hero h1 {
  font-size: clamp(52px, 7.5vw, 112px);
  line-height: .95;
  max-width: 14ch;
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.p-hero h1 em { font-style: italic; }
.p-hero .lead { max-width: 52ch; margin-top: 28px; }

.p-feel {
  padding: 80px 0;
  border-top: 1px solid var(--mw-border);
  border-bottom: 1px solid var(--mw-border);
}
.p-feel .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.p-feel h2 { font-size: clamp(30px, 4vw, 48px); max-width: 18ch; font-family: var(--font-display); font-weight: 300; }
.p-feel ul { list-style: none; padding: 0; }
.p-feel li {
  padding: 16px 0;
  border-bottom: 1px dashed rgba(43,49,66,.6);
  font-size: 17px; color: var(--mw-text);
  display: flex; gap: 12px; align-items: flex-start;
}
.p-feel li::before { content: "·"; color: var(--mw-tension); }
@media (max-width: 900px) { .p-feel .grid { grid-template-columns: 1fr; } }

.p-tried {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(255,107,107,.04), transparent);
}
.p-tried .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.p-tried h2 { font-size: clamp(28px, 3.6vw, 44px); max-width: 22ch; }
.p-tried p { font-size: 17px; color: var(--mw-text); max-width: 54ch; }
@media (max-width: 900px) { .p-tried .grid { grid-template-columns: 1fr; } }

.p-enter {
  padding: 100px 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(60,242,214,.08), transparent 60%);
}
.p-enter h2 { font-size: clamp(32px, 4.2vw, 60px); max-width: 18ch; font-family: var(--font-display); font-weight: 300; }
.p-enter h2 em { color: var(--mw-relief); font-style: italic; }

.p-how {
  padding: 80px 0;
  border-top: 1px solid var(--mw-border);
}
.p-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-how-card { padding: 32px; border: 1px solid var(--mw-border); border-radius: 18px; background: var(--mw-surface); }
.p-how-card .n { font-family: var(--font-display); font-size: 36px; color: var(--mw-primary); line-height: 1; font-weight: 300; }
.p-how-card h3 { margin-top: 12px; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.p-how-card p { margin-top: 10px; font-size: 14px; color: var(--mw-text); line-height: 1.55; }
@media (max-width: 900px) { .p-how-grid { grid-template-columns: 1fr; } }

.p-cta {
  padding: 80px 64px;
  margin-top: 40px;
  border-radius: 32px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(60,242,214,.1), transparent 60%),
    #0a0d16;
  border: 1px solid rgba(124,92,255,.3);
}
.p-cta h2 { font-size: clamp(28px, 3.8vw, 48px); max-width: 22ch; font-family: var(--font-display); font-weight: 300; }
.p-cta h2 em { color: var(--mw-relief); font-style: italic; }

/* Problem color theme hooks */
.theme-heartbreak { --accent: var(--mw-energy); }
.theme-grief      { --accent: var(--mw-primary); }
.theme-shame      { --accent: var(--mw-tension); }
.theme-fear       { --accent: var(--mw-secondary); }
.theme-conflict   { --accent: var(--mw-tension); }
.theme-beliefs    { --accent: var(--mw-primary); }
.theme-dependency { --accent: var(--mw-energy); }
.theme-overwhelm  { --accent: var(--mw-secondary); }
.theme-rejection  { --accent: var(--mw-tension); }
.theme-jealousy   { --accent: var(--mw-energy); }
.theme-self-doubt { --accent: var(--mw-primary); }