/* Keep the page slab separate from the sticky navigation, as on the canvas. */
.hb .hb-main{padding-top:12px}
/* Below desktop the nav is a full-width dark bar: the dark hero continues
   straight out of it, square on top, rounded only at the bottom. */
@media (max-width:1023px){
  .hb .hb-main{padding-top:0}
  .hb :is(.hbq-hero,.hbv-hero,.hbsp-hero,.hbco-hero,.hbpkit-hero,.hbjr-mast,.hbjr-hero){padding-top:0!important}
  .hb :is(.hbq-slab,.hz-hero-slab,.dt-showcase-slab,.qw-hero-slab,.hbsc-hero-slab,.hbsp-hero-slab,.hbv-hero-slab,.hbpkit-hero-slab,.hbjr-mast-slab,.hbjr-hero-slab,.hbr-mast,.hblegal-hero),
  .hb .hbco-hero>.hb-slab{margin-top:0!important;margin-left:0!important;margin-right:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
}
/* Keep the three remaining product cards balanced. */
.hb .hbnv-products > li:last-child:nth-child(odd){grid-column:1 / -1}

@media(min-width:1024px){.hb main :is(.hz-hero-slab,.qw-hero-slab,.dt-showcase-slab,.hbsc-hero-slab,.hbsp-hero-slab,.hbv-hero-slab){padding:48px 0 40px!important}.hb main :is(.hz-hero-grid,.qw-hero-grid,.dt-showcase-grid,.hbsc-hero-grid,.hbsp-hero-grid,.hbv-hero-grid){gap:36px!important;align-items:center}.hb main :is(.hz-hero,.qw-hero,.dt-showcase,.hbsc-hero,.hbsp-hero,.hbv-hero) h1{font-size:clamp(36px,3.2vw,46px)!important;line-height:1.08!important;margin-top:16px!important}.hb main :is(.hz-hero,.qw-hero,.dt-showcase,.hbsc-hero,.hbsp-hero,.hbv-hero) .hb-lead{font-size:18px!important;line-height:1.45!important;margin-top:18px!important}.hb main :is(.hz-hero,.qw-hero,.dt-showcase,.hbsc-hero,.hbsp-hero,.hbv-hero) .hb-p{font-size:16px!important;line-height:1.45!important;margin-top:12px!important}.hb main :is(.hz-hero,.qw-hero,.dt-showcase,.hbsc-hero,.hbsp-hero,.hbv-hero) :is(.hb-actions,.hbv-actions){margin-top:20px!important}.hb .hbv-hero-img{height:350px!important;aspect-ratio:auto!important}.hb .hbv-hero-media{padding-bottom:48px!important}.hb .hbv-chip{left:-16px}.hb .hbv-proof{margin-top:24px!important;padding-top:16px!important}.hb .dt-example-passages{max-height:180px!important;overflow:auto}.hb .dt-example-card{padding:16px!important}.hb .dt-example-score{padding:12px!important;margin-top:12px!important}.hb .qw-hero-stage,.hb .hz-hero-stage{max-height:460px;overflow:auto}.hb .hbq-stage{height:440px!important;min-height:0!important}.hb .hbq-hero{padding-top:48px!important}.hb .hbq-demo{height:440px!important;min-height:0!important}.hb .hbq-body,.hb .hbq-text,.hb .hbq-empty{min-height:0!important}.hb .hbq .hbq-slab{padding-top:0!important}.hb .hbv-proof li{padding-top:8px!important;padding-bottom:8px!important}.hb .dt-example-card{max-height:470px;overflow:auto}.hb .dt-showcase-copy h1{font-size:40px!important}.hb .dt-showcase-grid{align-items:start}.hb main .hbv-hero h1{font-size:40px!important}.hb .hbv-hero-note{margin-top:12px!important}.hb .hbv-proof{margin-top:16px!important}.hb .dt-showcase-support{margin-top:12px!important}.hb .dt-showcase-slab>.hb-wrap{display:flex;flex-direction:column;gap:16px}.hb .dt-showcase-slab>.hb-wrap>*{margin-top:0!important}.hb .dt-showcase-title{font-size:38px!important}.hb .hbq-copy h1{font-size:44px!important;line-height:1.08!important}}.hb-support-pricing .hbsp-hero{.hb-slab.hbsp-hero-slab{padding:56px 0 52px}.hbsp-hero-field{height:520px}.hbsp-hero-grid{gap:48px;align-items:center}.hbsp-h1{margin-top:18px;font-size:clamp(36px,3.6vw,50px)}.hbsp-lead{margin-top:18px;font-size:19px}.hbsp-support{margin-top:10px;font-size:16px}.hbsp-hero-actions{margin-top:24px}.hbsp-hero-terms{margin-top:24px;padding-top:16px;font-size:14px}.hbsp-fit{padding:18px 18px 16px}.hbsp-fit-head{padding-bottom:12px}.hbsp-fit-title{font-size:13px}.hbsp-fit-note{font-size:14px}.hbsp-fit-q{padding-top:14px}.hbsp-fit-q legend{float:left;width:100%;margin-bottom:8px;font-size:15px}.hbsp-fit-q legend+*{clear:both}.hbsp-fit-opts,.hbsp-fit-opts.four{gap:6px}.hbsp-fit-opts.four{grid-template-columns:repeat(4,minmax(0,1fr))}.hbsp-fit-opt{min-height:0;padding:9px 10px;gap:2px;border-radius:8px}.hbsp-fit-opt-label{font-size:14.5px}.hbsp-fit-opt-hint{font-size:12.5px;line-height:1.3}.hbsp-fit-result{margin-top:14px;padding:12px 14px;gap:12px;flex-wrap:nowrap}.hbsp-fit-result-k{font-size:12.5px}.hbsp-fit-result-text strong{font-size:20px}.hbsp-fit-result-why{font-size:13.5px;line-height:1.4}.hbsp-fit-result-price{font-size:13px}.hbsp-fit-go{min-height:40px;padding:0 14px;font-size:14px;flex-shrink:0}}@media(max-width:1100px){.hb-support-pricing .hbsp-hero .hbsp-fit-opts.four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.hb-support-pricing .hbsp-hero{.hb-slab.hbsp-hero-slab{padding:44px 0 40px}.hbsp-h1{font-size:clamp(32px,8.6vw,38px)}.hbsp-hero-grid{gap:28px}.hbsp-fit-opts,.hbsp-fit-opts.four{grid-template-columns:minmax(0,1fr)}.hbsp-fit-result{flex-wrap:wrap}}}

/* The dark slab owns its inset. Never move that space outside the slab. */
@media (min-width:1024px) {
  .hb .hbq-hero { padding-top:0!important; }
  .hb .hbq .hbq-slab { padding-top:52px!important; }
  .hb main .hbsp-hero-slab { padding-top:64px!important; padding-bottom:44px!important; }
}

/* The demo card is narrower than the viewport: four columns cannot fit
   readable stage labels beside their icons. Keep both rows legible. */
.hb .hbq-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
.hb .hbq-rail li:nth-child(2){border-right:0}
.hb .hbq-rail li:nth-child(-n+2){border-bottom:1px solid var(--mist)}
/* The initial card fits the laptop fold. Once the sample starts, let the
   card grow naturally so its text, scores and controls cannot overlap. */
@media (min-width:1024px){
  .hb .hbq-stage:has(:is(.hbq-result,.hbq-text.scanning)),
  .hb .hbq-demo:has(:is(.hbq-result,.hbq-text.scanning)){height:auto!important}
  .hb .hbq-demo:has(:is(.hbq-result,.hbq-text.scanning)){min-height:440px!important}
  .hb .hbq-body:has(:is(.hbq-result,.hbq-text.scanning)){flex:0 0 auto}
}

/* Keep the mode badges and credit estimates inside their option cards. */
.hb .hb-support-pricing .hbpr-hero .hbpr-beats{
  max-width:100%; min-width:0; box-sizing:border-box;
  white-space:normal; font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:normal; line-height:1.2; text-transform:none;
  padding:4px 9px; border-radius:7px; margin-top:4px;
}
.hb .hb-support-pricing .hbpr-hero .hbpr-beats:before,
.hb .hb-support-pricing .hbpr-hero .hbpr-mode-note-dot{display:none}
.hb .hb-support-pricing .hbpr-hero .hbpr-need,
.hb .hb-support-pricing .hbpr-hero .hbpr-need em{font-size:15px; letter-spacing:normal}

/* Footnote asterisks arrive as plain text ("…the most weight. *Passes Pangram 4.1")
   because page copy is stored as text in the editor. assets/js/site.js wraps a mark
   character in <sup class="hb-star">; size and raise it so its top meets the cap
   height of the neighbouring text without adding a line box. */
sup.hb-star{font-size:.62em; line-height:0; vertical-align:super; position:relative; top:.2em}