/* Final audit overrides: keep the review professional, sticky, and fully visible. */
body[data-hc-page="gradient"],body:has(.gradient-shell){overflow-x:visible!important}
.gradient-shell,.gradient-workspace{overflow:visible!important}
.gradient-canvas-panel{
  overflow:hidden!important;
  outline:none!important;
}

.type-scene h3{
  max-width:15ch!important;
  font-size:clamp(2.3rem,7.8cqi,4.6rem)!important;
  line-height:.92!important;
  overflow-wrap:break-word!important;
  text-wrap:balance!important;
}

/* The interface preview is a complete mockup, never a scrollable crop. */
.interface-scene{
  padding:clamp(12px,3cqi,18px)!important;
  overflow:hidden!important;
}
.interface-window{
  display:grid!important;
  grid-template-rows:clamp(36px,7cqi,42px) minmax(0,1fr)!important;
  width:min(760px,92%)!important;
  height:calc(100% - 8px)!important;
  max-height:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.interface-bar{
  min-height:0!important;
  height:auto!important;
}
.interface-content{
  display:flex!important;
  min-height:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:5px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:clamp(10px,2.5cqi,14px) clamp(16px,4cqi,24px)!important;
}
.interface-content>span{
  flex:0 0 auto!important;
  font-size:clamp(.58rem,1.5cqi,.68rem)!important;
}
.interface-content h3{
  flex:0 0 auto!important;
  max-width:18ch!important;
  margin:0!important;
  font-size:clamp(1.5rem,4.8cqi,2.35rem)!important;
  line-height:.98!important;
  overflow-wrap:normal!important;
  text-wrap:balance!important;
}
.interface-content p{
  flex:0 0 auto!important;
  max-width:56ch!important;
  margin:0!important;
  font-size:clamp(.7rem,1.8cqi,.78rem)!important;
  line-height:1.34!important;
}
.interface-content button{
  flex:0 0 auto!important;
  align-self:flex-start!important;
  min-height:32px!important;
  margin:1px 0 0!important;
  padding-inline:13px!important;
}

/* Keep the Pro state visible without placing a floating control over the editor. */
#hcProRoutePreview.gradient-pro-preview-inline{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  min-height:54px!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 20px!important;
  padding:10px 12px 10px 16px!important;
  border-radius:15px!important;
  box-shadow:0 10px 30px rgba(16,24,40,.08)!important;
  transform:none!important;
}
#hcProRoutePreview.gradient-pro-preview-inline>.hc-pro-preview-toggle,
#hcProRoutePreview.gradient-pro-preview-inline>.hc-pro-preview-kicker,
#hcProRoutePreview.gradient-pro-preview-inline>p,
#hcProRoutePreview.gradient-pro-preview-inline>.hc-pro-preview-features,
#hcProRoutePreview.gradient-pro-preview-inline .hc-pro-preview-signin,
#hcProRoutePreview.gradient-pro-preview-inline .hc-pro-preview-price{display:none!important}
#hcProRoutePreview.gradient-pro-preview-inline>.hc-pro-preview-title{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  padding:0!important;
  font-size:.82rem!important;
  line-height:1.3!important;
}
#hcProRoutePreview.gradient-pro-preview-inline>.hc-pro-preview-actions{
  display:block!important;
  flex:0 0 auto!important;
}
#hcProRoutePreview.gradient-pro-preview-inline .hc-pro-preview-cta{
  min-height:36px!important;
  padding:0 13px!important;
  border-radius:9px!important;
  font-size:.7rem!important;
}

/* Keep the primary action unmistakable even after late-loaded global styles. */
.gradient-canvas-panel .canvas-actions #inspireButton{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:138px!important;
  border-color:#111827!important;
  background:#111827!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:.75rem!important;
  font-weight:800!important;
  line-height:1!important;
  text-indent:0!important;
  white-space:nowrap!important;
  opacity:1!important;
  visibility:visible!important;
}
.canvas-actions .icon-button{
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  padding:0!important;
  font-size:1rem!important;
}
.canvas-actions .icon-button:disabled{opacity:.42!important}

