/* HOPPT topic landing additions. Scoped to the existing Special Battery layout. */
.subject .hoppt-focus,
.subject .hoppt-engineering,
.subject .hoppt-faq,
.subject .hoppt-focus-cta { scroll-margin-top: 116px; }
.subject .hoppt-focus { padding: clamp(56px, 6vw, 100px) 0; background: #f5f8fa; }
.subject .hoppt-focus .content,
.subject .hoppt-engineering .content,
.subject .hoppt-faq .content,
.subject .hoppt-focus-cta .content { width: min(100% - 40px, 1560px); margin-inline: auto; }
.subject .hoppt-focus__eyebrow,
.subject .hoppt-focus__card-eyebrow,
.subject .hoppt-focus-cta__eyebrow { margin: 0 0 10px; color: #078c71; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.subject .hoppt-focus h2,
.subject .hoppt-engineering h2,
.subject .hoppt-faq h2,
.subject .hoppt-focus-cta h2 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.subject .hoppt-focus__intro,
.subject .hoppt-engineering__intro { max-width: 860px; color: #52615e; line-height: 1.7; }
.subject .hoppt-focus__intro p { margin: 0; }
.subject .hoppt-focus__jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 34px; }
.subject .hoppt-focus__jump a { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 16px; border: 1px solid #b8dcd2; border-radius: 999px; background: #fff; color: #087d65; font-size: 14px; line-height: 1.3; text-decoration: none; transition: background .2s, color .2s; }
.subject .hoppt-focus__jump a:hover,
.subject .hoppt-focus__jump a:focus-visible { background: #0ca37d; color: #fff; }
.subject .hoppt-focus__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.subject .hoppt-focus__card { overflow: hidden; min-width: 0; background: #fff; border: 1px solid #e2eeeb; border-radius: 16px; box-shadow: 0 12px 32px rgba(8, 61, 49, .06); scroll-margin-top: 130px; }
.subject .hoppt-focus__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #e7f0ed; }
.subject .hoppt-focus__media img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; }
.subject .hoppt-focus__image-note { position: absolute; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 4px; background: rgba(3, 34, 29, .78); color: #fff; font-size: 11px; }
.subject .hoppt-focus__body { display: flex; flex-direction: column; align-items: flex-start; min-height: 290px; padding: clamp(22px, 3vw, 34px); }
.subject .hoppt-focus__body h3 { margin: 0 0 12px; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; color: #15372f; }
.subject .hoppt-focus__description { margin: 0 0 20px; color: #52615e; line-height: 1.65; }
.subject .hoppt-focus__points { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.subject .hoppt-focus__points li { position: relative; padding-left: 20px; color: #263f39; line-height: 1.45; }
.subject .hoppt-focus__points li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: #0ca37d; }
.subject .hoppt-focus__link { margin-top: auto; color: #087d65; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.subject .hoppt-focus__link:hover,
.subject .hoppt-focus__link:focus-visible { color: #043e33; }
.subject .hoppt-engineering { padding: clamp(56px, 6vw, 92px) 0; background: #fff; }
.subject .hoppt-engineering__intro { margin: 0 0 32px; }
.subject .hoppt-engineering__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.subject .hoppt-engineering__item { min-width: 0; padding: 26px; border: 1px solid #dceae6; border-top: 3px solid #0ca37d; border-radius: 8px; background: #f8fbfa; }
.subject .hoppt-engineering__number { display: block; margin-bottom: 26px; color: #099c79; font-size: 14px; font-weight: 700; }
.subject .hoppt-engineering__item h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; color: #15372f; }
.subject .hoppt-engineering__item p { margin: 0; color: #52615e; line-height: 1.6; }
.subject .hoppt-faq { padding: clamp(56px, 6vw, 92px) 0; background: #f5f8fa; }
.subject .hoppt-faq__list { max-width: 980px; margin-top: 28px; }
.subject .hoppt-faq__item { margin-bottom: 10px; padding: 0 22px; border: 1px solid #dceae6; border-radius: 8px; background: #fff; }
.subject .hoppt-faq__item summary { position: relative; padding: 20px 26px 20px 0; color: #183c32; font-size: 17px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.subject .hoppt-faq__item summary::-webkit-details-marker { display: none; }
.subject .hoppt-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 17px; color: #0ca37d; font-size: 24px; font-weight: 400; }
.subject .hoppt-faq__item[open] summary::after { content: "−"; }
.subject .hoppt-faq__item p { margin: 0; padding: 0 0 22px; color: #52615e; line-height: 1.7; }
.subject .hoppt-focus-cta { padding: clamp(48px, 5vw, 76px) 0; background: #086e59; color: #fff; }
.subject .hoppt-focus-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 38px; }
.subject .hoppt-focus-cta h2 { color: #fff; }
.subject .hoppt-focus-cta p { max-width: 820px; margin: 0; color: #e4f8f1; line-height: 1.65; }
.subject .hoppt-focus-cta__eyebrow { color: #b7f4dc !important; }
.subject .hoppt-focus-cta__action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.subject .hoppt-focus-cta__action a { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: #fff; color: #086e59; font-weight: 700; text-decoration: none; }
.subject .hoppt-focus-cta__action a:hover,
.subject .hoppt-focus-cta__action a:focus-visible { background: #dff7ed; }
.subject .hoppt-focus-cta__action small { color: #d5f0e6; font-size: 12px; }
@media (max-width: 1023px) {
    .subject .hoppt-engineering__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subject .hoppt-focus-cta__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767px) {
    .subject .hoppt-focus .content,
    .subject .hoppt-engineering .content,
    .subject .hoppt-faq .content,
    .subject .hoppt-focus-cta .content { width: min(100% - 30px, 1560px); padding: 0; }
    .subject .hoppt-focus__grid,
    .subject .hoppt-engineering__grid { grid-template-columns: 1fr; }
    .subject .hoppt-focus__jump { margin: 22px 0 26px; gap: 8px; }
    .subject .hoppt-focus__jump a { font-size: 13px; }
    .subject .hoppt-focus__body { min-height: 0; padding: 22px; }
    .subject .hoppt-engineering__item { padding: 22px; }
    .subject .hoppt-focus-cta__action { width: 100%; }
    .subject .hoppt-focus-cta__action a { width: 100%; }
}