/* Haulor marketing site — base styles (tokens match design/tokens/tokens.css in the redesign kit) */
@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/manrope-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geist-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/geist-mono-latin-500-normal.woff2) format('woff2')}
:root{
  --hl-canvas:#F3F4F2; --hl-ink:#0D0E10; --hl-ink2:#56595F; --hl-ink3:#9A9DA3;
  --hl-violet:#7A1CFF; --hl-lime:#A8F04C;
  --gutter:120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--hl-canvas);color:var(--hl-ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p{margin:0;font:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg.ic{display:block;flex-shrink:0}
.pg{display:block;overflow-x:hidden}
.pg>*{min-height:100vh}
a[class]{transition:transform .15s ease,filter .15s ease,background-color .15s ease}
a[class]:hover{filter:brightness(1.06)}
a[class]:active{transform:translateY(1px)}
a:focus-visible{outline:2px solid var(--hl-violet);outline-offset:3px;border-radius:99px}
.only-mobile{display:none}
/* mobile header (phones only) */
.mnav{display:none;position:sticky;top:10px;z-index:50;margin:10px 16px 0;padding:8px 8px 8px 18px;align-items:center;gap:8px;border-radius:99px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(13,15,23,.03),0 8px 24px -8px rgba(13,15,23,.08)}
.mnav-logo{margin-right:auto}
.mnav-cta{background:var(--hl-violet);color:#fff;font-weight:600;font-size:14px;padding:9px 16px;border-radius:99px;box-shadow:0 8px 20px -6px rgba(122,28,255,.28)}
.mnav-menu{position:relative}
.mnav-menu summary{list-style:none;cursor:pointer;width:38px;height:38px;border-radius:99px;display:grid;place-items:center;background:#F3F4F5;color:var(--hl-ink)}
.mnav-menu summary::-webkit-details-marker{display:none}
.mnav-sheet{position:absolute;right:0;top:48px;min-width:220px;padding:8px;border-radius:20px;background:#fff;box-shadow:0 24px 48px -12px rgba(13,15,23,.18),0 0 0 1px #ECEDEF;display:flex;flex-direction:column}
.mnav-sheet a{padding:11px 12px;border-radius:12px;font-weight:500;font-size:15px;color:var(--hl-ink2)}
.mnav-sheet a:hover{background:#F3F4F5;color:var(--hl-ink)}
.mnav-sheet .mnav-signin{margin-top:4px;border-top:1px solid #ECEDEF;border-radius:0 0 12px 12px;color:var(--hl-violet);font-weight:600}

@media (max-width:1180px){
  :root{--gutter:40px}
  .pg .r{flex-wrap:wrap}
  .pg h1,.pg h2{white-space:normal!important}
}
@media (max-width:760px){
  :root{--gutter:20px}
  .only-desktop{display:none}
  .only-mobile{display:block}
  .only-mobile>*{max-width:430px;margin:0 auto}
  .mnav{display:flex}
  .pg > * > header:first-child{display:none!important}
  .pg:not(.only-mobile) [class]{max-width:100%}
  .pg:not(.only-mobile) .rw{flex-direction:column!important;align-items:stretch!important;gap:16px!important}
  .pg:not(.only-mobile) .rw>*{width:auto!important;flex:none!important;min-width:0}
  .pg:not(.only-mobile) section{padding-top:56px!important;padding-bottom:56px!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* HUB nav link: the HUB badge — orange→red pill with the 2×2 grid mark (owner request 2026-09-27,
   replaces the 2026-09-25 bold-red text). One rule styles every [data-nav="hub"] link on every page. */
[data-nav="hub"]{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  width:auto!important;height:auto!important;padding:6px 14px!important;border-radius:999px!important;
  background:linear-gradient(135deg,#ff7a1a,#ef2b2b)!important;box-shadow:0 4px 12px rgba(239,43,43,.28)!important;
  color:#fff!important;font-weight:800!important;letter-spacing:.02em!important;line-height:1.2!important;
  text-decoration:none!important;white-space:nowrap!important;align-self:center}
[data-nav="hub"] *{color:#fff!important;font-weight:800!important}
[data-nav="hub"]::before{content:"";flex:none;width:12px;height:12px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1.6'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1.6'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1.6'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1.6'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1.6'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1.6'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
/* In the mobile menu the pill sits at the start of the column, like the other links. */
.mnav-sheet [data-nav="hub"]{align-self:flex-start!important;margin:5px 0!important}
[data-nav="hub"]:hover{filter:brightness(1.06)}
[data-nav="hub"]:focus-visible{outline:2px solid #ef2b2b!important;outline-offset:2px!important}