/* v433: improve the mobile intro and request form proportions. */
@media (max-width:760px){
  /* First page: both sections expand so the page fills the entire viewport. */
  [data-stage="intro"].active{
    justify-content:stretch;
    gap:14px;
    padding:8px 0;
  }
  [data-stage="intro"] .hero{
    flex:1 1 46%;
    width:100%;
    margin:0 auto;
    padding:8px 6px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  [data-stage="intro"] .hero h1{
    font-size:clamp(38px,10.8vw,48px);
    line-height:.98;
    margin:8px 0 11px;
  }
  [data-stage="intro"] .hero p{
    max-width:560px;
    font-size:14px;
    line-height:1.5;
  }
  [data-stage="intro"] .promise{
    margin-top:13px;
    gap:8px 14px;
    font-size:11px;
  }
  [data-stage="intro"] .card{
    flex:1 1 54%;
    width:100%;
    min-height:0;
    padding:26px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  [data-stage="intro"] .card h2[style]{
    font-size:clamp(28px,7.6vw,34px)!important;
    margin:9px 0 12px!important;
  }
  [data-stage="intro"] .card p[style]{font-size:14px!important;line-height:1.55!important}
  [data-stage="intro"] .actions{margin-top:18px}

  /* Form: the card and larger response areas absorb all remaining height. */
  [data-stage="details"].active{
    justify-content:flex-start!important;
    gap:10px;
    padding:3px 0;
  }
  [data-stage="details"] .stage-heading{
    flex:0 0 auto;
    width:100%;
    margin:0 auto;
  }
  [data-stage="details"] .stage-heading h2{font-size:clamp(27px,7.5vw,34px);margin:4px 0 6px}
  [data-stage="details"] .stage-heading p{font-size:13px;line-height:1.4}
  [data-stage="details"] .card{
    flex:1 1 auto;
    width:100%;
    min-height:0;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  [data-stage="details"] .form-grid{
    flex:1 1 auto;
    height:100%;
    align-content:stretch;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto minmax(72px,1fr) minmax(72px,1fr) auto;
    gap:9px 10px;
  }
  [data-stage="details"] .field:nth-child(5),
  [data-stage="details"] .field:nth-child(6){min-height:0}
  [data-stage="details"] .field label{font-size:10px;letter-spacing:.045em}
  [data-stage="details"] .field input,
  [data-stage="details"] .field select,
  [data-stage="details"] .field textarea{
    min-height:43px;
    padding:10px 11px;
    font-size:14px;
  }
  [data-stage="details"] .field textarea{
    min-height:72px;
    height:100%;
    max-height:none;
  }
  [data-stage="details"] .actions{margin-top:11px}
  [data-stage="details"] .primary,
  [data-stage="details"] .secondary{min-height:44px;font-size:12px}
}

@media (max-width:430px){
  [data-stage="intro"] .promise{display:grid;grid-template-columns:1fr;gap:5px;text-align:left;width:max-content;max-width:100%}
}

@media (max-width:760px) and (max-height:700px){
  [data-stage="intro"].active,[data-stage="details"].active{justify-content:flex-start!important}
  [data-stage="intro"] .hero,[data-stage="intro"] .card{flex:none}
  [data-stage="intro"] .card{min-height:0;padding:18px;margin-bottom:4px}
  [data-stage="intro"] .hero h1{font-size:34px}
  [data-stage="intro"] .hero p{font-size:13px}
  [data-stage="details"] .card{flex:none}
  [data-stage="details"] .form-grid{height:auto;grid-template-rows:auto}
  [data-stage="details"] .field textarea{height:72px}
}