@import url('brand-core-tokens.css');
@import url('brand-web-tokens.css');
.problem-section {
  --orbit-outline: color-mix(in srgb, var(--zto-brand-sky) 72%, var(--zto-text-primary));
  color: var(--zto-text-primary);
  background: var(--zto-surface-subtle);
  font-family: var(--zto-font-body);
  font-synthesis: none;
  padding-top: 64px;
  scroll-margin-top: var(--zto-space-24);
  overflow: clip;
}
.problem-section *, .problem-section *::before, .problem-section *::after {box-sizing:border-box}
.problem-section .orbit-shell {width:var(--home-content-width);margin-inline:auto}
.problem-section h2 {margin:0;text-align:center;font-size:44px;line-height:1.35;font-weight:650;letter-spacing:-.04em;word-break:keep-all}
.problem-section .orbit-mobile-break {display:none}
.problem-section .orbit-stage {
  position:relative;
  display:grid;
  grid-template-columns:repeat(24,minmax(0,1fr));
  grid-template-rows:auto 120px 120px 180px;
  align-items:start;
  max-width:1200px;
  margin:32px auto 0;
  isolation:isolate;
}
.problem-section .orbit-defs {position:absolute;pointer-events:none}
.problem-section .orbit-thoughts {display:contents;list-style:none;padding:0;margin:0}
.problem-section .orbit-thought {position:relative;width:100%;min-width:0;min-height:180px;aspect-ratio:420 / 190;z-index:2}
.problem-section .thought-outline {position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--zto-web-surface-canvas);stroke:var(--orbit-outline);stroke-width:1.6;stroke-linejoin:round}
.problem-section .orbit-copy {position:relative;min-height:180px;height:100%;padding:32px 30px 30px;display:grid;place-items:center}
.problem-section .question {margin:0;text-align:center;letter-spacing:-.025em;word-break:keep-all}
.problem-section .question span {display:block;font-size:21px;font-weight:500;line-height:1.45;color:var(--zto-text-secondary);margin-bottom:7px}
.problem-section .question strong {display:block;font-size:28px;font-weight:650;line-height:1.4}
.problem-section .question i {font-style:normal}
.problem-section .question b {font-weight:inherit}
.problem-section .orbit-top {grid-column:9 / 17;grid-row:1}
.problem-section .orbit-left {grid-column:1 / 9;grid-row:2 / 4;margin-top:24px}
.problem-section .orbit-right {grid-column:17 / 25;grid-row:2 / 4;margin-top:24px}
.problem-section .orbit-trail,.problem-section .orbit-mobile-trail {position:absolute;overflow:visible;fill:var(--zto-web-surface-canvas);stroke:var(--orbit-outline);stroke-width:1.5;pointer-events:none}
.problem-section .orbit-mobile-trail {display:none}
.problem-section .orbit-top .orbit-trail {width:40px;height:54px;top:calc(100% + 2px);left:calc(50% - 20px)}
.problem-section .orbit-left .orbit-trail {width:64px;height:40px;left:calc(100% - 5px);top:66%}
.problem-section .orbit-right .orbit-trail {width:64px;height:40px;right:calc(100% - 5px);top:66%}
.problem-section .orbit-person {grid-column:8 / 18;grid-row:2 / 5;align-self:end;justify-self:center;width:100%;max-width:440px;aspect-ratio:1 / .94;overflow:hidden;z-index:1}
.problem-section .character {display:block;width:100%;max-width:none;height:auto}
@media (900px <= width < 1200px) {
  .problem-section .orbit-stage {grid-template-rows:auto 110px 110px 160px}
  .problem-section .orbit-thought,.problem-section .orbit-copy {min-height:160px}
  .problem-section .orbit-copy {padding-inline:24px}
  .problem-section .question span {font-size:19px}
  .problem-section .question strong {font-size:24px}
  .problem-section .orbit-left .orbit-trail,.problem-section .orbit-right .orbit-trail {width:52px;height:34px}
}
@media (width < 900px) {
  .problem-section {padding-top:48px;--orbit-side-height:180px}
  .problem-section h2 {font-size:36px}
  .problem-section .orbit-stage {max-width:640px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;margin-top:28px;gap:14px 12px}
  .problem-section .orbit-top {grid-column:3 / 11;grid-row:1}
  .problem-section .orbit-left {grid-column:1 / 7;grid-row:2;margin:0}
  .problem-section .orbit-right {grid-column:7 / 13;grid-row:2;margin:0}
  .problem-section .orbit-thought {min-height:180px;aspect-ratio:auto}
  .problem-section .orbit-copy {min-height:180px;padding:30px 24px}
  .problem-section .question span {font-size:18px;margin-bottom:6px}
  .problem-section .question strong {font-size:24px}
  .problem-section .question b {white-space:nowrap}
  .problem-section .orbit-top .orbit-trail {display:none}
  .problem-section .orbit-mobile-trail {display:block;width:20px;height:calc(var(--orbit-side-height) + 32px);top:calc(100% + 8px);left:calc(50% - 10px)}
  .problem-section .orbit-left .orbit-trail {width:54px;height:34px;left:auto;right:12%;top:calc(100% - 1px);transform:rotate(22deg)}
  .problem-section .orbit-right .orbit-trail {width:54px;height:34px;right:auto;left:12%;top:calc(100% - 1px);transform:rotate(-22deg)}
  .problem-section .orbit-person {grid-column:3 / 11;grid-row:3;width:100%;max-width:320px;margin-top:12px}
}
@media (width < 450px) {
  .problem-section {padding-top:40px;--orbit-side-height:164px}
  .problem-section h2 {font-size:30px}
  .problem-section .orbit-mobile-break {display:block}
  .problem-section .orbit-stage {gap:12px 8px}
  .problem-section .orbit-top {grid-column:2 / 12;min-height:140px}
  .problem-section .orbit-top .orbit-copy {min-height:140px;padding:24px}
  .problem-section .orbit-left,.problem-section .orbit-right {min-height:164px}
  .problem-section :is(.orbit-left,.orbit-right) .orbit-copy {min-height:164px;padding:22px 12px}
  .problem-section .question span {font-size:17px;margin-bottom:8px}
  .problem-section .question strong {font-size:21px}
  .problem-section :is(.orbit-left,.orbit-right) .question strong {font-size:20px}
  .problem-section .orbit-left .question strong {display:flex;align-items:center;justify-content:center;min-height:2.8em;white-space:nowrap}
  .problem-section .orbit-right .question b {display:block}
  .problem-section .orbit-person {grid-column:2 / 12;max-width:280px;margin-top:6px}
  .problem-section .orbit-left .orbit-trail {right:2%}
  .problem-section .orbit-right .orbit-trail {left:2%}
}
@media (width < 360px) {
  .problem-section :is(.orbit-left,.orbit-right) .question span {min-height:49.3px;align-content:center}
  .problem-section .orbit-right .question i {display:block}
}

@media (forced-colors: active) {
  .problem-section :is(.thought-outline,.orbit-trail,.orbit-mobile-trail) {fill:Canvas;stroke:CanvasText}
}

/* Keep the approved scene intact when floating contact controls cross its text. */
.quick-contact[data-problem-occluded="true"]:not(:focus-within):not(:hover) {visibility:hidden;pointer-events:none}