/* The invitation, deadline and action share one axis within the copy area. */
.family .invitation-rsvp,
body.modern-design #invitation-rsvp{text-align:center}
.family .invitation-rsvp > :is(.family-caption,h2,p){
  width:100%;max-width:none;margin-inline:0;text-align:inherit;
}
.family .invitation-rsvp > .family-caption{margin-bottom:12px}
.family .invitation-rsvp > h2{margin-bottom:16px;text-wrap:balance}
.family .invitation-rsvp > p{margin-bottom:0;text-wrap:pretty}
.family .invitation-rsvp > .rsvp-disclosure{margin:28px auto 0;max-width:100%;min-width:0}
.family .invitation-rsvp .rsvp-disclosure > summary{max-width:100%;white-space:normal;text-align:center}
/* Questionnaire labels keep their normal reading direction. */
.family .invitation-rsvp .rsvp-disclosure__panel{text-align:start}

/* Keep the required consent control readable beside its long label. */
.family #invitation-rsvp .rsvp-form > div:has(> input[type=checkbox]){
  grid-template-columns:24px minmax(0,1fr);
  column-gap:16px;
  align-items:start;
}
.family #invitation-rsvp .rsvp-form > div:has(> input[type=checkbox]) > input[type=checkbox]{
  grid-column:1;grid-row:1;
  width:22px;height:22px;min-width:22px;min-height:22px;
  margin:3px 0 0;padding:0;box-sizing:border-box;
}
.family #invitation-rsvp .rsvp-form > div:has(> input[type=checkbox]) > label{
  grid-column:2;grid-row:1;margin:0;
}

@media(max-width:600px){
  .family #invitation-rsvp,
  .family #invitation-rsvp .rsvp-disclosure,
  .family #invitation-rsvp .rsvp-disclosure__panel,
  .family #invitation-rsvp .rsvp-form,
  .family #invitation-rsvp .songly-demo-survey{min-width:0;box-sizing:border-box}
  .family #invitation-rsvp .rsvp-disclosure,
  .family #invitation-rsvp .rsvp-disclosure__panel,
  .family #invitation-rsvp .rsvp-form,
  .family #invitation-rsvp .songly-demo-survey{width:100%;max-width:100%}
  .family #invitation-rsvp :is(fieldset,label,input,select,textarea){min-width:0}
  .family-jasmine .jasmine-page #invitation-rsvp{width:calc(100% + 24px);margin-inline:-12px}
  body.modern-design #family-main #invitation-rsvp{margin-inline:12px;padding-inline:12px!important}
  body.family-floral #family-main #invitation-rsvp{margin-inline:12px;padding-inline:12px}
  .family .space-rsvp-stage{grid-template-columns:minmax(0,1fr)}
  .family .space-rsvp-copy,.family .space-rsvp-art{min-width:0;grid-column:1}
}
@media(max-width:360px){
  body.modern-design #family-main #invitation-rsvp{margin-inline:8px;padding-inline:8px!important}
  body.family-floral #family-main #invitation-rsvp{margin-inline:8px;padding-inline:8px}
  .family #invitation-rsvp .rsvp-disclosure__panel{padding-inline:14px}
  .family #invitation-rsvp .songly-demo-survey fieldset label{padding-inline:10px;gap:8px}
}