/* Host My Blog v2-alive: sitewide interaction layer. Loaded last.
   Owns: button roles, scroll reveal, hero entrance, spotlight, tilt, magnetic, footer wordmark,
   global measure and tap-target fixes, WebGL accent canvas. Older layers use !important, so
   overrides here are body-scoped and use !important where they must win. */

:root{
  --hmba-orange:#EA580C;
  --hmba-coral:#CF4918;
  --hmba-coral-deep:#B83F14;
  --hmba-ink:#09090b;
  --hmba-ease:cubic-bezier(.22,1,.36,1);
  --hmba-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Focus: one ring everywhere, 2px orange                              */
/* ------------------------------------------------------------------ */
body :is(a,button,[role="button"],input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--hmba-orange)!important;
  outline-offset:3px!important;
}
body :is(input,select,textarea):focus-visible{outline-offset:1px!important}

/* ------------------------------------------------------------------ */
/* ROLE A: hero / heading CTA (.btn--primary): large, orange, light     */
/* sweep and arrow slide on hover                                       */
/* ------------------------------------------------------------------ */
body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):not(.rr-subnav-cta):not(.hatch-subnav__cta){
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-height:52px;padding:0 1.7em;border:0!important;border-radius:999px;
  font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1.2;
  color:#fff!important;
  background-color:var(--hmba-coral)!important;
  background-image:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%)!important;
  background-repeat:no-repeat!important;
  background-size:280% 100%!important;
  background-position:135% 0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 12px 26px -12px rgba(207,73,24,.75)!important;
  transition:background-position .95s var(--hmba-ease),background-color .25s,box-shadow .35s var(--hmba-ease),transform .3s var(--hmba-ease),translate .22s cubic-bezier(.16,1,.3,1)!important;
}
body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):not(.rr-subnav-cta):not(.hatch-subnav__cta)::after{
  content:"";display:block;flex:none;width:0;height:1.05em;margin-left:0;opacity:0;
  background:currentColor;
  -webkit-mask:var(--hmba-arrow) center/contain no-repeat;mask:var(--hmba-arrow) center/contain no-repeat;
  transition:width .35s var(--hmba-ease),margin .35s var(--hmba-ease),opacity .25s;
}
body .btn.btn--primary.btn--lg:not(.nav-cta){min-height:60px;padding:0 2.1em;font-size:1.0625rem}
body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):not(.rr-subnav-cta):not(.hatch-subnav__cta):hover{
  background-color:var(--hmba-coral-deep)!important;
  background-position:-35% 0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 18px 34px -12px rgba(207,73,24,.85)!important;
  transform:translateY(-2px)!important;
}
body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):not(.rr-subnav-cta):not(.hatch-subnav__cta):hover::after{width:1.05em;margin-left:.6em;opacity:1}
body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):not(.rr-subnav-cta):not(.hatch-subnav__cta):active{
  transform:translateY(0) scale(.975)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 14px -8px rgba(207,73,24,.8)!important;
  transition-duration:.9s,.1s,.1s,.08s,.1s!important;
}
body .btn.btn--primary.btn--block:not(.nav-cta){width:100%}
body .btn.btn--primary:not(.nav-cta):disabled,
body .btn.btn--primary:not(.nav-cta)[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important;
  background-position:135% 0!important;
}
body .btn.btn--primary:not(.nav-cta):disabled::after{width:0;margin:0;opacity:0}

/* The lead-form submit sits in a light modal card: same role, full width */
body .modal .btn.btn--primary.form-submit{min-height:56px}

/* ------------------------------------------------------------------ */
/* Role A on dark: cream pill (newsletter band, blog hub)               */
/* ------------------------------------------------------------------ */
body .btn.btn--cream{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-height:52px;padding:0 1.7em;border:0!important;border-radius:999px;
  font-size:1rem;font-weight:600;line-height:1.2;
  background-color:#fafafa!important;color:var(--hmba-ink)!important;
  background-image:linear-gradient(112deg,transparent 32%,rgba(234,88,12,.32) 50%,transparent 68%)!important;
  background-repeat:no-repeat!important;background-size:280% 100%!important;background-position:135% 0!important;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6)!important;
  transition:background-position .95s var(--hmba-ease),box-shadow .35s var(--hmba-ease),transform .3s var(--hmba-ease),translate .22s cubic-bezier(.16,1,.3,1)!important;
}
body .btn.btn--cream.btn--lg{min-height:60px;padding:0 2.1em;font-size:1.0625rem}
body .btn.btn--cream::after{
  content:"";display:block;flex:none;width:0;height:1.05em;margin-left:0;opacity:0;background:currentColor;
  -webkit-mask:var(--hmba-arrow) center/contain no-repeat;mask:var(--hmba-arrow) center/contain no-repeat;
  transition:width .35s var(--hmba-ease),margin .35s var(--hmba-ease),opacity .25s;
}
body .btn.btn--cream:hover{background-position:-35% 0!important;transform:translateY(-2px)!important;box-shadow:0 18px 34px -14px rgba(234,88,12,.45)!important}
body .btn.btn--cream:hover::after{width:1.05em;margin-left:.6em;opacity:1}
body .btn.btn--cream:active{transform:translateY(0) scale(.975)!important}

