.ihf-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ihf-gap, 48px);
}
.ihf-section *, .ihf-section *::before, .ihf-section *::after { box-sizing: border-box; }
.ihf-media-col { flex: 0 1 var(--ihf-img-width, 50%); min-width: 0; }
.ihf-content-col { flex: 0 1 var(--ihf-content-width, 50%); min-width: 0; }
.ihf-image-wrap { position: relative; width: 100%; line-height: 0; }
.ihf-image-wrap > img { display: block; width: 100%; height: auto; object-fit: contain; }
.ihf-hotspots { position: absolute; inset: 0; pointer-events: none; }
.ihf-hotspot {
  --size: clamp(34px, 4vw, 62px);
  position: absolute;
  left: var(--ihf-x);
  top: var(--ihf-y);
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  background: #b7d8ba;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .25s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}
.ihf-hotspot.is-active { background: #086c4a; transform: translate(-50%, -50%) scale(var(--ihf-active-scale, 1.04)); }
.ihf-hotspot:hover, .ihf-hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.08); outline: none; }
.ihf-hotspot:focus-visible { box-shadow: 0 0 0 4px rgba(8,108,74,.2); }
.ihf-hotspot-icon { position: relative; width: 18px; height: 18px; display: block; }
.ihf-hotspot-icon::before, .ihf-hotspot-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: #086c4a; transform: translate(-50%, -50%); transition: background .2s ease, transform .2s ease; }
.ihf-hotspot-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.ihf-hotspot.is-active .ihf-hotspot-icon::before, .ihf-hotspot.is-active .ihf-hotspot-icon::after { background: #fff; }
.ihf-hotspot.is-active .ihf-hotspot-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(1); }
.ihf-content-col { padding: 8px 0; }
.ihf-feature-list { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.ihf-feature { opacity: var(--ihf-inactive-opacity, .68); transition: opacity .28s ease, transform .28s ease; }
.ihf-feature.is-active { opacity: 1; }
.ihf-feature-trigger { appearance: none; border: 0; padding: 0; margin: 0; background: transparent; display: inline-flex; gap: 11px; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ihf-feature-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; margin-top: .55em; background: #b7d8ba; transition: background .2s ease, transform .2s ease; }
.ihf-feature.is-active .ihf-feature-dot { background: #086c4a; transform: scale(1.05); }
.ihf-feature-title { color: #086c4a; font-family: inherit; font-size: clamp(18px, 2vw, 27px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.ihf-feature:not(.is-active) .ihf-feature-title { color: #b6d8bb; }
.ihf-feature-description { max-width: 610px; padding-left: 21px; margin-top: 9px; color: #2a785d; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.45; }
.ihf-feature-description p { margin: 0; }
.ihf-feature:not(.is-active) .ihf-feature-description { color: #94bea3; }
.ihf-notice { padding: 18px; border: 1px dashed #ccc; background: #fafafa; }

@media (hover: hover) and (pointer: fine) {
  .ihf-hotspot:not(.is-active):hover { background: #b7d8ba; }
  .ihf-hotspot:hover ~ * { }
}

@media (max-width: 900px) {
  .ihf-section { padding: 0 18px; gap: 32px; }
  .ihf-feature-title { font-size: clamp(17px, 2.7vw, 23px); }
}

@media (max-width: 700px) {
  .ihf-section { flex-direction: column; align-items: stretch; gap: var(--ihf-mobile-gap, 28px); padding: 0 16px; }
  .ihf-media-col, .ihf-content-col { flex: 1 1 100%; width: 100%; }
  .ihf-media-col { max-width: var(--ihf-mobile-img-width, 100%); align-self: center; }
  .ihf-hotspot { --size: 42px; }
  .ihf-content-col { padding: 0; }
  .ihf-feature-list { gap: 20px; }
  .ihf-feature-title { font-size: 19px; line-height: 1.15; }
  .ihf-feature-description { font-size: 14px; padding-left: 21px; margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .ihf-section *, .ihf-section *::before, .ihf-section *::after { transition: none !important; }
}