:root{
  --zf-stage5-paywall-width: min(540px, 100%);
}

/* ===== Stage 5: paywall & premium conversion + QA polish ===== */

/* Hero: keep the core one-screen layout, but tighten rhythm and keep copy on one line */
#heroText,
h1{
  max-width:none !important;
  white-space:nowrap;
  text-wrap:nowrap;
  letter-spacing:-.03em;
}
.heroHelper{
  max-width:none !important;
  white-space:nowrap;
  text-wrap:nowrap;
  letter-spacing:-.015em;
}
.heroExamplesWrap--modal{
  margin-top:8px;
  width:auto;
}
.heroExamplesModalBtn{
  min-width:154px;
  max-width:188px;
  min-height:40px;
  padding:0 15px;
  border-radius:15px;
  font-size:13px;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.24);
}
.micro--hero{
  margin-top:8px;
}
.heroTrust{
  margin-top:6px;
}

/* Home input shell: make sure animated ghost never visually fights with the border/button */
.search{
  min-height:62px;
  padding:9px 9px 9px 16px;
}
.searchGhost{
  left:18px;
  right:64px;
  line-height:1.15;
}
.search input{
  position:relative;
  z-index:1;
  min-height:24px;
  line-height:1.2;
}
.search button{
  width:44px;
  height:44px;
  border-radius:15px;
}

/* Chat composer: remove the visual feeling of border touching the placeholder/text */
.chatComposer{
  padding-top:6px;
}
.composerRow{
  align-items:stretch;
}
.composerPill{
  min-height:60px;
  padding:8px;
  gap:8px;
  border-color:rgba(255,255,255,.075);
}
.composerPill textarea,
.chatComposer textarea{
  min-height:26px;
  padding:12px 2px 11px;
  line-height:1.34;
}
#chatInput::placeholder,
.composerPill textarea::placeholder{
  line-height:1.34;
}
.composerLegal{
  margin:2px auto 0 !important;
  padding:2px 2px 0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  white-space:nowrap;
  max-width:min(100%, 560px);
}
.composerLegal a{ white-space:nowrap; }

/* Home floating consultation bubble: calmer placement, closer to a premium app FAB */
.edgeDock{
  top:auto !important;
  bottom:max(96px, calc(env(safe-area-inset-bottom) + 78px)) !important;
  right:12px;
  transform:none !important;
}
.edgeDock.is-open,
.edgeDock.is-hidden{
  transform:none !important;
}
.edgeDockBtn{
  width:56px;
  height:56px;
  border-radius:18px;
}
.edgeDrawer{
  max-width:min(380px, calc(100vw - 20px));
  right:12px;
  left:auto;
}

/* Premium modal: slightly sharper conversion framing without changing the system */
.premiumPreviewModal .modalCard,
#premiumPreviewModal .modalCard{
  border-color:rgba(212,176,120,.18);
}
.premiumPreviewLead{
  max-width:62ch;
  color:rgba(246,241,234,.82);
}
.premiumPreviewActions{
  gap:10px;
}
#premiumPreviewBuyBtn,
#premiumPreviewBuyAnnualBtn{
  min-height:48px;
  border-radius:18px;
}
#premiumPreviewBuyAnnualBtn{
  box-shadow:0 18px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.28);
}
.premiumPreviewOffer--annual{
  border-color:rgba(212,176,120,.24);
  box-shadow:0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}

@media (max-width: 820px){
  #heroText,
  h1{
    font-size:clamp(31px, 8.2vw, 40px);
  }
  .heroHelper{
    font-size:clamp(13.5px, 3.9vw, 15px);
  }
  .heroExamplesModalBtn{
    min-width:148px;
    max-width:180px;
    min-height:39px;
    font-size:12.8px;
  }
  .search{
    min-height:60px;
  }
  .searchGhost{
    left:16px;
    right:60px;
  }
  .composerPill{
    min-height:58px;
  }
  .composerPill textarea,
  .chatComposer textarea{
    padding-top:11px;
    padding-bottom:10px;
  }
}

@media (max-width: 560px){
  #heroText,
  h1{
    font-size:clamp(28px, 8.8vw, 34px);
  }
  .heroHelper{
    font-size:clamp(12.8px, 3.65vw, 14px);
  }
  .micro--hero,
  .heroTrustItem{
    font-size:11.5px;
  }
  .heroExamplesWrap--modal{
    margin-top:7px;
  }
  .heroExamplesModalBtn{
    min-width:144px;
    max-width:172px;
    min-height:38px;
    padding-inline:14px;
  }
  .search{
    min-height:58px;
    padding-left:14px;
  }
  .searchGhost{
    left:15px;
    right:58px;
    font-size:14px;
  }
  .composerLegal{
    font-size:10.3px !important;
    letter-spacing:-.012em;
  }
  .edgeDock{
    right:10px;
    bottom:max(90px, calc(env(safe-area-inset-bottom) + 74px)) !important;
  }
  .edgeDockBtn{
    width:54px;
    height:54px;
    border-radius:17px;
  }
  .edgeDrawer{
    max-width:calc(100vw - 16px);
    right:8px;
  }
}

@media (max-width: 390px){
  #heroText,
  h1{
    font-size:clamp(26px, 8.7vw, 30px);
  }
  .heroHelper{
    font-size:12.2px;
  }
  .composerLegal{
    font-size:9.8px !important;
  }
}