/* ------------------------------------------------------------------ */
/* ROLE B: nav CTA, compact                                             */
/* ------------------------------------------------------------------ */
body .btn.nav-cta{
  position:relative;
  min-height:44px;padding:0 1.25em;border:0!important;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:600;letter-spacing:0;line-height:1;white-space:nowrap;
  color:#fff!important;background:var(--hmba-coral)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 14px -8px rgba(207,73,24,.8)!important;
  transition:background-color .2s,box-shadow .25s var(--hmba-ease),transform .25s var(--hmba-ease)!important;
}
body .btn.nav-cta:hover{background:var(--hmba-coral-deep)!important;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 10px 20px -8px rgba(207,73,24,.85)!important}
body .btn.nav-cta:active{transform:scale(.96)}

/* ------------------------------------------------------------------ */
/* ROLE C: secondary. Outlined, fills on hover.                         */
/* Resting colours stay with the older layers; only fill/press added.   */
/* ------------------------------------------------------------------ */
body .btn:is(.btn--ghost,.btn--outline,.btn--outline-light){
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:0 1.6em;border-width:1.5px!important;border-style:solid!important;border-radius:999px;
  font-size:1rem;font-weight:600;line-height:1.2;background-color:transparent!important;
  background-image:linear-gradient(var(--hmba-ink),var(--hmba-ink))!important;
  background-repeat:no-repeat!important;background-position:50% 100%!important;background-size:100% 0!important;
  transition:background-size .42s var(--hmba-ease),color .28s,border-color .28s,transform .3s var(--hmba-ease)!important;
}
body .btn.btn--lg:is(.btn--ghost,.btn--outline,.btn--outline-light){min-height:60px;padding:0 2em;font-size:1.0625rem}
body .btn:is(.btn--ghost,.btn--outline,.btn--outline-light):hover{
  background-size:100% 100%!important;color:#fafafa!important;border-color:var(--hmba-ink)!important;transform:translateY(-1px);
}
body .btn:is(.btn--ghost,.btn--outline,.btn--outline-light):active{transform:scale(.975)}
/* secondary on dark surfaces: fills light */
body :is(.section--night,.partner-band,.hmb2-footer,[data-nav="dark"],.page-hero,.hmb2b-hero,.hmb2d--hub .hmb2d-hero,
  .page-template-template-about .section.hero,.page-template-template-for-bloggers .section.hero,
  .page-template-template-cited .section.hero,.page-template-template-sitemap .section.hero) .btn:is(.btn--ghost,.btn--outline,.btn--outline-light){
  color:#fafafa;border-color:rgba(255,255,255,.34)!important;
  background-image:linear-gradient(#fafafa,#fafafa)!important;
}
body :is(.section--night,.partner-band,.hmb2-footer,[data-nav="dark"],.page-hero,.hmb2b-hero,.hmb2d--hub .hmb2d-hero,
  .page-template-template-about .section.hero,.page-template-template-for-bloggers .section.hero,
  .page-template-template-cited .section.hero,.page-template-template-sitemap .section.hero) .btn:is(.btn--ghost,.btn--outline,.btn--outline-light):hover{
  color:var(--hmba-ink)!important;border-color:#fafafa!important;
}
body .btn.btn--dark{
  position:relative;overflow:hidden;min-height:52px;padding:0 1.6em;border-radius:999px;font-weight:600;
  transition:background-color .25s,transform .3s var(--hmba-ease),box-shadow .3s!important;
}
body .btn.btn--dark:hover{background-color:var(--hmba-coral)!important;color:#fff!important;transform:translateY(-2px)}
body .btn:disabled:not(.btn--primary),body .btn[aria-disabled="true"]:not(.btn--primary){opacity:.45;cursor:not-allowed;transform:none!important}

/* ------------------------------------------------------------------ */
/* ROLE D: text link. Underline draws in, arrow slides.                 */
/* ------------------------------------------------------------------ */
body a.link-arrow{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  padding-bottom:3px;font-weight:600;text-decoration:none;
  background-image:
    linear-gradient(currentColor,currentColor),
    linear-gradient(color-mix(in srgb,currentColor 26%,transparent),color-mix(in srgb,currentColor 26%,transparent));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0 1.5px,100% 1px;
  transition:background-size .45s var(--hmba-ease),gap .35s var(--hmba-ease),color .2s!important;
}
body a.link-arrow::before{content:"";position:absolute;inset:-12px -6px;}
body a.link-arrow:hover{background-size:100% 1.5px,100% 1px;gap:.85em}
body a.link-arrow .ic,body a.link-arrow svg{transition:transform .35s var(--hmba-ease)}
body a.link-arrow:hover .ic,body a.link-arrow:hover svg{transform:translateX(3px)}
body a.link-arrow:active{opacity:.75}

/* Footer and prose links: same underline language */
body .hmb2-footer :is(.footer-col a,.footer-legal a){
  display:inline-block;padding-block:.45em;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 calc(100% - .28em);background-size:0 1px;
  transition:background-size .4s var(--hmba-ease),color .2s!important;
}
body .hmb2-footer :is(.footer-col a,.footer-legal a):hover{background-size:100% 1px}
body .hmb2-footer .footer-legal{display:flex;flex-wrap:wrap;gap:0 1.1em}
body main .prose a:not(.btn){
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:100% 1px;
  transition:background-size .35s var(--hmba-ease),color .2s;
}
body main .prose a:not(.btn):hover{background-size:0 1px;background-position:100% 100%;color:var(--hmba-orange)}
body .hmb2-footer .footer-contact a{display:inline-flex;align-items:center;min-height:44px}

/* Footer social: 44px hit area, hover lift */
body .hmb2-footer :is(.footer-social a,.footer-social-btn){
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .25s,color .25s,transform .3s var(--hmba-ease),border-color .25s!important;
}
body .hmb2-footer :is(.footer-social a,.footer-social-btn):hover{transform:translateY(-3px)}
body .hmb2-footer :is(.footer-social a,.footer-social-btn):active{transform:scale(.94)}

/* ------------------------------------------------------------------ */
/* Tap targets: 44px minimum on the controls the audit flagged         */
/* ------------------------------------------------------------------ */
body :is(.hmb2-mega-btn,.nav-link,.rr-subnav-cta,.hmb2-subnav-cta,.hatch-subnav__cta,.rr-docs-btn,.rr-docs-cta,.docs-cat-all,.rr-audit-cta,.modal-close){min-height:44px}
body :is(.rr-subnav-cta,.hmb2-subnav-cta,.hatch-subnav__cta,.rr-docs-btn,.rr-docs-cta,.docs-cat-all,.rr-audit-cta){display:inline-flex;align-items:center;justify-content:center}
body .modal-close{min-width:44px}
@media (max-width:900px){
  body .hmb2-drawer a,body .drawer a,body .mobile-menu a{min-height:44px;display:flex;align-items:center}
  body .hmb2-footer .footer-col a{padding-block:.6em}
}

/* ------------------------------------------------------------------ */
/* Reading measure: no paragraph runs past ~70 characters               */
/* ------------------------------------------------------------------ */
body main :is(.sol-card,.qa,.feature-card,.founder__body,.step) p{max-width:68ch}
body main :is(.pl-foot,.flow-caption){max-width:72ch}
body main .prose p,body main .prose li{max-width:70ch}
body main :is(.lead,.section-head p){text-wrap:pretty}
body main :is(h1,h2,.h1,.h2,.h3){text-wrap:balance}

/* ------------------------------------------------------------------ */
/* Global rhythm on small screens                                       */
/* ------------------------------------------------------------------ */
@media (max-width:640px){
  body main .section:not(.hero){padding-block:clamp(52px,14vw,68px)}
  body .section-head{margin-bottom:clamp(28px,8vw,40px)}
}

/* ------------------------------------------------------------------ */
/* Light heroes must not inherit the dark-hero gradient headline        */
/* ------------------------------------------------------------------ */
body.page-template-template-plugins main .section.hero .h1 .grad-text,
body main .hmba-light-hero .h1 .grad-text{
  background:none!important;background-image:none!important;
  -webkit-text-fill-color:#C2410C!important;color:#C2410C!important;
}

/* ------------------------------------------------------------------ */
/* Scroll reveal (JS adds .hmba-r below the fold only, so no-JS is     */
/* fully visible and nothing above the fold ever flashes)              */
/* ------------------------------------------------------------------ */
html.hmba-js .hmba-r{
  opacity:0!important;translate:0 28px;
  transition:opacity .75s var(--hmba-ease) var(--hd,0s),translate .9s var(--hmba-ease) var(--hd,0s);
}
html.hmba-js .hmba-r.hmba-in{opacity:1!important;translate:0 0}
@media (prefers-reduced-motion:reduce){
  html.hmba-js .hmba-r{opacity:1!important;translate:none;transition:none}
}

/* ------------------------------------------------------------------ */
/* Page-load entrance: pure CSS keyframes so there is no flash         */
/* ------------------------------------------------------------------ */
@keyframes hmba-rise{
  from{opacity:0;translate:0 22px;filter:blur(6px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}
@media (prefers-reduced-motion:no-preference){
  body:not(.home):not([class*="template-rankready"]):not(.post-type-archive-docs):not(.single-docs) main > :is(.section.hero,.page-hero,.hmb2b-hero)
  :is(.wrap:not(.hero-grid) > :not(.hero-copy):not(.hmb2b-hero__head),.hero-copy > *,.hero-grid > :not(.hero-copy),.hmb2b-hero__head > *){
    animation:hmba-rise .95s var(--hmba-ease) both;
    animation-delay:.08s;
  }
  body:not(.home):not([class*="template-rankready"]):not(.post-type-archive-docs):not(.single-docs) main > :is(.section.hero,.page-hero,.hmb2b-hero)
  :is(.wrap > :nth-child(2),.hero-copy > :nth-child(2),.hmb2b-hero__head > :nth-child(2)){animation-delay:.18s}
  body:not(.home):not([class*="template-rankready"]):not(.post-type-archive-docs):not(.single-docs) main > :is(.section.hero,.page-hero,.hmb2b-hero)
  :is(.wrap > :nth-child(3),.hero-copy > :nth-child(3),.hmb2b-hero__head > :nth-child(3)){animation-delay:.28s}
  body:not(.home):not([class*="template-rankready"]):not(.post-type-archive-docs):not(.single-docs) main > :is(.section.hero,.page-hero,.hmb2b-hero)
  :is(.wrap > :nth-child(n+4),.hero-copy > :nth-child(n+4),.hero-grid > :not(.hero-copy)){animation-delay:.38s}
}

/* ------------------------------------------------------------------ */
/* Cursor spotlight on dark surfaces (element injected by JS)          */
/* ------------------------------------------------------------------ */
.hmba-spot-host{position:relative;isolation:isolate}
.hmba-spot{
  position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(234,88,12,.17),rgba(251,146,60,.05) 45%,transparent 70%);
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
.hmba-spot-host:hover>.hmba-spot{opacity:1}

/* Footer wordmark: rises into place and catches the cursor light */
.hmb2-footer{--hmba-fp:1}
body .hmb2-footer::after{
  background:
    radial-gradient(38% 120% at var(--mx,50%) 55%,rgba(234,88,12,.5),transparent 70%),
    linear-gradient(180deg,#27272a 0%,#111113 70%,#09090b 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  translate:0 calc((1 - var(--hmba-fp,1)) * 46px);
  opacity:calc(.35 + .65 * var(--hmba-fp,1));
}

/* Tilt cards: smooth return, hover transforms handled inline by JS */
.hmba-tilt{transform-style:preserve-3d;will-change:transform}
.hmba-tilt.hmba-tilting{transition:transform .14s cubic-bezier(.16,1,.3,1)!important}
.hmba-tilt:not(.hmba-tilting){transition:transform .6s var(--hmba-ease),box-shadow .3s!important}

/* ------------------------------------------------------------------ */
/* WebGL hero accent                                                    */
/* ------------------------------------------------------------------ */
.hmba-3d-host{position:relative;isolation:isolate}
.hmba-3d,.hmba-3d-static{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hmba-3d canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.4s cubic-bezier(.22,1,.36,1)}
.hmba-3d.is-live canvas{opacity:1}
.hmba-3d-static svg{position:absolute;right:max(2vw,0px);top:50%;width:min(38vw,520px);height:auto;translate:0 -50%;opacity:.5}
@media (max-width:899px){.hmba-3d,.hmba-3d-static{display:none}}
@media (prefers-reduced-motion:reduce){.hmba-3d canvas{transition:none}}

/* ------------------------------------------------------------------ */
/* Reduced motion: keep every state change, drop the movement          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):hover,
  body .btn.btn--cream:hover,body .btn.btn--dark:hover,body .btn.nav-cta:hover{transform:none!important}
  body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green){transition:background-color .2s,box-shadow .2s!important}
  body .btn:is(.btn--ghost,.btn--outline,.btn--outline-light){transition:color .2s,border-color .2s!important}
  body .hmb2-footer::after{translate:none;opacity:1}
}

/* Contrast repair: care-card copy inherited the light hero colour */
body .care-card .care-line .t{color:#52525b!important}
body .care-card .care-line .t b{color:#09090b!important}
body .care-card .care-sign .who span{color:#71717a!important}

/* Disabled state, final: outranks the resting-state shadow rule */
html body .btn.btn--primary:disabled:disabled,html body .btn.btn--primary[aria-disabled="true"][aria-disabled="true"]{opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important;transform:none!important;translate:none!important;background-position:135% 0!important}
html body .btn.btn--primary:disabled:disabled::after{width:0!important;margin:0!important;opacity:0!important}

/* Disabled state, specificity fix for the size-A rule that carries three :not() */
html body .btn.btn--primary:disabled:disabled:disabled:disabled,html body .btn.btn--primary[aria-disabled="true"][aria-disabled="true"][aria-disabled="true"][aria-disabled="true"]{opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important;transform:none!important;translate:none!important;background-position:135% 0!important}
html body .btn.btn--primary:disabled:disabled:disabled:disabled::after{width:0!important;margin:0!important;opacity:0!important}

/* Hit areas, layout-neutral: taller target, same visual rhythm (padding is cancelled by negative margin) */
body .sol-req,body .tmore,body a.rev-src,body .hmb2-sm-list a,body .hmb2-sm-jump a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
body .hmb2-sm-list a{margin-block:-9px}
@media (max-width:899px){
  body .hmb2-footer a{display:inline-flex;align-items:center;min-height:44px}
  body .hmb2-footer .hmb2-fsocial a,body .hmb2-footer [class*=social] a{min-height:0}
  body .hmb2b-chip{display:inline-flex;align-items:center;min-height:44px}
}
/* Footer tap targets: the earlier layer pins min-height 32 with !important */
@media (max-width:899px){
  html body footer.hmb2-footer .footer-col a,html body footer.hmb2-footer .footer-legal a{display:inline-flex!important;align-items:center;min-height:44px!important}
}
/* Icon gap: role A keeps gap 0 for the arrow reveal, so a leading icon needs its own space */
html body .btn.btn--primary:not(.nav-cta):not(.rr-btn-green):not(.rr-subnav-cta):not(.hatch-subnav__cta):has(> svg,> img,> i){gap:.6em}
html body .btn.btn--primary:not(.nav-cta) > svg{flex:none}

/* 2026-09-28 fixes */
/* Chatwoot: a transform on the bubble holder made its fixed child resolve against the holder, which sits after the footer, and inflated page height by ~830px (blank area below the footer). */
.woot--bubble-holder{transform:none!important}
/* Blog index: newest post without a featured image shows a text-only card, not a grey placeholder. */
:is(body.blog,body.archive:not(.tax-doc_section),body.search,body.error404,body.page-template-template-archive-all) .hmb2b-featured__media.is-empty{display:none}
:is(body.blog,body.archive:not(.tax-doc_section),body.search,body.error404,body.page-template-template-archive-all) .hmb2b-featured:has(.hmb2b-featured__media.is-empty){grid-template-columns:minmax(0,1fr)}
/* Reading progress: keep the top bar and the "min left" pill clear of the WP admin bar and its floating edit pill when logged in. */
body.admin-bar.single-post .hmb2b-progress{top:32px}
@media (max-width:782px){body.admin-bar.single-post .hmb2b-progress{top:46px}}
body.admin-bar.single-post .bx-left{left:190px}

/* 2026-09-28 consistency pass */
/* Section heads: one centred pattern on every template (home already did this). The RankReady docs head stays left because it sits beside a two-column layout. */
body main .section-head:not(.rr-docs):not(.rr-docs-head){max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
body main .section-head:not(.rr-docs):not(.rr-docs-head) :is(.lede,.sub,p){margin-left:auto;margin-right:auto}
body main .section-head:not(.rr-docs):not(.rr-docs-head) .eyebrow{justify-content:center}
/* Stacked heroes (one column) centre their copy and buttons. Two-column desktop heroes keep the copy beside the visual. */
@media (max-width:900px){
  body main .page-hero .hero-copy,body main .hmb2-hero-copy{text-align:center;align-items:center}
  body main .page-hero .hero-copy :is(.lead,.h1){margin-left:auto;margin-right:auto}
  body main .page-hero .hero-copy :is(.hero-ctas,.hero-meta,.hero-trust,.eyebrow){justify-content:center}
}
/* Sitemap: link boxes are 44px tall for tap targets, so the rows must be at least that tall or they overlap. */
.hmb2-sm-list li{min-height:44px;display:flex;align-items:center}
/* Sticky sub navs sit below the admin bar when logged in. */

/* Docs sub nav on phones: links scroll sideways, the button never shrinks, the id label steps aside. */
@media (max-width:640px){
  .hmb2-subnav-row{gap:8px}
  .hmb2-subnav-links{min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
  .hmb2-subnav-links::-webkit-scrollbar{display:none}
  .hmb2-subnav .hmb2-subnav-cta{flex:0 0 auto;white-space:nowrap}
  .hmb2-subnav-id{display:none}
}
/* Blog, archive and search headers centre like every other page header. */
body main .hmb2b-hero__head{text-align:center}
body main .hmb2b-hero__head :is(.h1,h1,.lead){margin-left:auto;margin-right:auto}
body main .hmb2b-hero__head :is(.eyebrow,.hmb2b-chips,.hmb2b-search,form){justify-content:center;margin-left:auto;margin-right:auto}
body main .hmb2b-hero .crumbs,body main .hmb2b-hero__head .bx-stats{justify-content:center}
/* Sitemap header is a single column at every width. */
body main .hmb2-sm-hero .wrap{text-align:center}
body main .hmb2-sm-hero :is(.crumbs,.hmb2-sm-jump){justify-content:center}
/* Stacked heroes without a .hero-copy wrapper (The Cited, others) centre too. */
@media (max-width:900px){
  body main .page-hero .hero-grid{text-align:center}
  body main .page-hero .hero-grid :is(.cited-points,.cited-by,.hero-ctas,.crumbs,.eyebrow){justify-content:center}
  body main .page-hero .hero-grid :is(.lead,.h1){margin-left:auto;margin-right:auto}
}
@media (max-width:900px){
  body main section.hero .hero-grid{text-align:center}
  body main section.hero .hero-grid :is(.cited-points,.cited-by,.hero-ctas,.eyebrow){justify-content:center}
  body main section.hero .hero-grid :is(.lead,.h1){margin-left:auto;margin-right:auto}
  body main .arc-grid h1,body main .arc-grid h1+p{text-align:center;margin-left:auto;margin-right:auto}
}

/* 2026-09-28 motion: one easing family (ease-out .16,1,.3,1 / snap .22,1,.36,1 / in-out .65,0,.35,1) replaced keyword easings site-wide. Global reduced-motion floor, and a fade at the scrolling edge of the docs sub nav. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media (max-width:640px){.hmb2-subnav-links{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}}
/* rr-pricing-2026-09-28: full-matrix pricing cards, sites tag */
body.page-template-template-rankready main .rr .rr-docs-head{margin-bottom:clamp(32px,4vw,56px)}
body.page-template-template-rankready main .rr .price-card .p-sites{display:inline-flex;align-items:center;width:fit-content;margin:10px 0 0;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
body.page-template-template-rankready main .rr .price-card.is-pro.is-popular .p-sites{background:rgba(251,146,60,.14);color:#fdba74;border-color:rgba(251,146,60,.35)}
body.page-template-template-rankready main .rr .price-card .price-list li.is-off{color:#a1a1aa!important}
body.page-template-template-rankready main .rr .price-card.is-pro.is-popular .price-list li.is-off{color:rgba(250,250,250,.38)!important}
body.page-template-template-rankready main .rr .price-card .price-list li.is-off .ic{color:#c4c4cc!important;stroke:#c4c4cc!important;fill:none!important}
body.page-template-template-rankready main .rr .price-card.is-pro.is-popular .price-list li.is-off .ic{color:rgba(250,250,250,.3)!important;stroke:rgba(250,250,250,.3)!important}
/* hero-media-2026-09-28: bring the hero visual up into the first screen and give it presence */
body:not(.hh-off) .hh-inner{gap:clamp(36px,4.5vw,60px)}
body:not(.hh-off) .hh .hero-media{max-width:clamp(360px,42vw,580px)}
@media (max-width:640px){body:not(.hh-off) .hh .hero-media{max-width:min(100%,420px)}}
/* docs-demo-2026-09-28: docs demo spans the section width, CTA sits on the lead's baseline */
body.page-template-template-rankready main .rr .rr-docs-head{align-items:flex-end}
body.page-template-template-rankready main .rr .rv-docsdemo{max-width:none;width:100%}
/* sites-tag-2026-09-28: sites tag sits top right of each pricing card, level with the plan name */
body.page-template-template-rankready main .rr .price-card{position:relative}
body.page-template-template-rankready main .rr .price-card .p-sites{position:absolute;top:clamp(26px,3vw,40px);right:clamp(20px,2.4vw,32px);margin:0}
/* sites-tag-tight-2026-09-28: close the gap the moved tag left under the plan name */
body.page-template-template-rankready main .rr .price-card .price-amt{margin-top:-16px}
/* modal-head-2026-09-28: modal heading and lead line align to the form fields (head carried a second 34px inset) */
body .modal .modal-body>.modal-head{padding-inline:0}
body .modal .modal-body>.modal-head :is(h3,.sub){max-width:none}
/* checker-hover-2026-09-28: one focus ring on the URL bar (the input had its own outline inside the bar's ring), plus hover, press and focus states on the checker */
body.page-template-hmb-arc-checker .rr.arc .arc-bar input,body.page-template-hmb-arc-checker .rr.arc .arc-bar input:focus,body.page-template-hmb-arc-checker .rr.arc .arc-bar input:focus-visible{outline:none !important;box-shadow:none !important;border-radius:13px}
body.page-template-hmb-arc-checker .rr.arc .arc-bar:hover:not(:focus-within){border-color:#c4c4cc;box-shadow:0 1px 0 rgba(9,9,11,.03),0 22px 44px -26px rgba(9,9,11,.42)}
body.page-template-hmb-arc-checker .rr.arc .arc-bar input:hover::placeholder{color:#71717a}
body.page-template-hmb-arc-checker .rr.arc #arcGo{transition:transform .18s var(--ax-e),box-shadow .18s var(--ax-e),background-color .18s var(--ax-e)}
body.page-template-hmb-arc-checker .rr.arc #arcGo:hover:not(:disabled){transform:translateY(-1px)}
body.page-template-hmb-arc-checker .rr.arc #arcGo:active:not(:disabled),body.page-template-hmb-arc-checker .rr.arc .arc-gf .arc-go:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:inset 0 2px 4px rgba(0,0,0,.22)}
body.page-template-hmb-arc-checker .rr.arc #arcGo:focus-visible,body.page-template-hmb-arc-checker .rr.arc .arc-gf .arc-go:focus-visible{outline:2px solid var(--ax-ink) !important;outline-offset:3px !important}
body.page-template-hmb-arc-checker .rr.arc .arc-row{transition:background-color .2s var(--ax-e)}
@media (hover:hover){
body.page-template-hmb-arc-checker .rr.arc[data-arcx="idle"] .arc-row:hover,body.page-template-hmb-arc-checker .rr.arc:not([data-arcx="scan"]) .arc-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
body.page-template-hmb-arc-checker .rr.arc:not([data-arcx="scan"]) .arc-row:hover .arc-rn b{color:#fff}
body.page-template-hmb-arc-checker .rr.arc:not([data-arcx="scan"]) .arc-row:hover .arc-dot:not(:is(.ok *,.warn *,.bad *)){border-color:var(--ax-o2)}
body.page-template-hmb-arc-checker .rr.arc .arc-ck:hover{border-color:rgba(251,146,60,.45);background:#17171b}
body.page-template-hmb-arc-checker .rr.arc .arc-gf :is(input[type=text],input[type=email],select):hover:not(:focus){border-color:rgba(255,255,255,.24)}
}
body.page-template-hmb-arc-checker .rr.arc .arc-ck{transition:border-color .2s var(--ax-e),background-color .2s var(--ax-e)}
body.page-template-hmb-arc-checker .rr.arc .arc-ck:focus-within{border-color:var(--ax-o2)}
body.page-template-hmb-arc-checker .rr.arc .arc-gf :is(input[type=text],input[type=email],select):focus-visible{outline:none !important}
/* hero-split-2026-09-28: homepage hero becomes copy left, product visual right at desktop widths, so the visual sits in the first screen instead of floating small below a wall of dark; the visual gets a dark glass frame and light motion */
body:not(.hh-off) .hh .hero-figure{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:clamp(12px,1.6vw,18px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 60px 120px -40px rgba(234,88,12,.5),0 30px 60px -24px rgba(0,0,0,.75);transform:none !important;animation:hhFloat 8s cubic-bezier(.45,0,.55,1) infinite}
body:not(.hh-off) .hh .hero-media:hover .hero-figure{transform:none !important;border-color:rgba(255,255,255,.24)}
body:not(.hh-off) .hh .hero-figure svg{border-radius:14px}
body:not(.hh-off) .hh .hero-info rect[fill="#09090b"]{stroke:rgba(255,255,255,.16)}
body:not(.hh-off) .hh .hero-info path[stroke-dasharray]{animation:hhFlow 1.2s linear infinite}
body:not(.hh-off) .hh .hero-info path[stroke="url(#hbGrad)"]{stroke-dasharray:420;stroke-dashoffset:420;animation:hhDraw 1.6s .9s cubic-bezier(.32,.72,0,1) forwards}
body:not(.hh-off) .hh .hero-info circle[opacity=".16"]{transform-box:fill-box;transform-origin:center;animation:hhPing 2.4s 2.4s ease-out infinite}
body:not(.hh-off) .hh .hero-info>g>*{animation:hhRise .7s cubic-bezier(.32,.72,0,1) both}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(1){animation-delay:.15s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(2),body:not(.hh-off) .hh .hero-info>g>*:nth-child(3){animation-delay:.3s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(4){animation-delay:.38s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(5){animation-delay:.46s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(6){animation-delay:.56s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(7),body:not(.hh-off) .hh .hero-info>g>*:nth-child(8){animation-delay:.66s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(9){animation-delay:.76s}
body:not(.hh-off) .hh .hero-info>g>*:nth-child(10){animation-delay:.9s}
body:not(.hh-off) .hh .hero-info>g>g{transform-box:fill-box}
@keyframes hhFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes hhFlow{to{stroke-dashoffset:-14}}
@keyframes hhDraw{to{stroke-dashoffset:0}}
@keyframes hhPing{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1.7);opacity:0}}
@keyframes hhRise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
body:not(.hh-off) .hh .hero-figure,body:not(.hh-off) .hh .hero-info *{animation:none !important}
body:not(.hh-off) .hh .hero-info path[stroke="url(#hbGrad)"]{stroke-dashoffset:0}
}

/* hero-awwwards-2026-09-28: Architecture B (asymmetric split). One massive headline anchors the left, the explainer card sits lower on the right, one CTA, grain, staggered deblur entry. Fits one screen. */
body:not(.hh-off) .hh{padding-block:clamp(112px,9vw,136px) 0}
body:not(.hh-off) .hh-inner{width:100%;max-width:min(1360px,100% - 2 * clamp(20px,3.4vw,48px));gap:clamp(40px,5vw,64px)}
body:not(.hh-off) .hh-marquee{margin-top:clamp(56px,7vw,96px)}
body:not(.hh-off) .hh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
body:not(.hh-off) .hh .hh-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 16px 8px 12px;margin:0 0 clamp(20px,2.6vw,32px);border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);color:#a1a1aa;font:600 .72rem/1.3 var(--font-body,Geist,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1),background .5s cubic-bezier(.16,1,.3,1)}
body:not(.hh-off) .hh .hh-pill b{color:#FDBA74;font-weight:600}
body:not(.hh-off) .hh .hh-pill i{flex:none;width:6px;height:6px;border-radius:50%;background:#F97316;box-shadow:0 0 0 4px rgba(249,115,22,.18)}
body:not(.hh-off) .hh .hh-pill .ic{flex:none;width:14px;height:14px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
body:not(.hh-off) .hh .hh-pill:hover{border-color:rgba(249,115,22,.55);background:rgba(249,115,22,.08);color:#fafafa}
body:not(.hh-off) .hh .hh-pill:hover .ic{transform:translateX(3px)}
body:not(.hh-off) .hh .hh-pill:focus-visible{outline:2px solid #FDBA74;outline-offset:3px}
body:not(.hh-off) .hh .h1{letter-spacing:-.035em;word-spacing:.12em;line-height:.98}
body:not(.hh-off) .hh .lead{max-width:44ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.55;color:#d4d4d8}
body:not(.hh-off) .hh .hero-ctas{margin-top:clamp(26px,3vw,38px)}
body:not(.hh-off) .hh .hero-ctas .btn--primary{min-height:52px;padding-inline:34px;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),background-color .3s}
body:not(.hh-off) .hh .hero-ctas .btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 50px -10px rgba(234,88,12,.9)}
body:not(.hh-off) .hh .hero-ctas .btn--primary:active{transform:translateY(0) scale(.98)}
@media (max-width:520px){body:not(.hh-off) .hh .hh-pill{font-size:.64rem;letter-spacing:.05em;padding:8px 12px 8px 10px}}
@media (prefers-reduced-motion:no-preference){
@keyframes hhIn{from{opacity:0;translate:0 30px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
body:not(.hh-off) .hh .hmb2-hero-copy>*,body:not(.hh-off) .hh .hero-media{animation:hhIn .8s cubic-bezier(.16,1,.3,1) both}
body:not(.hh-off) .hh .hmb2-hero-copy>:nth-child(1){animation-delay:.1s}
body:not(.hh-off) .hh .hmb2-hero-copy>:nth-child(2){animation-delay:.22s}
body:not(.hh-off) .hh .hmb2-hero-copy>:nth-child(3){animation-delay:.34s}
body:not(.hh-off) .hh .hmb2-hero-copy>:nth-child(4){animation-delay:.46s}
body:not(.hh-off) .hh .hero-media{animation-delay:.3s}
}

/* hero-center-2026-09-28: centred stack, copy above, explainer card below (Architecture A order) */
body:not(.hh-off) .hh .hmb2-hero-copy{align-items:center;text-align:center;max-width:none}
body:not(.hh-off) .hh .h1{font-size:clamp(2.6rem,6vw,6rem);margin:0 auto}
body:not(.hh-off) .hh .lead{margin:clamp(22px,2.4vw,32px) auto 0;max-width:46ch}
body:not(.hh-off) .hh .hero-ctas{justify-content:center}
body:not(.hh-off) .hh .hh-pill{justify-content:center;text-align:left}
body:not(.hh-off) .hh .hero-media{width:100%;max-width:clamp(400px,32vw,480px);margin:0 auto;align-self:auto;justify-self:auto}
body:not(.hh-off) .hh .hero-figure{width:100%;max-width:none;margin:0 auto}
@media (min-width:640px){body:not(.hh-off) .hh .h1>span{white-space:nowrap}}

/* Animation consistency 2026-10-01: hero entrance is opacity + translate only, glow and figure are static, infographics outside #features are static, text-only expertise and plan sections. */
@keyframes hhIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
body:not(.hh-off) .hh .hmb2-hero-copy>*,body:not(.hh-off) .hh .hero-media{animation-duration:1s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
body:not(.hh-off) .hh .hero-figure{animation:none!important}
body:not(.hh-off) .hh-glow{transform:none!important}
body:not(.hh-off) .hh-glow i{animation:none!important}
body.home :is(#pain,#help,#on-your-domain) .hv-art *,body.home :is(#pain,#help,#on-your-domain) .hv-art{animation:none!important}
body.home :is(#pain,#help,#on-your-domain) .hv-art .dr{stroke-dashoffset:0!important;transition:none!important}
body.home :is(#pain,#help,#on-your-domain) .hv-art .rv{opacity:1!important;transform:none!important;transition:none!important}
body.home :is(#pain,#help,#on-your-domain) .hv-art .sweep,body.home :is(#pain,#help,#on-your-domain) .hv-art .ping{opacity:0!important}
body.home #why .hw-item{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
body.home ul.hv-gets li{grid-template-columns:minmax(0,1fr)!important;gap:0!important;position:relative;padding-left:30px}
body.home ul.hv-gets li::before{content:"";position:absolute;left:6px;top:.28em;width:6px;height:12px;border:solid #EA580C;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* responsive-fix 2026-10-05: subnav CTA hidden on phones (it clipped the links), 44px subnav targets, nav CTA hidden on 320px */
@media (max-width:720px){body .hmb2-subnav .hmb2-subnav-cta{display:none!important}body .hmb2-subnav .hmb2-subnav-links a{min-height:44px;display:inline-flex;align-items:center}}
@media (max-width:374px){body .nav-right .nav-cta{display:none!important}}
/* responsive-fix 2026-10-05: docs sidebar must not render in flow before the drawer JS is ready (CLS 0.5 at tablet) */
@media (max-width:1023.98px){body .hmb2d:not(.is-ready) .hmb2d-side{display:none!important}}

/* nav-parity 2026-10-05: pill pinned top-right of the card so the title never wraps; all cards share one height */
.hmb2-nav .hmb2-mega-spot .hmb2-prod{min-height:172px}
.hmb2-nav .hmb2-mega-spot .hmb2-prod-pill{position:absolute;top:18px;right:18px}