/* v2 coordinates: 929 x 839. Text stays editable; narrow screens reflow cards. */
.learning-loop {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1060px;
  aspect-ratio: 929 / 839;
  justify-self: center;
  color: #071f52;
  isolation: isolate;
}
.learning-loop-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.learning-loop-step {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.829925cqw;
  width: 32.615716%;
  height: 18.116806%;
  padding: 2.475780cqw 1.291712cqw 1.291712cqw 2.260495cqw;
  border: 1px solid #b4e3ff;
  border-radius: 2.152853cqw;
  background: linear-gradient(135deg, #fff, #fafdff);
  box-shadow: 0 1.507cqw 1.722cqw #20adfa21;
}
.learning-loop-step-01 { left: 6.458558%; top: 16.686532%; }
.learning-loop-step-02 { left: 55.435953%; top: 16.686532%; width: 33.584499%; gap: 2.368138cqw; }
.learning-loop-step-03 { left: 55.435953%; top: 58.045292%; width: 33.584499%; gap: 2.368138cqw; }
.learning-loop-step-04 { left: 6.458558%; top: 58.045292%; width: 32.292788%; gap: 2.798708cqw; }
.learning-loop-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 9.687836cqw;
  height: 9.257266cqw;
  border-radius: 2.260495cqw;
  background: linear-gradient(135deg, #effaff, #e8f6ff 55%, #f3fbff);
}
.learning-loop-icon img { display: block; width: 6.889128cqw; height: 6.889128cqw; }
.learning-loop-copy { min-width: 0; }
.learning-loop-number { display: block; color: #006bff; font-size: 2.260495cqw; line-height: 2.906351cqw; font-weight: 600; }
.learning-loop-step h3 { margin: .968784cqw 0 0; color: #071f52; font-size: 2.798708cqw; line-height: 3.552207cqw; font-weight: 700; white-space: nowrap; }
.learning-loop-step p { margin: .861141cqw 0 0; color: #4369b0; font-size: 1.829925cqw; line-height: 2.798708cqw; letter-spacing: .107643cqw; white-space: nowrap; }
.learning-loop-hub {
  position: absolute;
  z-index: 1;
  left: 34.122713%;
  top: 46.483909%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 23.250807%;
  aspect-ratio: 1;
  padding-top: 3.013994cqw;
  border: .430571cqw solid #ffffffe6;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 70%, #beedfff2, #e0f7ffe0 80%, #f1fcffe0);
  box-shadow: 0 .861cqw 1.2917cqw #2f9ed733, inset 0 0 0 .1615cqw #ffffff40;
}
.learning-loop-hub img { display: block; width: 5.812702cqw; height: 5.812702cqw; margin-bottom: 1.614639cqw; }
.learning-loop-hub strong { display: block; color: #071f52; font-size: 2.691066cqw; line-height: 3.659849cqw; }
.learning-loop-hub p { margin: .645856cqw 0 0; color: #4369b0; font-size: 1.937567cqw; line-height: 2.798708cqw; white-space: nowrap; }
.learning-loop-caption { position: absolute; left: 0; top: 87.723480%; width: 91.496233%; margin: 0; color: #4369b0; font-size: 2.368138cqw; line-height: 3.229279cqw; letter-spacing: .215285cqw; text-align: center; white-space: nowrap; }
@media (max-width: 1000px) { .learning-loop { width: min(100%, 760px); } }
@media (max-width: 600px) {
  .learning-loop { aspect-ratio: .65; }
  .learning-loop-step { height: auto; min-height: 102px; flex-direction: column; gap: 6px; padding: 10px 8px; border-radius: 14px; }
  .learning-loop-icon { width: 31px; height: 31px; border-radius: 9px; }
  .learning-loop-icon img { width: 24px; height: 24px; }
  .learning-loop-number { position: absolute; top: 13px; right: 9px; font-size: 12px; line-height: 1.1; }
  .learning-loop-step h3 { margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
  .learning-loop-step p { margin: 0; font-size: 11px; line-height: 1.5; letter-spacing: 0; white-space: normal; }
  .learning-loop-hub { left: 31.748117%; width: 28%; justify-content: center; gap: 5px; padding: 0; border-width: 2px; }
  .learning-loop-hub img { width: 28px; height: 28px; margin: 0; }
  .learning-loop-hub strong { font-size: 14px; line-height: 1.25; }
  .learning-loop-hub p { margin: 0; font-size: 10px; line-height: 1.5; }
  .learning-loop-caption { padding: 0 5px; font-size: 12px; line-height: 1.6; letter-spacing: 0; white-space: normal; text-wrap: balance; }
}
@media (max-width: 360px) {
  .learning-loop { aspect-ratio: .5; }
  .learning-loop-step { padding-inline: 7px; }
  .learning-loop-step h3 { font-size: 13px; }
  .learning-loop-step p { font-size: 10px; }
  .learning-loop-hub img { width: 24px; height: 24px; }
  .learning-loop-hub strong { font-size: 12px; }
  .learning-loop-hub p { font-size: 8px; }
}