/* Montserrat + Poppins (OFL), self-hosted, same weight map as thebusinesstoolkit.com tbt-fonts.css */
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 300;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-Regular.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 400;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-Regular.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 500;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-SemiBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 600;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-SemiBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 700;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-ExtraBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 800;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-ExtraBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Montserrat';
		  font-style: normal;
		  font-weight: 900;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Montserrat-ExtraBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 300;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-Regular.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 400;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-Regular.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 500;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-SemiBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 600;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-SemiBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 700;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-ExtraBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 800;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-ExtraBold.woff2') format('woff2');
		}
@font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 900;
		  font-display: swap;
		  src: url('/assets/fonts/tbt/Poppins-ExtraBold.woff2') format('woff2');
		}

/* rw-arrow-buttons (Hamza 2026-09-30: "use the arrow buttons everywhere").
   Lives here because this is the one stylesheet every page loads. Values measured from the
   service-hero buttons (scripts/svc_heroes.py .sxh-arr): 34px white circle, 15px arrow #0a0c0d,
   14px gap, 9px right padding, hover nudge 2px in 160ms. Buttons that already carry
   <i class="sxh-arr"> are skipped so no button gets two arrows. */
.btn.btn-p:not(:has(.sxh-arr)),.btn.btn-s:not(:has(.sxh-arr)){gap:14px;padding-right:9px;justify-content:center}
/* Hamza 9/30 round 3: arrow sits next to the text (his reference screenshot), buttons fit their content, never full-width on phones */
.btn.btn-p:not(:has(.sxh-arr))::after,.btn.btn-s:not(:has(.sxh-arr))::after{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:99px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0c0d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  transition:transform .16s ease-out}
.btn.btn-p:not(:has(.sxh-arr)):hover::after,.btn.btn-s:not(:has(.sxh-arr)):hover::after{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.btn.btn-p::after,.btn.btn-s::after,.sxh-arr{transition:none}}
/* Phones: pages that forced two buttons onto one row (pricing, add-ons) no longer fit with the arrow,
   so the pair stacks full width exactly like the homepage hero (measured: column, gap 12px, 44px tall).
   Service heroes (.sxh-arrbtns) and slider arrows are left alone. */
@media (max-width:560px){
  html body #tbtchrome .btns:not(.sxh-arrbtns):has(> .btn-p),html body .tbt .btns:not(.sxh-arrbtns):has(> .btn-p){display:inline-flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:12px !important;width:max-content !important;max-width:100% !important}
  html body #tbtchrome .btns:not(.sxh-arrbtns):has(> .btn-p) > .btn,html body .tbt .btns:not(.sxh-arrbtns):has(> .btn-p) > .btn{width:auto !important;height:48px !important;justify-content:center !important;gap:14px !important;padding:0 9px 0 24px !important}
}
/* Footer "BOOK A CALL" (.footer-cta-btn, shared footer on every page) gets the same arrow (Hamza 9/30) */
html body footer.footer .footer-top > .footer-cta a.footer-cta-btn,html body .footer-cta-btn{gap:14px;padding-right:9px !important}
.footer-cta-btn::after{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:99px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0c0d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  transition:transform .16s ease-out}
.footer-cta-btn:hover::after{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.footer-cta-btn::after{transition:none}}
/* Referral page pills (.rt-btn, 48px) and pricing card "START BUILDING" (.snow, 38px) get the arrow too.
   .snow is 38px tall, so its circle scales to 28px to keep the same inset. */
html body .tbt .rt-btn,html body .rt-btn{gap:14px;padding-right:7px !important;justify-content:center}
html body .tbt .tcol .tnm .snow,html body .tbt .tcol .snow,html body .tbt .snow,html body .snow{display:flex;align-items:center;justify-content:center;gap:10px;padding-right:5px !important}
.rt-btn::after,.snow::after{content:"";flex:0 0 auto;border-radius:99px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0c0d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  transition:transform .16s ease-out}
.rt-btn::after{width:34px;height:34px}
.snow::after{width:28px;height:28px;background-size:13px 13px}
.rt-btn:hover::after,.snow:hover::after{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.rt-btn::after,.snow::after{transition:none}}

