/* Wellness tracker pages (app/tracker-page.php): hero, understanding, what helps, try this now, groups, reading,
   support and the other trackers. Uses the --wp-* tokens from wellness-page.css; the groups section is .mw. */

.tp-hero{padding:1.5rem 0 3rem;background:linear-gradient(180deg,var(--wp-hero),var(--wp-cream))}
.tp-back{display:inline-flex;align-items:center;gap:.35rem;font:500 .85rem/1 var(--body);color:var(--wp-accent)}
.tp-back svg{width:16px;height:16px}
.tp-back:hover{color:var(--wp-green)}
.tp-hero-row{display:grid;gap:1.5rem;margin-top:2rem}
.tp-ic{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:#fff;box-shadow:inset 0 -4px 8px rgba(0,0,0,.1),0 18px 30px -18px rgba(17,48,42,.6)}
.tp-ic svg{width:34px;height:34px}
.tp-hero h1{max-width:44rem;margin-top:.8rem;font:700 clamp(2rem,4.2vw,3.25rem)/1.08 var(--body);letter-spacing:-.035em;color:var(--wp-ink)}
.tp-lede{max-width:40rem;margin-top:1.1rem;font-size:1.05rem;line-height:1.6;color:var(--wp-text)}
.tp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.75rem}
.tp-cta{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:48px;padding:0 1.6rem;border-radius:999px;background:var(--wp-green);color:#fff;font:500 .95rem/1 var(--body);white-space:nowrap;transition:background .25s,box-shadow .25s}
.tp-cta:hover{background:#1d4a3f;box-shadow:0 10px 24px -12px rgba(17,48,42,.8)}
.tp-cta .ar{width:13px;height:13px;transition:transform .25s}
.tp-cta:hover .ar{transform:translate(2px,-2px)}
.tp-ghost{font:500 .95rem/1 var(--body);color:var(--wp-green);text-decoration:underline;text-underline-offset:4px}
.tp-ghost:hover{color:var(--wp-accent)}

.tp-sec{padding:3.5rem 0;background:var(--wp-cream)}
.tp-alt{background:#f4efe6}
.tp-sec.mw{background:linear-gradient(180deg,#eef3f2,#f7f9f9)}
.tp-h2,.tp-understand h2,.tp-try h2,.tp-support h2{font:700 clamp(1.5rem,2.4vw,2rem)/1.15 var(--body);letter-spacing:-.025em;color:var(--wp-ink)}
.tp-sub{margin:.5rem 0 1.75rem;max-width:40rem;color:var(--wp-muted)}

.tp-two{display:grid;gap:2rem}
.tp-understand p{max-width:38rem;margin-top:1rem;font-size:1rem;line-height:1.7;color:var(--wp-text)}
.tp-signs{align-self:start;padding:1.5rem 1.6rem;border-radius:1.25rem;background:#fff;box-shadow:0 24px 50px -36px rgba(17,48,42,.45)}
.tp-signs h3{font:600 1.05rem/1.3 var(--body);color:var(--wp-ink)}
.tp-signs ul{display:grid;gap:.7rem;margin-top:1rem}
.tp-signs li{position:relative;padding-left:1.4rem;font-size:.92rem;line-height:1.5;color:var(--wp-text)}
.tp-signs li::before{content:"";position:absolute;left:0;top:.5em;width:.55rem;height:.55rem;border-radius:50%;background:var(--wp-accent)}

.tp-helps{display:grid;gap:1rem;margin-top:1.5rem}
.tp-helps li{padding:1.4rem 1.4rem 1.5rem;border-radius:1.1rem;background:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tp-helps li:hover{transform:translateY(-3px);box-shadow:0 20px 36px -26px rgba(17,48,42,.5)}
.tp-num{font:600 .72rem/1 var(--mono);letter-spacing:.12em;color:var(--wp-accent)}
.tp-helps h3{margin-top:.7rem;font:600 1.02rem/1.3 var(--body);color:var(--wp-ink)}
.tp-helps p{margin-top:.45rem;font-size:.9rem;line-height:1.55;color:var(--wp-text)}

.tp-try{display:grid;gap:1.5rem;margin-top:2.5rem;padding:2rem 1.6rem;border-radius:1.5rem;background:var(--wp-green);color:#fff}
.tp-try .wp-eyebrow{color:#a9cdc9}
.tp-try h2{margin-top:.6rem;color:#fff}
.tp-try ol{display:grid;gap:.8rem;counter-reset:step}
.tp-try li{position:relative;padding-left:2.6rem;font-size:.98rem;line-height:1.55;color:#e4ece9;counter-increment:step}
.tp-try li::before{content:counter(step);position:absolute;left:0;top:-.1rem;display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:50%;background:rgba(255,255,255,.14);font:600 .85rem/1 var(--body);color:#fff}

.tp-reads{display:grid;gap:.75rem}
.tp-read{display:flex;align-items:center;gap:1rem;height:100%;padding:1rem 1.1rem;border:1px solid rgba(17,48,42,.1);border-radius:1rem;background:#fff;transition:border-color .2s,box-shadow .3s var(--ease)}
.tp-read:hover{border-color:var(--wp-accent);box-shadow:0 16px 30px -24px rgba(17,48,42,.55)}
.tp-read>span:nth-child(2){flex:1;display:grid;gap:.2rem;min-width:0}
.tp-read b{font:600 .98rem/1.3 var(--body);color:var(--wp-ink)}
.tp-read small{font-size:.8rem;color:var(--wp-muted)}
.tp-read-ic,.tp-more-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:.8rem;color:#fff}
.tp-read-ic svg,.tp-more-ic svg{width:22px;height:22px}
.tp-read .ar,.tp-more-card .ar{flex:none;width:14px;height:14px;color:var(--wp-accent)}

.tp-support{display:grid;gap:1.5rem;align-items:center;padding:2rem 1.6rem;border-radius:1.5rem;background:#e2e8dc}
.tp-support p{max-width:38rem;margin-top:.6rem;color:var(--wp-text)}
.tp-support .tp-cta{justify-self:start}
.tp-help{font-weight:600;color:var(--wp-green)!important}
.tp-crisis{padding:.6rem .85rem;border-radius:.75rem;background:#fbefec;color:#7d3328!important;font-size:.88rem}
.tp-note{margin-top:1rem;font-size:.8rem;color:var(--wp-muted)}
.tp-more-h{margin-top:3rem}
.tp-more{display:grid;gap:.75rem;margin-top:1.25rem}
.tp-more-card{display:flex;align-items:center;gap:1rem;height:100%;padding:1rem 1.1rem;border-radius:1rem;background:var(--wp-card);transition:background .2s,box-shadow .3s var(--ease)}
.tp-more-card:hover{background:#fff;box-shadow:0 16px 30px -24px rgba(17,48,42,.55)}
.tp-more-ic{border-radius:50%}
.tp-more-card>span:nth-child(2){flex:1;display:grid;gap:.25rem;min-width:0}
.tp-more-card b{font:600 .95rem/1.3 var(--body);color:var(--wp-ink)}
.tp-more-card small{font-size:.8rem;line-height:1.45;color:var(--wp-muted)}

@media (min-width:640px){
  .tp-helps,.tp-reads{grid-template-columns:repeat(2,1fr)}
  .tp-try{padding:2.5rem}
  .tp-support{padding:2.5rem}
}
@media (min-width:1024px){
  .tp-hero{padding:2rem 0 4rem}
  .tp-hero-row{grid-template-columns:auto 1fr;gap:2.5rem;align-items:start}
  .tp-ic{width:96px;height:96px}
  .tp-ic svg{width:44px;height:44px}
  .tp-sec{padding:5rem 0}
  .tp-two{grid-template-columns:1.3fr 1fr;gap:4rem}
  .tp-helps{grid-template-columns:repeat(3,1fr)}
  .tp-try{grid-template-columns:1fr 1.5fr;gap:3rem;padding:3rem}
  .tp-reads{grid-template-columns:repeat(4,1fr)}
  .tp-support{grid-template-columns:1fr auto;padding:3rem}
  .tp-more{grid-template-columns:repeat(3,1fr)}
}