/* v432: readable, screen-filling mobile layouts for every custom-preview stage. */
@media (max-width:760px){
  body{overflow:hidden}
  .site-header{height:58px}
  .nav{height:58px;padding:8px 14px}
  .brand img{width:148px}
  .back-link{padding:9px 12px;font-size:12px}
  .shell{
    width:calc(100% - 20px);
    height:calc(100svh - 58px);
    padding:10px 0 max(10px,env(safe-area-inset-bottom));
    display:block;
  }
  .stage{
    width:100%;
    height:100%;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(239,200,108,.65) transparent;
  }
  .stage.active{display:flex;flex-direction:column;justify-content:center}
  .stage::-webkit-scrollbar{width:4px}
  .stage::-webkit-scrollbar-thumb{background:rgba(239,200,108,.65);border-radius:999px}
  .eyebrow{font-size:10px;letter-spacing:.16em}
  .hero{margin:0 auto 12px;padding-top:2px}
  .hero h1{font-size:clamp(36px,10.5vw,46px);line-height:1;margin:7px 0 10px}
  .hero p{font-size:14px;line-height:1.48}
  .promise{margin-top:12px;gap:6px 12px;font-size:11px;line-height:1.35}
  .card{padding:20px 18px;border-radius:20px}
  .card h2[style]{font-size:clamp(25px,7vw,31px)!important;line-height:1.08!important;margin:8px 0 10px!important}
  .card p[style]{font-size:13px!important;line-height:1.5!important}
  .stage-heading{margin:0 auto 12px}
  .stage-heading h2{font-size:clamp(27px,7.5vw,34px);line-height:1.08;margin:5px 0 7px}
  .stage-heading p{font-size:13px;line-height:1.42;margin:0}
  .actions{margin-top:12px;gap:8px}
  .primary,.secondary{min-height:43px;padding:11px 15px;font-size:12px}

  /* Tool selection fills the middle of the screen without miniature copy. */
  [data-stage="select"]{justify-content:space-between!important;padding:2px 0}
  .tools{grid-template-columns:1fr 1fr;gap:8px}
  .tool{min-height:0;padding:11px 10px;border-radius:14px}
  .tool h3{font-size:15px;line-height:1.16;padding-right:42px;margin:0 0 4px}
  .tool p{font-size:11px;line-height:1.3;margin:0 0 6px}
  .price{font-size:11px}
  .tool.selected:after{right:6px;top:6px;font-size:7px;padding:4px 5px}

  /* Details uses two columns where possible and readable controls. */
  [data-stage="details"]{justify-content:center!important}
  [data-stage="details"] .card{padding:15px}
  .form-grid{grid-template-columns:1fr 1fr;gap:8px 9px}
  .field{gap:4px}
  .field.wide{grid-column:1/-1}
  .field label{font-size:9px;line-height:1.2}
  .field input,.field select,.field textarea{padding:10px 11px;font-size:13px;border-radius:11px}
  .field textarea{min-height:58px;max-height:58px}
  .error{font-size:11px;margin:7px 0 0}

  /* Review keeps both columns legible and uses the full available height. */
  [data-stage="review"]{justify-content:center!important}
  [data-stage="review"] .card{padding:15px 16px}
  .review{grid-template-columns:1fr 1fr;gap:0 14px}
  .review-row{display:block;padding:6px 0}
  .review-row span{display:block;margin-bottom:2px;font-size:8px}
  .review-row strong{font-size:11px;line-height:1.3}
  .agreement{margin-top:8px;padding:10px;font-size:10px;line-height:1.4}
  .notice{font-size:9px;line-height:1.4;margin-top:7px}

  /* Confirmation fills the screen instead of floating in a small center card. */
  [data-stage="success"] .card{width:100%;padding:clamp(28px,8vh,54px) 22px}
  .success-mark{width:68px;height:68px;margin-bottom:15px;font-size:31px}
  .success h2{font-size:clamp(31px,8vw,40px);line-height:1.08;margin-bottom:10px}
  .success p{font-size:14px;line-height:1.55}
}

/* Short phones keep the same readable hierarchy and scroll only inside the stage. */
@media (max-width:760px) and (max-height:700px){
  .stage.active{justify-content:flex-start}
  .hero h1{font-size:34px}
  .hero p{font-size:13px}
  .promise{display:flex}
  .card{padding:16px}
  .stage-heading p{display:block}
  .tool{min-height:0}
  .tool p{display:block;font-size:10px}
}