.jhp{padding-block:56px 72px}
.jhp-head{max-width:760px;margin-bottom:28px}
.jhp-head h1{margin:10px 0 14px;font-size:clamp(42px,5vw,68px);max-width:none;text-wrap:balance}
.jhp-head .lead{margin:0;color:var(--joygi-muted)}
.jhp .faq-nav.jhp-nav{display:flex;flex-wrap:nowrap;gap:8px;border:0;margin:0 calc(-1*var(--joygi-gutter)) 8px;padding:6px var(--joygi-gutter) 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jhp-nav::-webkit-scrollbar{display:none}
.jhp .jhp-nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--joygi-line);border-radius:999px;background:var(--joygi-surface);color:var(--joygi-evergreen);font-size:14px;text-decoration:none;white-space:nowrap}
.jhp .jhp-nav a:hover{border-color:var(--joygi-control-line)}
.jhp .chapter{max-width:none;margin:0;padding-block:28px 8px;border-bottom:0;scroll-margin-top:24px}
.jhp .chapter h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:clamp(28px,3.2vw,38px)}
.jhp .chapter h2:before{content:"";flex:none;width:9px;height:13px;background:var(--joygi-gold);border-radius:50%/40% 40% 60% 60%;transform:rotate(12deg)}
.jhp details{border-bottom:1px solid var(--joygi-line);padding-block:0}
.jhp details:first-of-type{border-top:1px solid var(--joygi-line)}
.jhp summary{list-style:none;justify-content:space-between;gap:18px;min-height:56px;padding-block:14px;font-size:16px;font-weight:500;color:var(--joygi-evergreen)}
.jhp summary::-webkit-details-marker{display:none}
.jhp summary:after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--joygi-line);border-radius:50%;font-size:16px;font-weight:400;transition:transform var(--joygi-quick) var(--joygi-ease),background var(--joygi-quick)}
.jhp details[open]>summary:after{transform:rotate(45deg);background:var(--joygi-evergreen);border-color:var(--joygi-evergreen);color:var(--joygi-on-dark)}
.jhp summary:hover{text-decoration:underline;text-underline-offset:4px}
.jhp details p{max-width:62ch;margin:0;padding:0 0 18px;color:var(--joygi-text);font-size:15px;line-height:1.65}
.jhp-contact{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 16px;margin-top:40px;padding:26px 22px;border-radius:40px 10px 32px 10px;background:var(--joygi-evergreen);color:var(--joygi-on-dark)}
.jhp-contact h2{margin:0 0 4px;font-size:30px;color:var(--joygi-on-dark)}
.jhp-contact p{margin:0;color:var(--joygi-on-dark-muted);font-size:15px}
.jhp-seed{width:14px;height:20px;fill:var(--joygi-gold);align-self:start;margin-top:10px}
.jhp-contact .button{grid-column:1/-1;justify-self:start;background:var(--joygi-gold);border-color:var(--joygi-gold);color:var(--joygi-evergreen)}
.jhp-contact :focus-visible{outline:2px solid var(--joygi-on-dark);outline-offset:3px}
@media(min-width:1000px){
 .jhp-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;align-items:start}
 .jhp .faq-nav.jhp-nav{position:sticky;top:24px;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:26px 0 0;padding:0;overflow:visible;border:0}
 .jhp .jhp-nav a{min-height:44px;padding:0 0 0 16px;border:0;border-left:2px solid var(--joygi-line);border-radius:0;background:none;color:var(--joygi-muted)}
 .jhp .jhp-nav a:hover{color:var(--joygi-evergreen);border-left-color:var(--joygi-gold)}
 .jhp-chapters{max-width:760px}
 .jhp-contact{grid-template-columns:auto 1fr auto;padding:30px 32px}
 .jhp-contact .button{grid-column:auto;justify-self:end}
}
@media(prefers-reduced-motion:reduce){.jhp summary:after{transition:none}}