/* One visual metaphor, set directly on the page rather than inside a card. */
#why{display:block;padding-block:82px 76px}
#why .problem-heading{display:grid;grid-template-columns:1.25fr 1fr;gap:68px;align-items:end}
#why h2{font-size:clamp(44px,4.5vw,64px);line-height:1.06;letter-spacing:-.055em;margin:0}
#why .problem-heading>p{font-size:16px;line-height:1.85;color:#705E51;max-width:450px;margin:0 0 2px}
#why .black-box-visual{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(230px,1fr);align-items:center;column-gap:0;margin:34px 0 0}
#why .illustration{position:relative;min-width:0;padding-bottom:12px}
#why .box-drawing{width:100%;height:auto;display:block;overflow:visible}
#why .input-caption{position:absolute;top:10%;left:2%;display:flex;align-items:center;gap:10px;font:11px var(--mono);color:#9A5A38}
#why .caption-line{width:18px;height:1px;background:#9A5A38}
#why .box-caption{position:absolute;bottom:0;left:47%;right:15%;text-align:center;font-size:13px;line-height:1.5;color:#806B5A}
#why .unanswered{padding:10px 0 0 28px}
#why .unanswered .eyebrow{font:10px/1.7 var(--mono);letter-spacing:.04em;color:#8D5032;max-width:270px;margin-bottom:20px}
#why .question{padding:18px 0;border-bottom:1px solid #D6C5B4}
#why .question:last-child{border-bottom:0}
#why .question p{font-size:22px;line-height:1.4;letter-spacing:-.025em;margin:0;font-weight:450;color:var(--ink)}

/* A single short inflow, triggered when the illustration is visible. */
@keyframes bb-code-one{0%,100%{translate:0 0;opacity:1}65%{translate:185px 18px;opacity:.65}85%{translate:225px 27px;opacity:0}86%{translate:0 0;opacity:0}}
@keyframes bb-code-two{0%,100%{translate:0 0;opacity:1}65%{translate:145px 24px;opacity:.6}85%{translate:185px 38px;opacity:0}86%{translate:0 0;opacity:0}}
@keyframes bb-code-three{0%,100%{translate:0 0;opacity:1}65%{translate:200px 19px;opacity:.65}85%{translate:240px 30px;opacity:0}86%{translate:0 0;opacity:0}}
@keyframes bb-code-four{0%,100%{translate:0 0;opacity:1}65%{translate:90px 10px;opacity:.6}85%{translate:145px 25px;opacity:0}86%{translate:0 0;opacity:0}}
@keyframes bb-change-in{0%,100%{translate:0 0;opacity:.75}65%{translate:118px 35px;opacity:1}80%{translate:140px 42px;opacity:0}81%{translate:0 0;opacity:0}}
@keyframes bb-last-change{0%,100%{translate:0 0;opacity:.75}65%{translate:190px 4px;opacity:1}80%{translate:210px 5px;opacity:0}81%{translate:0 0;opacity:0}}
#why .is-playing .run-one{animation:bb-code-one 3.2s .1s ease-in-out both}
#why .is-playing .run-two{animation:bb-code-two 3.3s .3s ease-in-out both}
#why .is-playing .run-three{animation:bb-code-three 3.5s .5s ease-in-out both}
#why .is-playing .run-four{animation:bb-code-four 3.4s .7s ease-in-out both}
#why .is-playing .run-five{animation:bb-code-four 3.2s .2s ease-in-out both}
#why .is-playing .particle-one{animation:bb-change-in 3.2s .1s ease-in-out both}
#why .is-playing .particle-two{animation:bb-change-in 3.5s .3s ease-in-out both}
#why .is-playing .particle-three{animation:bb-change-in 3.2s .5s ease-in-out both}
#why .is-playing .particle-four{animation:bb-last-change 3.8s .8s ease-in-out both}
#why .is-paused .code-run,#why .is-paused .particle{animation-play-state:paused}

@media(max-width:1100px){
  #why .problem-heading{gap:40px}
  #why .problem-heading>p{font-size:15px}
  #why .black-box-visual{grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr)}
  #why .question p{font-size:20px}
  #why .unanswered{padding-left:20px}
  #why .question{padding-block:15px}
}
@media(max-width:820px){
  #why{padding-block:68px 62px}
  #why .problem-heading{display:block}
  #why h2{font-size:50px}
  #why .problem-heading>p{max-width:590px;margin-top:25px;font-size:16px}
  #why .black-box-visual{grid-template-columns:minmax(0,2fr) minmax(200px,1fr);margin-top:40px}
  #why .input-caption{font-size:10px;gap:6px;top:0}
  #why .caption-line{width:12px}
  #why .unanswered{padding-top:0;padding-left:15px}
  #why .unanswered .eyebrow{font-size:10px;margin-bottom:12px}
  #why .question{padding-block:12px}
  #why .question p{font-size:18px}
  #why .box-caption{font-size:11px;left:44%;right:10%;bottom:-5%}
  #why .illustration{padding-bottom:24px}
}
@media(max-width:600px){
  #why{padding-block:54px 50px}
  #why h2{font-size:46px}
  #why .problem-heading>p{font-size:15px;line-height:1.8;margin-top:23px}
  #why .black-box-visual{grid-template-columns:1fr;margin-top:28px}
  #why .illustration{margin-inline:-10px;padding-top:22px;padding-bottom:28px}
  #why .input-caption{font-size:11px;top:0;left:5%}
  #why .box-caption{left:45%;right:10%;bottom:0;font-size:12px}
  #why .unanswered{padding:28px 0 0;margin-top:26px;border-top:1px solid #D6C5B4}
  #why .unanswered .eyebrow{font-size:10px;max-width:none;margin-bottom:10px}
  #why .question{padding-block:13px}
  #why .question p{font-size:22px}
  #why .question p br{display:none}
}
@media(max-width:360px){#why h2{font-size:41px}#why .question p{font-size:20px}}
@media(prefers-reduced-motion:reduce){#why .code-run,#why .particle{animation:none!important}}