/* An actual demonstration, followed by the visible explanation of the skill. */
.advanced-proof {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  grid-template-areas: 'visual heading' 'visual explanation';
  grid-template-rows: auto 1fr;
  gap: 30px clamp(35px, 5vw, 78px);
  align-items: start;
  margin-top: 88px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 10px;
}
.advanced-proof-heading { grid-area: heading; }
.advanced-proof-heading .story-eyebrow { color: var(--brand-red); font-size: 14px; }
.advanced-proof-heading h3 { margin-top: 19px; font-family: var(--sans); font-size: clamp(36px, 3.75vw, 56px); line-height: 1.07; font-weight: 900; letter-spacing: -.045em; }
.advanced-proof-heading h3 em { color: var(--brand-red); font-family: var(--serif); font-weight: 700; font-style: normal; }
.advanced-proof-lead { max-width: 650px; margin-top: 24px; color: var(--brand-black); font-size: 19px; line-height: 1.6; }
.advanced-proof-visual { grid-area: visual; min-width: 0; margin: 0; align-self: start; }
body.concept .advanced-proof-film {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 410px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--nj-radius-panel, 24px);
  overflow: hidden;
  background: var(--brand-black);
  color: #fff;
  text-align: left;
  isolation: isolate;
}
body.concept .advanced-proof-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; border-radius: 0; }
.advanced-proof-film::after { content: ''; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, #050000e8); pointer-events: none; }
.advanced-proof-duration { position: absolute; z-index: 1; top: 22px; left: 22px; display: block; padding: 6px 12px; border-radius: 10px; background: #050000d9; color: #fff; font-size: 14px; font-weight: 700; }
.advanced-proof-play { position: absolute; z-index: 1; left: 27px; right: 22px; bottom: 29px; display: flex; align-items: center; gap: 17px; font-size: 19px; line-height: 1.3; font-weight: 700; }
.advanced-proof-play small { display: block; max-width: 270px; margin-top: 7px; font-size: 14px; line-height: 1.45; font-weight: 500; }
.advanced-proof-play .story-play { background: var(--brand-red); border: 0; width: 58px; height: 58px; transition: transform .2s; }
.advanced-proof-film:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 5px; }
.advanced-proof-observe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 7px 0; }
.advanced-proof-observe > span { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.5; color: #625b57; }
.advanced-proof-observe > span + span { border-left: 1px solid var(--line); padding-left: 22px; }
.advanced-proof-observe svg { width: 32px; height: 32px; flex-shrink: 0; color: var(--brand-red); }
.advanced-proof-observe strong { font-weight: 700; color: var(--brand-black); }
.advanced-proof-fallback { margin-top: 18px; font-size: 17px; }
.advanced-proof-fallback a { text-decoration: underline; text-underline-offset: 4px; }
.advanced-proof-explanation { grid-area: explanation; min-width: 0; }
.advanced-proof-label { margin: 0 0 19px; font-size: 14px; font-weight: 700; color: #625b57; }
.advanced-proof-steps { list-style: none; padding: 0; margin: 0; }
.advanced-proof-steps li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 17px; border-top: 1px solid var(--line); padding: 23px 0; }
.advanced-proof-step { display: block; color: var(--brand-red); font-size: 14px; font-weight: 700; padding-top: 4px; }
.advanced-proof-steps h4 { margin: 0 0 11px; font-size: 24px; line-height: 1.25; font-weight: 900; letter-spacing: -.025em; }
.advanced-proof-steps p { font-size: 17px; line-height: 1.65; color: #625b57; }
.advanced-proof-conclusion { padding: 16px 0 0 48px; font-size: 18px; line-height: 1.5; color: var(--brand-black); font-weight: 700; }
@media (hover: hover) {
  .advanced-proof-film:hover .story-play { transform: scale(1.08); }
  .advanced-proof-film:hover .advanced-proof-play > span:last-child { text-decoration: underline; text-underline-offset: 5px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .advanced-proof { gap: 25px 35px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .advanced-proof-heading h3 { font-size: 38px; }
  .advanced-proof-steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 11px; }
  .advanced-proof-steps h4 { font-size: 22px; }
  .advanced-proof-lead { font-size: 18px; }
  .advanced-proof-play { left: 20px; right: 18px; bottom: 22px; gap: 12px; font-size: 17px; }
  .advanced-proof-play .story-play { width: 48px; height: 48px; }
  .advanced-proof-observe { gap: 10px; padding-inline: 0; }
  .advanced-proof-observe > span { font-size: 14px; gap: 9px; }
  .advanced-proof-observe > span + span { padding-left: 12px; }
}
@media (max-width: 760px) {
  .advanced-proof { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heading' 'visual' 'explanation'; grid-template-rows: auto; gap: 27px; margin-top: 56px; padding-top: 38px; }
  .advanced-proof-heading h3 { font-size: clamp(35px, 8.5vw, 49px); line-height: 1.1; margin-top: 18px; }
  .advanced-proof-lead { font-size: 18px; line-height: 1.6; margin-top: 22px; }
  body.concept .advanced-proof-film { aspect-ratio: 1.08; min-height: 0; }
  body.concept .advanced-proof-film img { object-position: center 43%; }
  .advanced-proof-duration { top: 17px; left: 17px; padding: 5px 10px; }
  .advanced-proof-play { bottom: 22px; left: 20px; right: 16px; gap: 13px; font-size: 18px; }
  .advanced-proof-play small { font-size: 13px; }
  .advanced-proof-play .story-play { width: 48px; height: 48px; }
  .advanced-proof-observe { padding-top: 19px; padding-inline: 2px; gap: 12px; }
  .advanced-proof-observe > span { font-size: 15px; gap: 10px; }
  .advanced-proof-observe > span + span { padding-left: 13px; }
  .advanced-proof-label { margin-bottom: 17px; }
  .advanced-proof-steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 11px; padding-block: 21px; }
  .advanced-proof-steps h4 { font-size: 23px; }
  .advanced-proof-steps p { font-size: 17px; }
  .advanced-proof-conclusion { padding: 8px 0 0 35px; font-size: 17px; }
}
@media (max-width: 360px) {
  .advanced-proof-heading h3 { font-size: 33px; }
  .advanced-proof-play { font-size: 16px; gap: 10px; left: 16px; }
  .advanced-proof-play small { font-size: 13px; }
  .advanced-proof-play .story-play { width: 42px; height: 42px; }
  .advanced-proof-observe > span { gap: 8px; font-size: 14px; }
  .advanced-proof-observe svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .advanced-proof-play .story-play { transition: none; }
}