html[data-hc-theme="dark"] .gradient-canvas-panel .canvas-actions #inspireButton{
  border-color:#f4f6f8!important;
  background:#f4f6f8!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  opacity:1!important;
}

@media(min-width:1181px){
  .gradient-canvas-panel{
    position:sticky!important;
    top:76px!important;
    max-height:none!important;
    padding:14px!important;
    overflow:hidden!important;
    overscroll-behavior:auto!important;
  }
  .canvas-heading{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    margin:0!important;
    padding:0 0 10px!important;
    border-bottom:0!important;
    background:transparent!important;
  }
  .canvas-heading p:not(.eyebrow){display:none!important}
  .gradient-preview{
    height:clamp(260px,31vh,330px)!important;
  }
  .canvas-scene{padding:28px!important}
  .canvas-scene strong{font-size:clamp(2.8rem,12cqi,5.7rem)!important}
  .interface-window{width:min(760px,88%)!important}
  .interface-content h3{font-size:clamp(1.55rem,3.4cqi,2.25rem)!important}

  .type-scene{padding:24px 28px!important}
  .type-scene h3{
    max-width:15ch!important;
    margin:8px 0 9px!important;
    font-size:clamp(2.2rem,6.3cqi,3.65rem)!important;
    line-height:.92!important;
  }
  .type-scene>p:last-child{
    font-size:.88rem!important;
    line-height:1.42!important;
  }
  .canvas-actions{
    gap:6px!important;
    margin-top:8px!important;
    padding:7px!important;
  }
  .canvas-actions>button{min-height:36px!important}
  .readability-panel{
    margin-top:8px!important;
    padding:10px!important;
  }
  .readability-heading h3{font-size:.88rem!important}
  .readability-heading>strong{
    min-height:28px!important;
    padding:0 9px!important;
    font-size:.66rem!important;
  }
  .readability-stats{
    gap:7px!important;
    margin-top:8px!important;
  }
  .readability-stats article{padding:7px 10px!important}
  .readability-stats strong{font-size:1.08rem!important}
  .readability-stats small{font-size:.6rem!important}
  .readability-samples{
    gap:4px!important;
    margin-top:7px!important;
  }
  .readability-samples span{
    height:20px!important;
    border-radius:6px!important;
  }
  .readability-panel>p{display:none!important}
  .gradient-canvas-panel .hc-inline-handoff{
    gap:5px!important;
    margin-top:7px!important;
    padding-top:7px!important;
  }
  .gradient-canvas-panel .hc-inline-handoff a{min-height:30px!important;padding:0 8px!important}
}

@media(min-width:1181px) and (max-height:820px){
  .gradient-preview{height:250px!important}
  .interface-window{grid-template-rows:34px minmax(0,1fr)!important;height:100%!important}
  .interface-content{gap:3px!important;padding:8px 18px!important}
  .interface-content h3{font-size:clamp(1.35rem,2.9cqi,1.9rem)!important}
  .interface-content p{font-size:.69rem!important;line-height:1.25!important}
  .interface-content button{min-height:28px!important}
  .type-scene h3{font-size:clamp(2rem,5.6cqi,3.25rem)!important}
  .readability-samples span{height:17px!important}
}

@container gradient-preview (max-width:560px){
  .type-scene h3{
    max-width:15ch!important;
    font-size:clamp(2.15rem,9.5cqi,3.7rem)!important;
  }
  .interface-window{width:min(94%,620px)!important}
  .interface-content{gap:4px!important;padding:10px 16px!important}
  .interface-content h3{
    max-width:17ch!important;
    font-size:clamp(1.4rem,6.8cqi,2.05rem)!important;
  }
  .interface-content p{font-size:clamp(.66rem,2.8cqi,.75rem)!important}
}

@media(max-width:620px){
  #hcProRoutePreview.gradient-pro-preview-inline{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:9px!important;
    margin-bottom:14px!important;
    padding:12px!important;
  }
  #hcProRoutePreview.gradient-pro-preview-inline>.hc-pro-preview-actions,
  #hcProRoutePreview.gradient-pro-preview-inline .hc-pro-preview-cta{width:100%!important}
  .gradient-canvas-panel .canvas-actions #inspireButton{
    min-width:0!important;
    white-space:normal!important;
  }
}