/* rw-a11y-skin (Hamza 2026-09-30: "missing the new styling, no icons"). rankwyre.com ONLY: the shared
   widget (~/Studio/tools/a11y/widget/rw-a11y.js) stays neutral for the other client sites; this block
   re-skins it here from measured site components:
   trigger = header icon button (46px gradient #20252a->#191d21, radius 14, inset .09 + 0 3px 7px .5),
     kept at 48px for the WCAG 2.5.8 target size the widget chose on purpose;
   row icons = referral chip icon square (.rt-ico: 32px, radius 9, gradient #5a80f2->#3f52c9, 18px glyph);
   reset = blog chip style (gradient #20252a->#191d21, radius 11, Montserrat 700 12px uppercase .06em);
   surfaces/ink = DESIGN.md tokens (#0e1114 panel, #0a0c0d sunk, #f3f5f7 ink, #98a2ac grey, #4a74f0).
   "html body" prefix outranks the widget's injected <style>, which loads after this file. */
html body .rw-a11y-ui{--rw-bg:#0e1114;--rw-ink:#f3f5f7;--rw-muted:#98a2ac;--rw-line:rgba(255,255,255,.07);
  --rw-hover:rgba(255,255,255,.035);--rw-sel:rgba(74,116,240,.08);--rw-selline:rgba(74,116,240,.28);--rw-accent:#4a74f0;
  font-family:"Poppins",system-ui,sans-serif}
