/* WHN site-wide spacing refinement
   Loaded after each page's local styles so the existing visual design remains intact. */

@media (min-width:761px){
  body{line-height:1.5}

  .hero{padding-top:46px!important;padding-bottom:38px!important}
  .hero:has(.hero-grid){min-height:400px}
  .hero-grid{gap:38px!important}
  .hero h1,h1{margin-top:.22em!important;margin-bottom:.22em!important}
  .hero .lead,.lead{margin-top:10px;margin-bottom:10px}
  .hero-actions,.actions{margin-top:18px!important;margin-bottom:16px!important}
  .hero-trust{margin-top:18px!important}
  .local-note{margin-top:12px!important}

  main>section:not(.hero):not(.network-doctor-promo){padding-top:50px!important;padding-bottom:50px!important}
  main>.section{padding-top:38px!important;padding-bottom:38px!important}
  .section-intro{margin-bottom:20px!important}
  .section-intro p:last-child{margin-bottom:0}

  .problem-grid,.grid3,.grid,.process{gap:12px!important}
  .split{gap:20px!important}
  .contact-grid{gap:30px!important}

  .card,.plain-box,.step{padding:17px!important}
  .panel:not(:has(.panel-media)){padding:20px!important}
  .panel:has(.panel-media){padding:0!important}
  .panel-content{padding:18px 20px!important}
  .panel-list{margin-top:8px!important}
  .panel-list li{padding:8px 0!important}

  .callout,.notice{padding:15px 18px!important;margin-top:18px!important}
  .checks{margin-top:16px!important;gap:9px!important}
  .check{padding:11px!important}

  form{padding:19px!important}
  .field{margin-bottom:10px!important}
  textarea{min-height:96px!important}

  .related-help{margin-top:18px!important;padding-top:14px!important}
  .network-doctor-promo{padding:18px 0!important}
  .network-doctor-card{padding:19px 21px!important;gap:20px!important}

  .launch-offer{padding:19px!important;gap:20px!important;margin-bottom:18px!important}
  .launch-story{padding:21px!important}
  .launch-credentials{margin:16px 0 18px!important}

  .bottom{padding-top:32px!important;padding-bottom:32px!important}
  footer{padding-top:20px!important;padding-bottom:20px!important}
}

@media (max-width:760px){
  .wrap{padding-left:16px!important;padding-right:16px!important}

  .hero{padding-top:32px!important;padding-bottom:27px!important}
  .hero h1,h1{margin-top:.2em!important;margin-bottom:.22em!important}
  .hero .lead,.lead{font-size:1rem!important;line-height:1.45!important;margin-top:8px;margin-bottom:8px}
  .hero-grid{gap:20px!important}
  .hero-actions,.actions{margin-top:15px!important;margin-bottom:12px!important;gap:8px!important}
  .hero-trust{margin-top:15px!important;gap:16px!important}
  .local-note{margin-top:10px!important}

  main>section:not(.hero):not(.network-doctor-promo){padding-top:36px!important;padding-bottom:36px!important}
  main>.section{padding-top:30px!important;padding-bottom:30px!important}
  .section-intro{margin-bottom:16px!important}
  h2{margin-bottom:9px!important}

  .problem-grid,.grid3,.grid,.process,.split,.contact-grid{gap:10px!important}

  .card,.plain-box,.step{padding:15px!important}
  .panel:not(:has(.panel-media)){padding:16px!important}
  .panel:has(.panel-media){padding:0!important}
  .panel-content{padding:15px 16px!important}
  .panel-list{margin-top:6px!important}
  .panel-list li{padding:7px 0!important}

  .callout,.notice{padding:13px 14px!important;margin-top:14px!important}
  .checks{margin-top:13px!important;gap:8px!important}
  .check{padding:10px!important}

  .btn{padding:10px 14px!important}
  form{padding:15px!important}
  .two{gap:8px!important}
  .field{margin-bottom:9px!important}
  input,select,textarea{padding:10px 11px!important}
  textarea{min-height:90px!important}

  .related-help{margin-top:14px!important;padding-top:12px!important}
  .related-help-links{gap:7px!important}
  .network-doctor-promo{padding:13px 0!important}
  .network-doctor-card{padding:15px!important;gap:12px!important}

  .launch-offer{padding:16px!important;gap:13px!important;margin-bottom:14px!important}
  .launch-story{padding:17px!important}
  .launch-credentials{margin:14px 0 16px!important;gap:8px!important}

  .bottom{padding-top:27px!important;padding-bottom:27px!important}
  footer{padding-top:17px!important;padding-bottom:17px!important}
}


/* Contact-first intake: keep optional labels and long email addresses within mobile cards. */
#contact .field label .small{display:block;font-weight:400;line-height:1.35;margin-top:3px}
#contact .field{min-width:0}
#contact .field input,#contact .field textarea{width:100%;box-sizing:border-box}
#contact a[href^="mailto:"]{overflow-wrap:anywhere}