.guide-visual {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(11rem, 1fr);
  align-items: center;
  max-width: 49rem;
  margin: 1.25rem 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: .75rem;
  break-inside: avoid;
}

.guide-visual picture { display:block; min-width:0; }
.guide-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-visual figcaption {
  display: grid;
  gap: .45rem;
  padding: clamp(1rem, 2.3vw, 1.6rem);
  color: var(--secondary);
  line-height: 1.5;
  font-size: .92rem;
}

.guide-visual figcaption strong {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.calc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .85fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.home-hero-figure {
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--blue-mid);
  border-radius: .75rem;
  background: var(--blue-soft);
}

.home-hero-figure figcaption {
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -.025em;
  line-height: 1.22;
}

.home-hero-figure svg {
  display: block;
  width: min(100%, 25rem);
  height: auto;
  margin: .5rem auto;
}

.home-hero-figure p {
  margin: 0;
  color: var(--secondary);
  line-height: 1.5;
  font-size: .875rem;
}

@media (max-width: 800px) {
  .calc-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
  }

  .home-hero-figure {
    max-width: 35rem;
  }
}

@media print {
  .calc-intro {
    display: block;
  }

  .home-hero-figure {
    display: none;
  }
}

@media (max-width: 640px) {
  .guide-visual {
    grid-template-columns: minmax(0, 1fr);
    max-width: 28rem;
  }
}