html body .rw-a11y-fab,html body .rw-a11y-fab.rw-a11y-ondark{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(#20252a,#191d21);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 3px 7px rgba(0,0,0,.5);transition:border-color .15s ease-out,transform .15s ease-out}
html body .rw-a11y-fab:hover,html body .rw-a11y-fab.rw-a11y-ondark:hover{background:linear-gradient(#262c32,#1d2226);border-color:rgba(111,147,247,.55);transform:translateY(-1px)}
html body .rw-a11y-fab svg{width:24px;height:24px}
html body .rw-a11y-fab:focus-visible{outline:3px solid #6f93f7;outline-offset:3px}

html body .rw-a11y-panel{width:min(392px,calc(100vw - 24px));border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#0e1114;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -12px rgba(0,0,0,.85)}
html body .rw-a11y-panel::backdrop{background:rgba(5,6,7,.62)}
html body .rw-a11y-head{padding:16px 16px 14px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
html body .rw-a11y-head h2{display:flex;align-items:center;gap:11px;font:700 17px/1.2 "Montserrat",system-ui,sans-serif;letter-spacing:-.01em;color:#f3f5f7}
html body .rw-a11y-head h2::before{content:"";flex:none;width:32px;height:32px;border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.2' r='1.9' fill='white' stroke='none'/%3E%3Cpath d='M4.6 8.2c2.4.9 4.9 1.4 7.4 1.4s5-.5 7.4-1.4M12 9.6v4.6M12 14.2 9.2 21M12 14.2 14.8 21'/%3E%3C/svg%3E") center/18px 18px no-repeat,linear-gradient(90deg,#2557e6,#2557e6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px -8px rgba(0,0,0,.8)}
html body .rw-a11y-x{width:36px;height:36px;border-radius:11px;border:0;color:#aeb6be;
  background:linear-gradient(#20252a,#191d21);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.5)}
html body .rw-a11y-x:hover{color:#fff;background:linear-gradient(#262c32,#1d2226)}
html body .rw-a11y-scroll{padding:8px}

/* one shared row shape for text size and the six toggles: icon square | text | control */
html body .rw-a11y-step,html body .rw-a11y-row label{display:flex;align-items:center;gap:12px;padding:11px 10px;border:1px solid transparent;border-radius:12px}
html body .rw-a11y-step{border-bottom:0;margin-bottom:2px;background:#0a0c0d}
html body .rw-a11y-row{border-bottom:0;margin-top:2px}
html body .rw-a11y-row label:hover{background:rgba(255,255,255,.035)}
html body .rw-a11y-row:has(input:checked) label{background:rgba(74,116,240,.08);border-color:rgba(74,116,240,.28)}
html body .rw-a11y-step .lbl::before,html body .rw-a11y-row label::before{content:"";flex:none;width:32px;height:32px;border-radius:9px;
  background:var(--rwi) center/18px 18px no-repeat,linear-gradient(90deg,#2557e6,#2557e6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px -8px rgba(0,0,0,.8)}
html body .rw-a11y-step .lbl{display:flex;align-items:center;gap:12px;font:600 14px/1.3 "Poppins",system-ui,sans-serif;color:#f3f5f7}
html body .rw-a11y-row .txt{flex:1}
html body .rw-a11y-row .t{font:600 14px/1.3 "Poppins",system-ui,sans-serif;color:#f3f5f7}
html body .rw-a11y-row .d{font:400 12.5px/1.4 "Poppins",system-ui,sans-serif;color:#98a2ac;margin-top:2px}

/* stepper buttons = small header icon buttons */
html body .rw-a11y-step button{width:34px;height:34px;border:0;border-radius:10px;color:#fff;font:600 17px/1 "Poppins",system-ui,sans-serif;
  background:linear-gradient(#20252a,#191d21);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 4px rgba(0,0,0,.5)}
html body .rw-a11y-step button:hover:not(:disabled){background:linear-gradient(#262c32,#1d2226)}
html body .rw-a11y-step output{min-width:48px;font:700 13px/1 "Montserrat",system-ui,sans-serif;color:#f3f5f7}

/* checkbox becomes a switch (still a real checkbox underneath, so keyboard and screen readers are unchanged) */
html body .rw-a11y-box{order:3;position:relative;width:40px;height:24px;margin:0;border-radius:99px;border:0;
  background:#1b1f23;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);transition:background .15s ease-out}
html body .rw-a11y-box svg{display:none}
html body .rw-a11y-box::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:#aeb6be;box-shadow:0 1px 3px rgba(0,0,0,.6);transition:transform .15s ease-out,background .15s ease-out}
html body .rw-a11y-row input:checked ~ .rw-a11y-box{background:linear-gradient(90deg,#2557e6,#2557e6);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
html body .rw-a11y-row input:checked ~ .rw-a11y-box::after{transform:translateX(16px);background:#fff}
html body .rw-a11y-row input:focus-visible ~ .rw-a11y-box{outline:2px solid #6f93f7;outline-offset:3px}

/* row icons (24px viewBox, white 1.8 stroke) */
html body .rw-a11y-step{--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="motion"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 15V9M14 15V9'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="contrast"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='white'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="underline"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4M4 20h16'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="readable"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 12 4l8 16M7.5 13h9'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="spacing"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12H3M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="focus"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

html body .rw-a11y-foot{padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.07);background:#0e1114}
html body .rw-a11y-foot button{height:40px;padding:0 16px;border:0;border-radius:11px;color:#aeb6be;
  font:700 12px/1 "Montserrat",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(#20252a,#191d21);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.5),0 8px 18px -6px rgba(0,0,0,.7)}
html body .rw-a11y-foot button:hover{color:#fff;background:linear-gradient(#262c32,#1d2226)}
@media (prefers-reduced-motion:reduce){html body .rw-a11y-fab,html body .rw-a11y-box,html body .rw-a11y-box::after{transition:none}}
/* skin header (~69px) + footer (~67px) are taller than the widget's 118px allowance */
html body .rw-a11y-scroll{max-height:calc(min(640px,100vh - 32px) - 140px)}
/* Hamza 9/30 round 2: teal outlines read as blue, and white-on-teal icons were hard to see (~2.5:1).
   Icons flip to the header-button dark square with a #6f93f7 glyph; outlines go neutral white. */
html body .rw-a11y-head h2::before,html body .rw-a11y-step .lbl::before,html body .rw-a11y-row label::before{
  background:var(--rwi) center/18px 18px no-repeat,linear-gradient(#20252a,#191d21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.06),0 3px 7px rgba(0,0,0,.5)}
html body .rw-a11y-head h2{--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.2' r='1.9' fill='%236f93f7' stroke='none'/%3E%3Cpath d='M4.6 8.2c2.4.9 4.9 1.4 7.4 1.4s5-.5 7.4-1.4M12 9.6v4.6M12 14.2 9.2 21M12 14.2 14.8 21'/%3E%3C/svg%3E")}
html body .rw-a11y-step{--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="motion"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 15V9M14 15V9'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="contrast"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%236f93f7'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="underline"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4M4 20h16'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="readable"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 12 4l8 16M7.5 13h9'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="spacing"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12H3M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="focus"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
/* neutral outlines: hover border, keyboard focus rings, selected row */
html body .rw-a11y-fab:hover,html body .rw-a11y-fab.rw-a11y-ondark:hover{border-color:rgba(255,255,255,.3)}
html body .rw-a11y-fab:focus-visible,html body .rw-a11y-fab.rw-a11y-ondark:focus-visible,html body .rw-a11y-x:focus-visible,
html body .rw-a11y-step button:focus-visible,html body .rw-a11y-foot button:focus-visible,
html body .rw-a11y-row input:focus-visible ~ .rw-a11y-box{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}
html body .rw-a11y-row:has(input:checked) label{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
/* lone CTA at the end of the homepage case block was stretched full width on phones (Hamza 9/30: never full width) */
@media (max-width:560px){html body .tbt .case-end > .btn{width:auto !important;flex:0 0 auto !important;max-width:100%}}
/* plan guarantee cards (.guar .gi), Hamza 9/30: "very small and on mobile really hard to see".
   Was 12.5px title / 11px text, only the seal card had an icon, two per row on phones.
   Now: every card gets a 36px header-button icon square (teal check, the seal card keeps its seal),
   15px title, 13.5px text, one card per row on phones. */
html body .tbt .guar .gi{display:block !important;position:relative;padding:16px 16px 16px 66px !important;min-height:68px;
  font-size:13.5px !important;line-height:1.45 !important;color:#98a2ac !important}
html body .tbt .guar .gi em{font-size:15px !important;line-height:1.3 !important;margin-bottom:2px}
html body .tbt .guar .gi:not(.gseal)::before{content:"";position:absolute;left:16px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f93f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.3 12.2 2.5 2.5 4.9-5.1'/%3E%3C/svg%3E") center/20px 20px no-repeat,linear-gradient(#20252a,#191d21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.06),0 3px 7px rgba(0,0,0,.5)}
html body .tbt .guar .gseal svg{position:absolute;left:16px;top:50%;margin-top:-18px;width:36px !important;height:36px !important;padding:7px;border-radius:10px;
  background:linear-gradient(#20252a,#191d21);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.06),0 3px 7px rgba(0,0,0,.5)}
@media (max-width:560px){html body .tbt .guar .grid-g{grid-template-columns:1fr !important;gap:10px !important}}
html body .tbt .guar .gi em{display:block !important}

/* rw-mobile-nav-compact (Hamza 9/30): "I have to scroll down to see it" + "Resources shouldn't be highlighted unless opened".
   Same style, tighter layout: main links two per row, Resources full width, its links two per row when open.
   Teal on Resources only while it is open; touch screens no longer keep the sticky :hover teal. */
html body #tbtchrome .ms-nav{display:grid !important;grid-template-columns:1fr 1fr;column-gap:6px;row-gap:2px}
html body #tbtchrome .ms-nav > a{min-height:42px !important;display:flex;align-items:center}
html body #tbtchrome .ms-nav > button.ms-acc,html body #tbtchrome .ms-nav > .ms-sub{grid-column:1 / -1}
html body #tbtchrome .ms-nav > .ms-sub.open{max-height:360px !important;display:grid;grid-template-columns:1fr 1fr;column-gap:6px}
html body #tbtchrome .ms-nav > .ms-sub a{min-height:40px;display:flex;align-items:center}
@media (hover:none){html body #tbtchrome .ms-nav > button.ms-acc:hover,html body #tbtchrome .ms-nav > button.ms-acc:focus{color:var(--tx) !important}}
html body #tbtchrome .ms-nav > button.ms-acc.open,html body #tbtchrome .ms-nav > button.ms-acc.open:hover{color:#6f93f7 !important}
/* rw-mobile-nav-compact, round 2 (measured at 375x667: list overflowed by 97px). Resources takes the empty
   half-row beside Sign in; rows and gaps trimmed a few px each; same colors, fonts and shapes. */
html body #tbtchrome .ms-nav > button.ms-acc{grid-column:auto !important;min-height:42px !important}
html body #tbtchrome .ms-nav{padding-top:8px !important;margin-top:2px !important}
html body #tbtchrome #msCats{margin-bottom:8px !important}
html body #tbtchrome #msCats > *{height:40px !important;min-height:40px !important}
html body #tbtchrome #msList{margin-top:6px !important;margin-bottom:4px !important}
html body #tbtchrome #msList a{padding-top:5px !important;padding-bottom:5px !important;min-height:32px}
html body #tbtchrome .ms-top{margin-bottom:9px !important}
html body #tbtchrome .ms-ctas{padding:10px 12px !important;gap:7px !important;margin-top:10px !important}
/* the pinned START BUILDING / CALL block (~130px) covers the bottom of the menu; scrolling Resources into view must clear it */
html body #tbtchrome .ms-p,html body #tbtchrome .msheet{scroll-padding-bottom:150px}
html body #tbtchrome .ms-scroll{scroll-padding-bottom:150px}
/* Resources links match the service list above them (measured #msList a: Poppins 14px, 7px 8px padding)
   instead of 3-line uppercase stacks in two narrow columns */
html body #tbtchrome .ms-nav > .ms-sub a{text-transform:none !important;letter-spacing:0 !important;font:500 14px/1.3 "Poppins",system-ui,sans-serif !important;
  padding:7px 8px !important;min-height:34px;border-radius:9px}
html body #tbtchrome .ms-nav > .ms-sub.open{padding:2px 0 6px}

/* Hamza 9/30: "no title should be messed up like this" (e.g. "Web Design & Digital Marketing in Miami, FL" breaking
   into 4 ragged lines with "FL" orphaned). Balance every heading's line breaks site-wide; body copy uses pretty wrap. */
html body :is(h1,h2,h3){text-wrap:balance}
html body :is(p,li){text-wrap:pretty}
/* Hamza 9/30: rocket tip looked cut off. The glyph filled its white circle edge to edge (21px glyph, 6px padding);
   same 33px / 37px circle, smaller glyph, so the tip clears the edge. */
html body #tbtchrome .rsb svg.rkt{width:16px !important;height:16px !important;padding:8.5px !important;box-sizing:content-box}
html body #tbtchrome .ms-start svg.rkt{width:18px !important;height:18px !important;padding:9.5px !important;box-sizing:content-box}
/* Footer "Add Rankwyre as a preferred source on Google" (punch list #5, all pages): two lines and readable on phones.
   The chrome stamps a late <style> with the same selector + !important, so this adds an id-level :not() to outrank it. */
@media(max-width:560px){html body footer.footer a.rw-pref:not(#rw-x){font-size:15.5px !important;font-weight:500 !important;line-height:1.35 !important;letter-spacing:.01em !important;padding:12px 16px !important;align-items:flex-start !important;white-space:normal !important;text-transform:none !important}}
@media(max-width:420px){html body footer.footer a.rw-pref:not(#rw-x){font-size:15px !important;padding:11px 14px !important}}

/* ===== rw-deslop-2026-10-15 (Hamza 10/15: remove the cartoonish look; KEEP the hand-drawn scribbles and the blog
   cover art). Every colour below already exists in the site: #2557e6 is the first stop of the old button gradient,
   #5e8bf6 the first stop of the old text gradient, --panel the TBT card surface. Roll back by deleting this block. */

/* 1. section eyebrows: plain letterspaced label, no chip, no pulsing icon tile */
html body .tbt .eb:not(#_){background:none !important;box-shadow:none !important;border:0 !important;padding:0 !important;border-radius:0 !important}
html body .tbt .eb:not(#_) .ei{display:none !important}

/* 2. primary buttons: one solid accent, no gradient, no purple glow */
html body .tbt .btn-p:not(#_),html body #tbtchrome .btn-p:not(#_){background:#2557e6 !important;box-shadow:none !important}

/* 3. headline accent words (Hamza 10/15): a solid blue box with white text, on every page. The home hero keeps its
   tilted box; everywhere else a rotating headline boxes only the changing word, and the box resizes to each word
   (script: rw-rot-fit in the header block). Fixed phrases box the phrase. */
html body .tbt .hero.hero-c h1 em:not(#_){background:#2557e6 !important;box-shadow:none !important}
html body h1 em:not(#_):not(#__),html body h1 em:not(#_):not(#__) .rot b:not(#_){-webkit-background-clip:border-box !important;background-clip:border-box !important;background-image:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important}
html body h1 em:not(.hero-c *):has(.rot):not(.pf-pill):not(.rt-tag):not(#_){background:none !important;box-shadow:none !important;border:0 !important;padding:0 !important}
html body h1 em:not(.hero-c *):not(.pf-pill):not(.rt-tag):not(#_) .rot{background:#2557e6 !important;border-radius:.28em !important;box-shadow:none !important;margin:.1em .1em 0 !important;padding:0 .18em !important;height:1.18em !important;top:.06em !important;box-sizing:content-box !important;transition:width .75s cubic-bezier(.76,0,.24,1)}
html body h1 em:not(.hero-c *):not(.pf-pill):not(.rt-tag):not(#_) .rot b{line-height:1.18em !important}
html body h1 em:not(.hero-c *) .rot.js:not(#_) b{animation:none !important;transition:transform .75s cubic-bezier(.76,0,.24,1)}
html body h1 em:not(.hero-c *):not(:has(.rot)):not(#_):not(#__),html body h1 em.pf-pill:not(#_):not(#__),html body h1 em.rt-tag:not(#_):not(#__){background:#2557e6 !important;border-color:transparent !important;box-shadow:none !important;border-radius:.28em !important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 10/16: .09em top and .11em bottom: the text sits optically centred (Hamza: "not centred") and a comma or a comma or descender (g, p, y) stays inside the box instead of hanging below it */
html body h1 em:not(.hero-c *):not(:has(.rot)):not(.pf-pill):not(.rt-tag):not(#_):not(#__){padding:.09em .2em .11em !important}
/* room between a boxed line and the line above it */
html body h1:has(em):not(.hero-c *):not(#_){line-height:1.16 !important}
@media (prefers-reduced-motion:reduce){html body h1 em .rot:not(#_){transition:none !important}}

/* 3b. the two promo pills above the header stay (Hamza 10/15), solid blue like the buttons, no glow */
html body #tbtchrome .top > i:not(#_):not(#__){background:#2557e6 !important;box-shadow:none !important}  /* :not(#__) outranks the chrome's own late rule */

/* 4. no rule under every section heading */
html body .tbt .h2:not(#_){border-bottom:0 !important;padding-bottom:0 !important}

/* 5. one neutral surface for the services carousel cards */
/* (tool rail keeps its own per-tool colours, Hamza 10/15) */
html body .tbt .rw-slide:not(#_){background:var(--panel) !important}

/* 6. the -20% badge: static blue tag */
/* Hamza 10/15: keep the -20% label, but static: solid brand blue, small square-cornered tag, no red, no pulsing ring */
html body .tbt .offp:not(#_){background:#2557e6 !important;color:#fff !important;box-shadow:none !important;animation:none !important;border-radius:6px !important}
html body .tbt .offp:not(#_)::after,html body .tbt .offp:not(#_)::before{display:none !important;animation:none !important}

/* 7. no flickering lightning sparkles next to headings */
html body .tbt .spk .pk:not(#_){display:none !important}
/* 8. footer column headings: the underline in the darker brand blue (Hamza 10/15) */
html body .footer-col h2:not(#_)::after{background:#2557e6 !important}

/* 9. tool and glossary heroes: the site's true black instead of a navy wash (Hamza 10/15) */
html body .tbt .tool-hero:not(#_){background:#050607 !important}

/* 10. pricing plan cards (Hamza 10/15 "fix how these buttons look"): plan name left, one normal-sized Start building
   pill right, same at every width. Replaces the stacked full-width version, which grew to 81px tall on phones and ran
   off the card. Wins over the older .snow rules (several conflicting layers) via the doubled :not() specificity. */
html body .tbt .tcol .tnm:not(#_):not(#__){display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;row-gap:10px !important}
html body .tbt .tcol .tnm:not(#_):not(#__) .snow{flex:0 0 auto !important;width:auto !important;max-width:none !important;height:40px !important;min-height:0 !important;margin:0 0 0 auto !important;padding:0 6px 0 18px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;font-size:12px !important;line-height:1 !important;letter-spacing:.04em !important;white-space:nowrap !important;border-radius:99px !important;box-shadow:none !important}
html body .tbt .tcol .tnm:not(#_):not(#__) .snow::after{width:28px !important;height:28px !important}
html body .tbt .snow:not(#_){box-shadow:none !important}

/* 11. service heroes with the image marquee on the right: keep the headline out of the images */
@media (min-width:1100px){html body .tbt .sxh.v2-mqh:not(#_) h1{max-width:740px !important}}
/* 12. state pages: 'Where we work' sits right under 'What we do', so no double section padding between them */
html body .tbt .loc-where:not(#_){padding-top:8px !important}
/* ===== end rw-deslop-2026-10-15 ===== */
/* 10/15: a blue headline phrase that wraps onto two lines needs room between its boxes, and between the box and the
   line above it (Hamza: "why are these overlapping"). Only headlines with a fixed phrase box, not the rotating word. */
html body h1:has(em):not(:has(.rot)):not(.hero-c *):not(#_):not(#__){line-height:1.5 !important}

/* 10/15 pricing website cards: monthly is the default view, so the struck price, the -20% tag beside the price and
   "paid annually" only show with the annual switch on; in monthly view the saving sits on its own line underneath */
html body .tbt #pnl-web:not(.annual-on) .tfoot .pp s,html body .tbt #pnl-web:not(.annual-on) .tfoot > .offp,html body .tbt #pnl-web:not(.annual-on) .ts-ann,html body .tbt #pnl-web.annual-on .tsave{display:none !important}
html body .tbt .tsave{display:block;flex-basis:100%;margin-top:8px;font-size:12.5px;color:#8b949d}
html body .tbt #pnl-web .tsave .offp:not(#_){display:inline-block !important;margin-right:6px;padding:1px 6px;font-size:11px;line-height:1.5;vertical-align:1px}

/* 10/15: Inspired Law Group's logo is navy; show it white on the dark logo strips (file untouched, display filter only) */
html body img[src*="full-inspired-law-group"]{filter:brightness(0) invert(1) !important}

/* 10/15 Hamza "some of the logos are hard to see": the trusted-by logos rendered 26 to 58px tall. Give every logo the
   same larger box (each keeps its own shape inside it), (Signal Lab stays in colour: whitening it turned its shaded mark into a solid blob.) */
@media(min-width:768px){html body section.logos .clogo:not(#_):not(#__){width:170px !important;max-width:170px !important;height:64px !important;flex:0 0 auto !important}}
html body section.logos .clogo:not(#_):not(#__) img{width:100% !important;height:100% !important;object-fit:contain !important}
/* The Chair (Hamza 10/15): dark-background version, kept in its own colours. Its background is solid black, so screen
   blending lets the strip show through it instead of a black box (file untouched). ILG stays white (Hamza 10/15). */
html body img[src*="full-the-chair-dark"],html body img[src*="full-premier-jewelers-gold"],html body img[src*="full-signal-labs-v2"]{filter:none !important;mix-blend-mode:screen}

/* 10/16 Hamza: on desktop the About and How it works pictures were cropped to the card, then letterboxed, and both
   looked off. Their art is wider (about 1.72:1) than the other cards, so these two picture boxes take the art's own shape:
   the picture fills the box exactly, nothing cut, no bands. Phone menu unchanged. */
html body #tbtchrome .dxm a.dx-card:is([href="/studio/"],[href="/how-it-works/"]) .dx-img:not(#_){aspect-ratio:1.72 !important;height:auto !important}
html body #tbtchrome .dxm a.dx-card:is([href="/studio/"],[href="/how-it-works/"]) .dx-img img:not(#_){object-fit:cover !important;object-position:center !important;padding:0 !important;width:100% !important;height:100% !important}

/* 10/16 Hamza "this grey book a call button just blends in": secondary buttons get a visible hairline and a lighter
   fill so they read as buttons on dark cards. Still clearly second to the solid blue button; hover is a border shift. */
html body .btn-s:not(#_):not(#__){background:#1d2228 !important;background-image:none !important;border:1px solid rgba(255,255,255,.28) !important;box-shadow:none !important;color:#fff !important}
html body .btn-s:not(#_):not(#__):hover{border-color:rgba(255,255,255,.55) !important;background:#232930 !important}

/* 10/16 Hamza "this is completely showing the old website styling": the free audit's scan screen and report still used
   the old site tokens (Oswald headings, monospace labels, teal eyebrow, navy panel). Re-point those tokens to the
   current design for the audit tool only; pass/fail colours (green, amber, red) stay because they carry meaning. */
html body .audit-report-sec:not(#_),html body:has(.audit-report-sec) [class*="ap-"]:not(#_){--mono:var(--fb,"Poppins",sans-serif);--font--heading:var(--fd,"Montserrat",sans-serif);--theme--electric-purple:#ffffff;--theme--grey:#8b949d}
html body .audit-report-sec:not(#_){background:#050607 !important;border-top:1px solid rgba(255,255,255,.06)}
html body .audit-report-sec .rpt-eyebrow:not(#_){font-family:var(--fd) !important;font-weight:700;font-size:13px;letter-spacing:.14em;color:#fff}
html body .audit-report-sec .rpt-domain:not(#_){font-family:var(--fd) !important;font-weight:800;letter-spacing:-.01em;line-height:1.1}
html body .audit-report-sec .rpt-meta:not(#_){font-family:var(--fb) !important;font-size:14px}
html body .audit-report-sec .rpt-grade-label:not(#_){font-family:var(--fb) !important;font-weight:600;font-size:12px;letter-spacing:.1em}
html body .audit-report-sec .rpt-grade-label b:not(#_){font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:0}
html body .audit-report-sec .ring-wrap .n:not(#_),html body .audit-report-sec .cwv-tile .v:not(#_){font-family:var(--fd) !important;font-weight:800}
html body .audit-report-sec .audit-score:not(#_),html body .audit-report-sec .cwv-tile:not(#_),html body .audit-report-sec .rpt-opps:not(#_),html body .audit-report-sec .rpt-checks:not(#_),html body .audit-report-sec .rpt-shot:not(#_){background:#0e1114 !important;border-color:rgba(255,255,255,.08) !important}
html body .audit-report-sec .audit-score .l:not(#_),html body .audit-report-sec .cwv-tile .k:not(#_),html body .audit-report-sec .rpt-opps .hd:not(#_),html body .audit-report-sec .rpt-checks .hd:not(#_){font-family:var(--fb) !important;font-weight:600;font-size:12px;letter-spacing:.08em}
html body .audit-report-sec .cwv-chip:not(#_){font-family:var(--fb) !important;font-weight:600;font-size:11px;letter-spacing:.06em}
html body .audit-report-sec .rpt-opps .row b:not(#_),html body .audit-report-sec .rpt-shot .addr:not(#_){font-family:var(--fb) !important}

/* 10/16 Hamza "you can see its cutoff": the referral hero's rolling word (.rt-rot) has 1.2em windows, but the sitewide
   1.5 headline line-height made each word taller than its window, so the next word peeked in at the top. Each word
   gets the window's own line-height again. */
html body .rt-tag .rt-rot:not(#_) b{line-height:1.2em !important}