/* Five ideas, one connected task: tangent circles above the visual and quotation. */
.apple-v2 #natural {
  --natural-pad: clamp(28px, 6vw, 112px);
  --natural-ring: min(21svh, 196px, calc((100vw - 2 * var(--natural-pad)) / 3));
  min-height: 100svh;
  padding: clamp(66px, 8svh, 88px) var(--natural-pad) 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background: radial-gradient(ellipse at 50% 40%, #eef6ff 0, #ffffff 64%);
}
.apple-v2 #natural > .section-title {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: clamp(38px, 4.2vw, 68px);
  line-height: 1.12;
  color: #172a42;
}
.apple-v2 #natural .natural-rings {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: calc(var(--natural-ring) * .8660254) var(--natural-ring);
  width: calc(var(--natural-ring) * 3);
  max-width: 100%;
  margin: 26px auto 0;
  align-self: center;
  isolation: isolate;
}
.apple-v2 #natural .natural-ring {
  grid-column: span 2;
  width: 100%;
  height: var(--natural-ring);
  box-sizing: border-box;
  border: 2px solid #4d6bfe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 18px 12px;
  text-align: center;
  background: linear-gradient(145deg, #fffffffa, #eaf2fff2);
  box-shadow: inset 0 0 20px #ffffffb3, 0 8px 32px #4d6bfe08;
}
.apple-v2 #natural .natural-ring:nth-child(4) { grid-column: 2 / span 2; }
.apple-v2 #natural .natural-ring:nth-child(5) { grid-column: 4 / span 2; }
.apple-v2 #natural .natural-ring strong {
  display: block;
  color: #2567d4;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.35;
}
.apple-v2 #natural .natural-ring:nth-child(5) strong {
  font-size: clamp(19px, 1.65vw, 26px);
  white-space: nowrap;
}
.apple-v2 #natural .natural-ring small {
  display: block;
  color: #798ca5;
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.45;
  margin-top: 8px;
  letter-spacing: 0;
  white-space: nowrap;
}
.apple-v2 #natural .natural-evidence {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 82px);
  width: 100%;
  max-width: 1280px;
  margin-top: 24px;
  align-items: center;
  align-self: center;
}
.apple-v2 #natural .filmstrip {
  width: 100%;
  max-width: 490px;
  min-width: 0;
  padding: 0;
  margin: 0;
  justify-self: start;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.apple-v2 #natural .filmstrip img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 170px;
  object-fit: contain;
  border-radius: 0;
}
.apple-v2 #natural .film-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 0;
  color: #7e90a5;
  font-size: 12px;
}
.apple-v2 #natural .filmstrip figcaption {
  position: static;
  margin-top: 6px;
  padding: 0;
  font-size: 10px;
  text-align: center;
  color: #a2aebc;
  background: none;
}
.apple-v2 #natural .natural-quote {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 20px 28px 22px;
  border: 0;
  background: transparent;
  color: #50627a;
}
.apple-v2 #natural .natural-quote::before,
.apple-v2 #natural .natural-quote::after {
  position: absolute;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 1;
  color: #4d6bfe;
  pointer-events: none;
}
.apple-v2 #natural .natural-quote::before { content: "「"; top: 0; left: -10px; }
.apple-v2 #natural .natural-quote::after { content: "」"; right: -10px; bottom: -1px; }
.apple-v2 #natural .natural-quote p {
  margin: 0;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.8;
  font-weight: 450;
  letter-spacing: .005em;
}
@media (max-height: 760px) and (min-width: 801px) {
  .apple-v2 #natural {
    --natural-ring: min(21svh, 158px);
    padding-top: 62px;
    padding-bottom: 30px;
  }
  .apple-v2 #natural > .section-title { font-size: clamp(36px, 3.5vw, 52px); }
  .apple-v2 #natural .natural-rings { margin-top: 18px; }
  .apple-v2 #natural .natural-ring strong { font-size: 26px; }
  .apple-v2 #natural .natural-ring:nth-child(5) strong { font-size: 20px; }
  .apple-v2 #natural .natural-ring small { font-size: 11px; margin-top: 5px; }
  .apple-v2 #natural .natural-evidence { margin-top: 15px; }
  .apple-v2 #natural .filmstrip img { max-height: 130px; }
  .apple-v2 #natural .natural-quote p { font-size: 17px; line-height: 1.65; }
}
@media (max-width: 800px) {
  .apple-v2 #natural {
    --natural-pad: 24px;
    --natural-ring: min(24vw, 165px, calc((100vw - 48px) / 3));
    padding-top: 80px;
    padding-bottom: 48px;
  }
  .apple-v2 #natural > .section-title { font-size: clamp(29px, 5.5vw, 43px); }
  .apple-v2 #natural .natural-rings { margin-top: 30px; }
  .apple-v2 #natural .natural-ring { padding: 10px 5px; border-width: 1.5px; }
  .apple-v2 #natural .natural-ring strong { font-size: clamp(17px, 3.5vw, 27px); }
  .apple-v2 #natural .natural-ring:nth-child(5) strong { font-size: clamp(11px, 2.5vw, 20px); }
  .apple-v2 #natural .natural-ring small { font-size: clamp(8px, 1.65vw, 12px); margin-top: 5px; }
  .apple-v2 #natural .natural-evidence { gap: 18px; margin-top: 32px; }
  .apple-v2 #natural .natural-quote { padding: 16px 12px; }
  .apple-v2 #natural .natural-quote p { font-size: 14px; line-height: 1.7; }
  .apple-v2 #natural .natural-quote::before,
  .apple-v2 #natural .natural-quote::after { font-size: 30px; }
  .apple-v2 #natural .film-labels { font-size: 10px; }
}
@media (max-width: 520px) {
  .apple-v2 #natural { --natural-pad: 18px; --natural-ring: calc((100vw - 36px) / 3); }
  .apple-v2 #natural .natural-evidence { grid-template-columns: 1fr; gap: 26px; margin-top: 35px; }
  .apple-v2 #natural .filmstrip { width: 72%; }
  .apple-v2 #natural .filmstrip img { max-height: 110px; }
  .apple-v2 #natural .natural-quote { width: 92%; justify-self: end; box-sizing: border-box; }
}