/* HH Global Colorhub skin. Loaded after each page's own styles: it re-points the brand variables and the shared
   chrome (header, buttons, footer) to the hhglobal.com look - black, white, lime - without touching the tools.
   Type: hhglobal.com uses Neue Haas Display. Add "Neue Haas Grotesk Display" to an Adobe Fonts kit and link it in
   the pages to match exactly; until then Helvetica Neue / Inter stand in. */
:root{
  --hh-black:#111111; --hh-pure:#000000; --hh-lime:#aeff24; --hh-green:#00e687; --hh-blue:#0099e6;
  --hh-yellow:#ffd600; --hh-magenta:#f4318a; --hh-purple:#6f2be8; --hh-grey:#f7f7f7;
  --graphite:#111111; --graphite-2:#000000; --platinum:#f7f7f7;
  --ink:#111111; --ink-2:#161616; --ink-3:#1d1d1d;
  --purple:#6f2be8; --blue:#0099e6; --fuchsia:#f4318a; --amber:#ffd600;
  --spectrum:linear-gradient(90deg,#aeff24,#00e687);
  --display:"neue-haas-grotesk-display","Neue Haas Grotesk Display Pro","Neue Haas Display","Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
}
.family{display:none!important}
body::before{background:#111111!important}

/* Header: black bar, white logo, lime call to action - as on hhglobal.com */
header.site{background:#111111!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
header.site img{height:22px!important;width:auto}
header.site nav a{color:#ffffff}
header.site nav a:not(.btn):hover{color:var(--hh-lime)}
header.site nav a[aria-current]{color:var(--hh-lime)!important}
@media (max-width:520px){header.site img{height:17px!important}}

/* Buttons: squared, sentence case, lime primary */
.btn{border-radius:4px!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;font-size:.95rem!important}
header.site .btn{font-size:.9rem!important;padding:.8em 1.15em!important}
.btn-spec,.btn-glow,header.site .btn-dark{background:var(--hh-lime)!important;color:#000000!important;box-shadow:none!important}
.btn-spec:hover,.btn-glow:hover,header.site .btn-dark:hover{background:#ffffff!important;color:#000000!important}
.btn-dark{background:#111111;color:#ffffff}
.btn-line{border-color:#111111!important;color:#111111}
.btn-ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)!important}
.grad{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--hh-lime)!important;animation:none!important}

/* Footer */
footer img{height:18px!important;width:auto}
footer{background:#000000}

/* Trial / status bar under the header */
.tcbar{background:#1d1d1d!important}
:focus-visible{outline-color:var(--hh-purple)}

/* Sign-in / teaser page */
.hero h1{font-size:clamp(2.6rem,5.2vw,4.6rem)!important;line-height:1!important;letter-spacing:-.02em!important;font-weight:500!important}
.tabs button[aria-selected="true"]{background:var(--hh-lime)!important;color:#000000!important}

.tcbar{top:calc(env(safe-area-inset-top,0px) + 69px)!important}