/* Shared wellness components extend the existing navy / green identity. */
@media screen {
  .hero{position:relative;isolation:isolate}
  .hero::before{content:"";position:absolute;width:280px;height:280px;right:-120px;top:-110px;border-radius:50%;border:46px solid #d9eddf77;z-index:-1;animation:hero-breathe 4s ease-in-out}
  .heroCopy{animation:welcome-in .6s ease-out both}
  .demo-link{display:inline-block;border:0;border-bottom:1px dashed #7b9d8a;background:transparent;color:var(--navy);min-height:44px;margin-top:12px;padding:8px 0;font-size:.85rem;text-align:left}
  .toolkit-heading{padding:30px 28px 0}
  .toolkit-heading h2{font-size:1.5rem;margin:0 0 5px;color:var(--navy)}
  .toolkit-heading p{margin:0;color:var(--muted);font-size:.9rem}
  .quickGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .q{position:relative;text-align:left;align-items:flex-start;min-height:124px;background:#f8fbf9;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .q::after{content:"↗";position:absolute;right:12px;top:12px;color:#567768;font-size:16px}
  .q:nth-child(3n){background:#f1f7fa}
  .q:nth-child(4n){background:#fffbf2}
  .q b{font-size:.86rem;line-height:1.6;padding-right:5px}
  .q span{transition:transform .25s ease}
  .q:hover,.wellness-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px #133b2710;border-color:#9abca6}
  .q:hover span{transform:rotate(-8deg)}
  .section-symbol{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#edf6ef;font-size:25px;flex:none}
  .tool-form{margin-top:20px}
  .tool-result:not(:empty){border-top:1px solid var(--line);padding-top:22px;margin-top:22px;animation:welcome-in .25s ease-out}
  .tool-result h3{font-size:1.05rem;color:var(--navy)}
  .wellness-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .wellness-card{display:flex;flex-direction:column;align-items:flex-start;background:#f8fbf9;border:1px solid var(--line);border-radius:18px;padding:23px;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
  .wellness-card:nth-child(2n){background:#f3f8fc}
  .wellness-icon{display:grid;place-items:center;width:52px;height:52px;background:#fff;border:1px solid var(--line);border-radius:16px;font-size:28px;margin-bottom:14px}
  .wellness-card h3{font-size:1.05rem;margin:0 0 8px;color:var(--navy)}
  .wellness-card p{font-size:.9rem;color:var(--muted);margin:0 0 18px;line-height:1.8}
  .wellness-card button{margin-top:auto;font-size:.86rem}
  .routine-list{padding:0;list-style:none;counter-reset:steps}
  .routine-list li{counter-increment:steps;display:flex;align-items:flex-start;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}
  .routine-list li::before{content:counter(steps);display:grid;place-items:center;background:#edf6ef;color:var(--green);border-radius:50%;width:32px;height:32px;flex:none;font-weight:700}
  .routine-list li div{flex:1;min-width:0}
  .routine-list li>span{color:var(--green);font-size:.82rem;white-space:nowrap}
  .routine-list p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
  .snapshot-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .snapshot-metrics:empty{display:none}
  .progress-card{margin-bottom:20px;background:#f4f9f6}
  .progress-card h3{font-size:1.1rem;color:var(--navy)}
  .progress-card .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .progress-card .metric{background:#fff}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .variety-note{border-top:1px solid #b6d6c0;padding-top:12px;margin-top:14px;font-size:.85rem}
  .lesson-art{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,38px);min-height:160px;background:#edf6e7;border-radius:18px;margin-bottom:24px;overflow:hidden}
  .lesson-art span{display:grid;place-items:center;width:70px;height:70px;background:#fff;border-radius:50%;font-size:40px;animation:lesson-float 4s ease-in-out}
  .lesson-art span:nth-child(2){animation-delay:-1.2s}.lesson-art span:nth-child(3){animation-delay:-2.4s}
  .reveal-pending{opacity:.01}
  .revealed{animation:section-reveal .65s cubic-bezier(.2,.7,.2,1) both}
  .revealed>.head>div{animation:welcome-in .65s ease-out both}
  @keyframes section-reveal{from{opacity:0}to{opacity:1}}
  @keyframes welcome-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes hero-breathe{50%{transform:scale(1.08) translateY(8px)}}
  @keyframes lesson-float{50%{transform:translateY(-8px) rotate(3deg)}}
  @media(max-width:800px){.quickGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:560px){.toolkit-heading{padding:26px 16px 0}.quickGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.q{min-height:118px}.wellness-grid{grid-template-columns:1fr}.wellness-card{padding:20px}.routine-list li{flex-wrap:wrap}.routine-list li>span{margin-left:47px}.snapshot-metrics{grid-template-columns:1fr}.actions{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;transform:none}.revealed,.heroCopy,.hero::before,.lesson-art span{animation:none!important}.q:hover,.wellness-card:hover,.q:hover span{transform:none}}
}