.registration-flow-story .selected-case-visual{isolation:isolate;}

.rf-motion-stage{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(8px,1.4vw,18px);
  pointer-events:none;
}

.rf-motion-figure{
  width:min(75.2%,416px);
  height:auto;
  aspect-ratio:1;
  margin:0;
  opacity:1;
  contain:layout paint;
  transform:translateY(-2%);
  transition:opacity .16s ease;
}

.rf-motion-figure svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.rf-theme-dark{display:none;}
.rf-theme-light{display:block;}
html[data-theme="dark"] .rf-theme-dark{display:block;}
html[data-theme="dark"] .rf-theme-light{display:none;}

.rf-anchor-layer{
  opacity:0;
  pointer-events:none;
  transition:none;
  will-change:opacity;
}

.rf-expanded-scene{opacity:0;}
.rf-spread-scene{fill:none;}
[data-rf-stack-card]{transform-box:view-box;will-change:transform;}
.rf-form,
.rf-form-front,
.rf-form-fill,
.rf-form-icon-fill,
.rf-arrow,
.rf-stack-button,
.rf-state2-button,
.rf-done,
.rf-final-annotation{
  transform-box:view-box;
  will-change:transform,opacity;
}
.rf-card-state,
.rf-form-fill,
.rf-form-icon-fill,
.rf-arrow,
.rf-stack-button,
.rf-state2-button{transition:none;}

.rf-form-fill,
.rf-form-icon-fill{
  transform-box:fill-box;
  transform-origin:center;
  will-change:opacity,clip-path;
}

.rf-motion-js:not(.rf-motion-ready) .rf-motion-figure{opacity:0;}

.rf-motion-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:820px){
  .rf-motion-figure{width:min(73.6vw,416px);}
}

@media (min-width:821px){
  /* On desktop the smaller figure owns layout isolation only. The full stage
     is the Media Box and clips moving artwork at the actual dividers. */
  .rf-motion-figure{contain:layout;}
}

@media (orientation:portrait) and (max-width:700px){
  /* Preserve the established phone-portrait Media Box behavior. */
  .rf-motion-figure{contain:layout;}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:1024px){
  .registration-flow-story{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    height:calc(100dvh - var(--home-sticky-header-height));
  }
  .registration-flow-story .selected-case-visual,
  .registration-flow-story.selected-case--visual-left .selected-case-visual{
    grid-column:1 / 3;
    grid-row:1;
    min-height:100%;
    height:100%;
    margin-top:0;
    border-block:var(--selected-case-divider-size) solid var(--line);
  }
  .registration-flow-story .selected-case-text,
  .registration-flow-story.selected-case--visual-left .selected-case-text{
    grid-column:3;
    grid-row:1;
    min-height:100%;
    height:100%;
    padding-block:clamp(14px,4dvh,20px);
    padding-inline:clamp(16px,3vw,24px);
    border:var(--selected-case-divider-size) solid var(--line);
  }
  .registration-flow-story .selected-case-text::before,
  .registration-flow-story .selected-case-text::after,
  .registration-flow-story .selected-case-visual::before,
  .registration-flow-story .selected-case-visual::after{content:none;}
  .registration-flow-story .selected-case-number{margin-bottom:clamp(10px,3dvh,18px);}
  .registration-flow-story .selected-case-title{
    margin-bottom:clamp(8px,2.4dvh,14px);
    font-size:clamp(18px,3.2vw,23px);
    line-height:1.12;
  }
  .registration-flow-story .selected-case-description{
    font-size:clamp(11px,1.8vw,14px);
    line-height:1.45;
  }
  .rf-motion-stage{padding:4px 12px;}
  /* Case 01 and Case 02 share the same 1180 x 1180 authored canvas. Reusing
     Case 01's short-landscape size formula keeps every annotation, form and
     stroke at the same apparent scale without resizing any child element. */
  .rf-motion-figure{
    width:min(94%,calc(100dvh - var(--home-sticky-header-height) - 12px));
    contain:layout paint;
  }
}

@media (prefers-reduced-motion:reduce){
  .rf-anchor-layer,
  .rf-form,
  .rf-form-fill,
  .rf-form-icon-fill,
  [data-rf-stack-card],
  .rf-form-front,
  .rf-arrow,
  .rf-stack-button,
  .rf-state2-button,
  .rf-done,
  .rf-final-annotation{will-change:auto;}
}