/* Target only the new character components and the explicitly opted-in
   questions/registration wrappers. Preserve form internals, the campaign video,
   existing portraits, guide preview and hero case/comma. */
.t3a-budget-character {
  position: relative;
  display: block;
  isolation: isolate;
  margin: 24px 0 0;
  padding: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.t3a-budget-character--clients {
  width: 231px; /* Approximately 360px high, preserving 480:748. */
  aspect-ratio: 480 / 748;
}

.t3a-budget-character--tailor {
  width: 380px;
  aspect-ratio: 800 / 748;
}

.t3a-budget-character > .t3a-budget-character__poster,
.t3a-budget-character > .t3a-budget-character__motion {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  transform: none;
  animation: none;
  transition: none;
}

.t3a-budget-character > .t3a-budget-character__motion {
  position: absolute;
  inset: 0;
}

.t3a-budget-character > .t3a-budget-character__motion[hidden] {
  display: none;
}

/* Transparent animation frames expose areas vacated by the hands/head. Hide
   the poster while playing so its old pose cannot show through those areas.
   visibility preserves the poster's normal-flow dimensions and aspect ratio.
   During loading the poster stays visible; the script changes state only once
   the animated image has loaded. Returning to still/fallback restores it. */
.t3a-budget-character[data-motion-state="playing"] > .t3a-budget-character__poster {
  visibility: hidden;
}

/* Add bd-questions-with-art to the existing #questions .bd-spread wrapper.
   At 1350px and wider, preserve its existing two-column grid. The longer lead
   column now contains art, so it must not inherit the old sticky positioning. */
#questions .bd-spread.bd-questions-with-art > .bd-spread__lead {
  position: static;
}

/* The existing page switches this section to a flex column at 1349px and uses
   display:contents plus child ordering. Restore real lead/list blocks only in
   this opted-in section so the new art cannot become an order:0 flex child
   ahead of the headline. Keep the page's existing outer column flow. */
@media (max-width: 1349px) {
  #questions .bd-spread.bd-questions-with-art > .bd-spread__lead,
  #questions .bd-spread.bd-questions-with-art > .bd-spread__list {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    order: initial;
  }
}

/* The original tablet layout constrains these children to 5/12 of the width.
   Once the lead is a real stacked block, let the heading use that block and
   retain a readable paragraph measure without altering mobile or wide grids. */
@media (min-width: 900px) and (max-width: 1349px) {
  #questions .bd-spread.bd-questions-with-art > .bd-spread__lead > .bd-h2 {
    max-width: none;
  }
  #questions .bd-spread.bd-questions-with-art > .bd-spread__lead > .bd-body {
    max-width: 54ch;
  }
}

/* Existing registration wrapper, with ONE new class added. Retain the current
   copy and form nodes; append the new art node after the form in source order.
   This preserves the form's own DOM, handlers and desktop prominence. */
#register > .bd-wrap.bd-grid.bd-registration-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-areas: "copy form" "art form";
  column-gap: clamp(32px, 6vw, 80px);
  row-gap: 24px;
  align-items: start;
}

.bd-registration-layout > .bd-register__copy {
  grid-area: copy;
  min-width: 0;
}

.bd-registration-layout > .bd-register__panel {
  grid-area: form;
  min-width: 0;
  align-self: start;
}

.bd-registration-layout > .bd-registration-art {
  grid-area: art;
  align-self: start;
  margin-top: 0;
}

/* Match the existing registration column-collapse breakpoint exactly: 899px.
   The tailor follows the form in source order. Do not use CSS order alone to
   repair an inaccessible or awkward source order. */
@media (max-width: 899px) {
  .t3a-budget-character--clients {
    width: 192.5px; /* 300px high at the supplied aspect ratio. */
    margin-inline: auto;
  }
  .t3a-budget-character--tailor {
    width: 260px;
    margin-inline: auto;
  }
  #register > .bd-wrap.bd-grid.bd-registration-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "form" "art";
    column-gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t3a-budget-character > .t3a-budget-character__motion {
    display: none !important;
  }
  .t3a-budget-character > .t3a-budget-character__poster {
    visibility: visible !important;
  }
}