/* Explanation and video share a panel, as in Money Forward's AI overview.
   Existing network figures and labels form a readable desktop summary. */
.offline-page .sf-movie-screen { background: #0636d3; }
.offline-page .sf-movie-caption {
  position: absolute; top: 18px; left: 22px; margin: 0;
  color: #fff; font-size: 16px; font-weight: 650; line-height: 1.5;
  pointer-events: none;
}
.offline-page .sf-movie-play {
  top: auto; bottom: 18px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); min-height: 54px;
  padding: 12px 24px; font-size: 18px; line-height: 1.5;
  border: 0; box-shadow: 0 4px 20px #001a6c26;
}
.offline-page .sf-intro-voice, .offline-page .sf-intro-effect { display: block; }
.offline-page .sf-intro-voice { margin-bottom: 12px; }
.offline-page .sf-intro-voice > span, .offline-page .sf-intro-term { display: inline-block; white-space: nowrap; }
.offline-page .sf-intro-line { display: block; }
.offline-page .sf-intro-effect em { font-style: normal; font-weight: 650; color: #215de8; }
@media (min-width: 901px) {
  .offline-page .sf-intro-video { padding-block: 48px; }
  .offline-page .sf-intro-video > .sf-wrap {
    width: min(1120px, calc(100% - 80px)); max-width: 1120px;
    display: grid; grid-template-columns: 1fr 1.12fr; gap: 40px;
    align-items: center; padding: 32px; border: 1px solid #dce5f7;
    border-radius: 16px; background: #f5f8ff;
  }
  .offline-page .sf-intro-video .sf-intro-head h2 {
    text-align: left; font-size: 34px; line-height: 1.5; margin: 0 0 20px;
  }
  .offline-page .sf-intro-video .sf-intro-head > p {
    max-width: none; font-size: 17px; line-height: 1.85; text-align: left; margin: 0;
  }
  .offline-page .sf-intro-video .sf-movie-preview { margin: 0; min-width: 0; }
  .offline-page .sf-intro-video .sf-movie-screen { border-radius: 10px; }
  .offline-page .sf-network-v43 { padding-block: 48px; }
  .offline-page .sf-network-v43 > .sf-wrap {
    display: block; width: min(1120px, calc(100% - 80px)); max-width: 1120px;
  }
  .offline-page .sf-network-v43 h2 {
    text-align: left; margin: 0 0 28px; font-size: 32px; line-height: 1.5;
  }
  .offline-page .sf-network-v43 h2 > span { display: inline; }
  .offline-page .sf-network-v43 .sf-network-diagram {
    display: grid; grid-template-columns: 260px repeat(3, minmax(0, 1fr));
    gap: 18px; width: 100%; max-width: none; aspect-ratio: auto;
    margin: 0; background: transparent;
  }
  .offline-page .sf-network-v43 .sf-network-lines { display: none; }
  .offline-page .sf-network-v43 .sf-network-scale {
    position: static; transform: none; grid-column: 1; grid-row: 1 / span 2;
    width: 100%; min-height: 330px; aspect-ratio: auto;
    padding: 24px 18px; border: 1px solid #dce5f7; border-radius: 12px;
    box-shadow: none; background: #fff;
  }
  .offline-page .sf-network-v43 .sf-network-scale-number strong { font-size: 72px; }
  .offline-page .sf-network-v43 .sf-network-scale-number span { font-size: 18px; margin-top: 10px; }
  .offline-page .sf-network-v43 .sf-network-scale .sf-network-scale-areas {
    width: 100%; font-size: 17px; padding-top: 20px; margin-top: 20px;
  }
  .offline-page .sf-network-v43 .sf-network-area-label { display: block; font-size: 16px; margin-bottom: 10px; }
  .offline-page .sf-network-v43 .sf-network-scale-areas strong { font-size: 52px; }
  .offline-page .sf-network-v43 .sf-network-node {
    position: static; transform: none; width: auto; aspect-ratio: auto; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 16px 12px; border: 1px solid #dce5f7;
    border-radius: 12px; background: #fff; min-width: 0;
  }
  .offline-page .sf-network-v43 .sf-network-portrait {
    position: relative; inset: auto; width: 100px; height: 100px; flex: 0 0 100px;
  }
  .offline-page .sf-network-v43 .sf-network-node figcaption {
    position: static; transform: none; padding: 0; font-size: 18px; line-height: 1.5;
    font-weight: 650; background: transparent; white-space: normal; text-align: center;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .offline-page .sf-intro-video > .sf-wrap { gap: 28px; padding: 26px; }
  .offline-page .sf-intro-video .sf-intro-head h2 { font-size: 30px; }
  .offline-page .sf-network-v43 .sf-network-diagram { grid-template-columns: 210px repeat(3, minmax(0, 1fr)); gap: 12px; }
  .offline-page .sf-network-v43 .sf-network-node figcaption { font-size: 16px; }
}
@media (max-width: 700px) {
  .offline-page .sf-movie-caption { top: 12px; left: 14px; font-size: 14px; }
  .offline-page .sf-movie-play { bottom: 12px; min-height: 48px; padding: 10px 18px; }
}