/* Contact screen only. Load after shared quiz and page styles. */
.quiz-dialog[data-contact=true] .quiz-body{
  padding:30px 34px 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.quiz-dialog[data-contact=true] .quiz-step{margin-bottom:8px;font-size:12px}
.quiz-dialog[data-contact=true] .progress{margin-bottom:17px}
.quiz-dialog[data-contact=true] #quiz-title{
  font:500 29px/1.13 var(--display);
  letter-spacing:-.7px;
  margin:0 0 10px;
  text-wrap:pretty;
}
.quiz-dialog[data-contact=true] .quiz-explanation{
  font-size:14px;
  line-height:1.5;
  color:#57644e;
  margin:0 0 16px;
  text-wrap:pretty;
}
.quiz-dialog[data-contact=true] .contact-form:not([hidden]){display:block;flex:none;min-height:0}
.quiz-dialog[data-contact=true] .contact-gifts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
  margin:0 0 17px;
}
.quiz-dialog[data-contact=true] .contact-gifts .contact-gifts__label{
  display:block;
  grid-column:1/-1;
  margin:0;
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  color:#526344;
}
.quiz-dialog[data-contact=true] .contact-gifts>span:not(.contact-gifts__label){
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-size:13px;
  line-height:1.4;
  color:#33462d;
}
.quiz-dialog[data-contact=true] .contact-gifts svg{width:22px;height:22px;flex:none;color:#947646}
.quiz-dialog[data-contact=true] .contact-fields{gap:13px}
.quiz-dialog[data-contact=true] .contact-fields input{min-height:45px;font-size:16px}
.quiz-dialog[data-contact=true] .consents{margin-top:14px;gap:9px}
.quiz-dialog[data-contact=true] .consents .consent{font-size:12px;line-height:1.45;margin:0}
.quiz-dialog[data-contact=true] .contact-form>.primary-button{
  min-height:50px;
  font-size:16px;
  margin-top:14px;
}
.quiz-dialog[data-contact=true] .form-notice{font-size:11px;line-height:1.4;margin:9px 0 0}
.quiz-dialog[data-contact=true] .form-status{margin-top:6px}
.quiz-dialog[data-contact=true] .quiz-actions{padding-top:12px}
@media(min-width:761px) and (max-height:740px){
  .quiz-dialog[data-contact=true] .quiz-body{padding-top:26px;padding-bottom:19px}
  .quiz-dialog[data-contact=true] .progress{margin-bottom:14px}
  .quiz-dialog[data-contact=true] #quiz-title{font-size:28px;margin-bottom:8px}
  .quiz-dialog[data-contact=true] .quiz-explanation{font-size:13px;line-height:1.45;margin-bottom:13px}
  .quiz-dialog[data-contact=true] .contact-gifts{margin-bottom:14px;gap:7px 14px}
  .quiz-dialog[data-contact=true] .consents{margin-top:12px;gap:8px}
  .quiz-dialog[data-contact=true] .contact-form>.primary-button{margin-top:12px;min-height:48px}
}
@media(max-width:760px){
  .quiz-dialog[data-contact=true]{width:calc(100% - 16px);height:calc(100svh - 16px);max-height:calc(100svh - 16px)}
  .quiz-dialog[data-contact=true] .quiz-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .quiz-dialog[data-contact=true] .quiz-aside{display:none}
  .quiz-dialog[data-contact=true] .quiz-body{padding:49px 20px 14px;overflow-y:auto}
  .quiz-dialog[data-contact=true] .quiz-step,
  .quiz-dialog[data-contact=true] .progress{display:none}
  .quiz-dialog[data-contact=true] .close-button{
    position:absolute;
    top:11px;
    right:14px;
    width:32px;
    height:32px;
    background:transparent;
    color:#536449;
    border-color:#acb79e;
  }
  .quiz-dialog[data-contact=true] .quiz-actions{
    position:absolute;
    top:11px;
    left:20px;
    right:58px;
    height:32px;
    margin:0;
    padding:0;
    justify-content:flex-start;
  }
  .quiz-dialog[data-contact=true] .quiz-actions>span{display:none}
  .quiz-dialog[data-contact=true] .back-button{min-height:32px;padding:5px 0;font-size:12px}
  .quiz-dialog[data-contact=true] #quiz-title{font-size:23px;line-height:1.12;letter-spacing:-.45px;margin-bottom:9px}
  .quiz-dialog[data-contact=true] .quiz-explanation{font-size:13px;line-height:1.38;margin-bottom:13px;text-wrap:initial}
  .quiz-dialog[data-contact=true] .contact-gifts{display:grid;gap:7px 12px;margin-bottom:14px}
  .quiz-dialog[data-contact=true] .contact-gifts .contact-gifts__label{font-size:12px;line-height:1.3}
  .quiz-dialog[data-contact=true] .contact-gifts>span:not(.contact-gifts__label){font-size:12px;line-height:1.35;gap:7px}
  .quiz-dialog[data-contact=true] .contact-gifts svg{width:19px;height:19px}
  .quiz-dialog[data-contact=true] .contact-fields{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);
    column-gap:8px;
    row-gap:0;
    padding-bottom:19px;
  }
  .quiz-dialog[data-contact=true] .contact-fields>label{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:0;
    font-size:0;
    line-height:0;
  }
  .quiz-dialog[data-contact=true] .contact-field{position:static;gap:0}
  .quiz-dialog[data-contact=true] .contact-field>label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  .quiz-dialog[data-contact=true] .contact-fields input{
    height:42px;
    min-height:42px;
    padding:9px 8px;
    font-size:16px;
    line-height:1.2;
    letter-spacing:-.4px;
  }
  .quiz-dialog[data-contact=true] .contact-fields input::placeholder{color:#76816c;opacity:1}
  .quiz-dialog[data-contact=true] .phone-error{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    min-height:15px;
    font-size:11px;
    line-height:1.35;
  }
  .quiz-dialog[data-contact=true] .consents{margin-top:10px;gap:8px}
  .quiz-dialog[data-contact=true] .consents .consent{font-size:11px;line-height:1.35;gap:8px;margin:0}
  .quiz-dialog[data-contact=true] .consents .consent input{width:17px;height:17px;margin-top:0}
  .quiz-dialog[data-contact=true] .contact-form>.primary-button{
    min-height:46px;
    padding:12px 16px;
    margin-top:11px;
    font-size:15px;
    line-height:1.25;
  }
  .quiz-dialog[data-contact=true] .form-notice{font-size:11px;line-height:1.3;margin-top:8px}
}
@media(max-width:760px) and (max-height:610px){
  .quiz-dialog[data-contact=true] .quiz-body{padding:47px 18px 11px}
  .quiz-dialog[data-contact=true] .quiz-actions{left:18px}
  .quiz-dialog[data-contact=true] #quiz-title{font-size:22px;line-height:1.12;margin-bottom:7px}
  .quiz-dialog[data-contact=true] .quiz-explanation{font-size:12px;line-height:1.35;margin-bottom:10px}
  .quiz-dialog[data-contact=true] .contact-gifts{gap:5px 10px;margin-bottom:11px}
  .quiz-dialog[data-contact=true] .contact-gifts .contact-gifts__label{font-size:11px}
  .quiz-dialog[data-contact=true] .contact-gifts>span:not(.contact-gifts__label){font-size:12px;line-height:1.3;gap:6px}
  .quiz-dialog[data-contact=true] .contact-gifts svg{width:17px;height:17px}
  .quiz-dialog[data-contact=true] .contact-fields{padding-bottom:17px}
  .quiz-dialog[data-contact=true] .phone-error{min-height:14px;font-size:11px;line-height:1.25}
  .quiz-dialog[data-contact=true] .consents{margin-top:9px;gap:7px}
  .quiz-dialog[data-contact=true] .consents .consent{font-size:11px;line-height:1.3}
  .quiz-dialog[data-contact=true] .contact-form>.primary-button{min-height:46px;margin-top:10px}
  .quiz-dialog[data-contact=true] .form-notice{font-size:11px;line-height:1.25;margin-top:7px}
}
@media(max-width:340px){
  .quiz-dialog[data-contact=true] .contact-fields{grid-template-columns:1fr;row-gap:8px}
  .quiz-dialog[data-contact=true] .contact-gifts{grid-template-columns:1fr}
  .quiz-dialog[data-contact=true] .quiz-body{padding-left:15px;padding-right:15px}
  .quiz-dialog[data-contact=true] .quiz-actions{left:15px}
}
/* Use the available room for the prototype's stacked fields and larger copy. */
@media(min-width:761px){
  .quiz-dialog[data-contact=true] .quiz-explanation{font-size:15px;line-height:1.5}
  .quiz-dialog[data-contact=true] .contact-gifts>span:not(.contact-gifts__label){font-size:14px}
  .quiz-dialog[data-contact=true] .consents .consent{font-size:13px;line-height:1.45}
}
@media(max-width:760px){
  .quiz-dialog[data-contact=true] .contact-fields{grid-template-columns:1fr;row-gap:8px}
  .quiz-dialog[data-contact=true] .consents .consent{font-size:12px;line-height:1.35}
}
@media(max-width:760px) and (max-height:610px){
  .quiz-dialog[data-contact=true] #quiz-title{font-size:23px}
  .quiz-dialog[data-contact=true] .quiz-explanation{font-size:13px;line-height:1.38}
  .quiz-dialog[data-contact=true] .contact-gifts>span:not(.contact-gifts__label){font-size:12px;line-height:1.35}
}