/* /hunt-me/ — loaded only by page-hunt-me.hbs (via the "head" block in
   home-layout.hbs) after home.css and testimonials.css. The quote band
   (.tm-featured, .tm-pair, .tm-pull), the client strip, and the closing
   .tm-cta card come from testimonials.css; this file adds the rest. Tokens
   (--paper, --white, --line, --green, --ink, --grey, --muted, --serif, --mono)
   come from home.css. */

/* Hero: the pitch beside the Product Hunt kitty. */
.hm-hero{padding-bottom:24px}
.hm-hero h1{max-width:14ch;font-size:clamp(2.3rem,5.6vw,3.9rem)}
.hm-hero .lede{max-width:46ch}
.hm-kitty{margin:0;display:flex;justify-content:center}
.hm-kitty img{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 18px 30px rgba(21,23,26,.18))}
.btn.hm-btn-big{font-size:1.05rem;padding:16px 28px}

/* Stats: four big numbers. */
.hm-stats-wrap{padding:24px 0 8px}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.hm-stats li{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.hm-stats b{display:block;font-family:var(--sans);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;letter-spacing:-.04em;line-height:1;text-transform:none;color:var(--green);margin-bottom:10px}

/* Quote band: testimonials.css does the quotes; a centered title on top and
   a light button at the bottom. */
.hm-band-title{text-align:center;color:#fff;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0 auto 64px}
.hm-band-more{text-align:center;margin:64px 0 0}
.btn.hm-btn-light{background:none;color:#fff;border-color:#fff}
.btn.hm-btn-light:hover{background:#fff;color:#d4402f}

/* How I help: intro beside the heading, then three numbered service cards. */
.hm-help-head{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start;margin-bottom:36px}
.hm-help-head h2{margin:0}
.hm-services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hm-service{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px 26px}
.hm-num{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--green);margin-bottom:14px}
.hm-service h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2;margin:0 0 12px}
.hm-service p{font-family:var(--serif);font-size:.96rem;line-height:1.65;color:var(--grey);margin:0 0 14px}
.hm-service ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.hm-service li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.45}
.hm-service li::before{content:"";position:absolute;left:4px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.hm-service .hm-after{margin:16px 0 0;font-size:.92rem;color:var(--muted)}

/* How it works: three numbered steps and a big button. */
.hm-steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.hm-steps li{counter-increment:step;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;font-family:var(--serif);font-size:.98rem;line-height:1.6;color:var(--grey)}
.hm-steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--sans);font-weight:700;margin-bottom:18px}
.hm-steps b{display:block;font-family:var(--sans);font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.hm-steps-cta{margin-top:32px;justify-content:center}

/* FAQ: native disclosure widgets, so it works without JS and in find-in-page. */
.hm-faq{border-top:1px solid var(--line)}
.hm-faq details{border-bottom:1px solid var(--line)}
.hm-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:"+";flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;font-weight:500;font-size:1.2rem;color:var(--green);background:var(--white);transition:transform .2s}
.hm-faq details[open] summary::after{transform:rotate(45deg)}
.hm-faq summary:hover{color:var(--green)}
.hm-faq details p{font-family:var(--serif);color:var(--grey);line-height:1.75;max-width:64ch;margin:0 0 16px}
.hm-faq details p:last-child{margin-bottom:22px}
.hm-faq a{color:var(--green);text-underline-offset:3px}

/* Closing card: a quiet text link under the big button. */
.hm-close{padding-top:8px}
.hm-close-link{color:#d8d5cb;font-size:.95rem;text-underline-offset:3px}
.hm-close-link:hover{color:#fff}
.tm-cta .cta-actions{gap:16px}

@media (max-width:900px){
  .hm-kitty{order:-1}
  .hm-kitty img{max-width:260px}
  .hm-stats{grid-template-columns:repeat(2,1fr)}
  .hm-help-head{grid-template-columns:1fr;gap:16px}
  .hm-services,.hm-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hm-kitty img{max-width:200px}
  .hm-band-title{margin-bottom:44px}
  .hm-band-more{margin-top:44px}
  .hm-hero .cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hm-faq summary::after{transition:none}
}