/* ESCARGO V3 — business chrome aligned to the approved reference (header, nav, footer, sticky CTA).
   Hand-written: Escargo keeps its REAL header/footer markup (mega menus, auth-aware CTA resolver, tracking hooks);
   this file only changes how they look. Scope: body.v3-biz. Loaded after esc-v3-ref.css. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


body.v3-biz{font-family:'Manrope','Inter','Segoe UI',system-ui,-apple-system,sans-serif;color:#132a22;-webkit-font-smoothing:antialiased}
body.v3-biz .eo-hdr,body.v3-biz .eo-foot,body.v3-biz .bz-sticky{font-family:inherit}

/* ---- header: floating white pill, centred navigation, lime CTA (reference .header/.head/.nav/.actions) ---- */
body.v3-biz .eo-hdr{height:80px;background:#ffffffed;border:0}
body.v3-biz .eo-hdr .eo-wrap{height:64px;min-height:64px;margin-top:8px;padding:0 12px 0 10px;max-width:1200px;border-radius:25px;background:#fff;box-shadow:0 5px 24px #173b1710;gap:16px}
body.v3-biz .eo-hdr .eo-logo{border-radius:15px;padding:2px 10px;height:48px;display:inline-flex;align-items:center;background:#132a22}
body.v3-biz .eo-hdr .eo-logo img{width:144px;height:48px;object-fit:contain}
body.v3-biz .eo-navwrap{flex:1;display:flex;justify-content:center}
body.v3-biz .eo-nav{gap:28px}
body.v3-biz .eo-hdr .eo-nav .eo-navbtn{font-family:inherit;font-size:14px;font-weight:600;color:#132a22;letter-spacing:0}
body.v3-biz .eo-hdr .eo-nav .eo-navbtn:hover,body.v3-biz .eo-hdr .eo-nav .eo-navbtn[aria-expanded="true"]{color:#132a22;text-decoration:underline;text-decoration-color:#bcf35a;text-decoration-thickness:2px;text-underline-offset:6px}
@media(min-width:861px){body.v3-biz .eo-navbtn .eo-caret{display:none}}
body.v3-biz .eo-hdr-cta{gap:24px;margin-left:0}
body.v3-biz .eo-hdr-cta .login{font-size:14px;font-weight:600;color:#132a22}
body.v3-biz .eo-hdr-cta .login:hover{color:#132a22;text-decoration:underline;text-decoration-color:#bcf35a;text-underline-offset:6px}
body.v3-biz .eo-hdr-cta .eo-btn{min-height:48px;height:48px;min-width:0;padding:14px 26px;border-radius:25px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;background:#bcf35a;color:#132a22;border-color:#bcf35a}
body.v3-biz .eo-hdr-cta .eo-btn:hover{background:#a9e349;border-color:#a9e349;transform:translateY(-2px)}
body.v3-biz .eo-mega{border-radius:25px;box-shadow:0 10px 30px #173b1715;border:0;font-family:inherit}
body.v3-biz .eo-mega a:hover{background:#e6efdb}

/* ---- footer: deep green, rounded top, white links, small-caps column labels (reference .footer) ---- */
body.v3-biz .eo-foot{background:#132a22;color:#fff;border-radius:40px 40px 0 0;padding-top:48px;margin-top:0}
body.v3-biz .eo-foot h3{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:#b9c6bc}
body.v3-biz .eo-foot a{color:#fff;font-size:14px}
body.v3-biz .eo-foot a:hover{color:#bcf35a}
body.v3-biz .eo-foot-brand p{color:#b9c6bc;font-size:14px;line-height:1.6;max-width:300px}
body.v3-biz .eo-foot-bar{border-top:1px solid #ffffff20;color:#b9c6bc;font-size:12px}
body.v3-biz .eo-foot-bar a{color:#b9c6bc;text-decoration:underline}
body.v3-biz .eo-social a{border-color:#ffffff30;color:#fff}

/* ---- phone sticky CTA (reference .sticky): white bar, full-width lime button ---- */
body.v3-biz .bz-sticky{background:#fffffff5;border-top:1px solid #e1e7dc;box-shadow:none}
body.v3-biz .bz-sticky .eo-btn{border-radius:25px;font-family:inherit;font-weight:700;min-height:48px}

/* ---- phone header (reference <=760px: 60px pill, 12px side margin, burger beside CTA) ---- */
@media(max-width:860px){
  body.v3-biz .eo-hdr{height:76px}
  body.v3-biz .eo-hdr .eo-wrap{width:auto;height:60px;min-height:60px;margin:8px 12px 0;padding:0 10px 0 8px;border-radius:20px;gap:8px}
  body.v3-biz .eo-hdr .eo-logo{height:44px}
  body.v3-biz .eo-hdr .eo-logo img{width:96px;height:36px}
  body.v3-biz .eo-hdr-cta .eo-btn{min-height:44px;height:44px;padding:12px 16px}
  body.v3-biz .eo-foot{border-radius:30px 30px 0 0}
}

/* ---- small additions the reference markup needs on a real page ---- */
main.rf .rf-plan-teaser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:880px}
main.rf .rf-plan-teaser .rf-plan h3{margin-top:4px}
main.rf .rf-plan-teaser .rf-plan .rf-btn{align-self:flex-start;margin-top:auto}
main.rf .rf-plan-teaser .rf-plan p{margin:0 0 14px}
main.rf .rf-plan-teaser .rf-plan .rf-plan-note{font-size:13px;font-weight:700;color:#416214;margin:-4px 0 12px}
main.rf .rf-plan-teaser .rf-plan .rf-price{font-size:36px}
@media(max-width:760px){main.rf .rf-plan-teaser{grid-template-columns:1fr}}
main.rf .rf-private span[aria-hidden]{margin:0 6px;opacity:.5}
main.rf a:focus-visible,main.rf button:focus-visible,main.rf summary:focus-visible{outline:2px solid #132a22;outline-offset:4px;border-radius:6px}

/* the legacy .eo heading/paragraph rules set their own font-family and colour; the reference inherits both */
main.rf :is(h1,h2,h3,h4,p,a,button,summary,strong,span,div,li,small){font-family:inherit}
main.rf :is(h1,h2,h3){color:inherit}
/* the real <img> elements carry width/height attributes (layout stability); where the reference sizes by width only, keep the ratio */
main.rf .rf-product-screen{height:auto}
main.rf .rf-plan-teaser .rf-plan .rf-status-label{align-self:flex-start}
/* reference defect fixed: the lime-on-sage eyebrow pill in the dark panel was unreadable (contrast < 1.5:1) */
main.rf .rf-network .rf-eyebrow{background:#ffffff1c;color:#bcf35a}
body.v3-biz .eo-foot-credits{margin:24px 0 0;font-size:12px;line-height:1.7;color:#b9c6bc;max-width:850px}
/* phone header: the V3 layer's own 8px/16px gutter + my 12px margin double-counted (4px horizontal overflow). One gutter only.
   The reference keeps the lime "Get started" beside the burger on phones, so show it again. */
body.v3-biz .eo-hdr{padding:0}
@media(max-width:860px){
  body.v3-biz .eo-hdr-cta{order:2;margin-left:auto;display:flex}
  body.v3-biz .eo-hdr-cta .eo-btn{display:inline-flex!important;min-width:0!important;min-height:44px!important;height:44px;padding:12px 16px!important;font-size:13px!important}
  body.v3-biz .eo-burger{order:3;margin-left:0}
  body.v3-biz .eo-navwrap{flex:0 0 0;width:0;min-width:0;padding:0;margin:0}
}
/* PHONE HEADER (<=520px). /track and /breakdown carry inline display/min-height on their header links, and /for-business-growth|payments|roi|strategic do not load business-site.css, so esc-v3.css's own phone rules
   (hide "Log in", compact the button) cannot win there and the row logo + Log in + CTA + burger is wider than a 375px screen (burger off the right edge). This block is that same intent at the same breakpoint with the
   !important it needs to beat the inline styles; it is the only phone-header block after the <=860px one above. */
@media(max-width:520px){
  body.v3-biz .eo-hdr-cta{min-width:0;flex:0 1 auto}
  body.v3-biz .eo-hdr-cta .login{display:none!important}
  body.v3-biz .eo-hdr-cta .eo-btn{padding:6px 12px!important;min-height:40px!important;height:auto!important;line-height:1.15!important;white-space:normal!important;text-align:center}
}
/* PHONE MENU (<=900px, where site.css turns the nav into the accordion): every mega panel must follow the drawer width instead of its desktop min-width (slim 380px, wide 820px). */
@media(max-width:900px){
  body.v3-biz.eo .eo-mega,body.v3-biz.eo .eo-mega-slim,body.v3-biz.eo .eo-mega-wide{min-width:0;width:auto;max-width:100%}
  body.v3-biz.eo .eo-mega-wide .eo-mega-col{min-width:0}
}
/* PHONE CONTENT (<=420px): equal, shrinkable columns in the business hero job card (repeat(3,1fr) sizes to the longest word). */
@media(max-width:420px){
  body.v3-biz .bz-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.v3-biz .bz-col{min-width:0;overflow-wrap:anywhere}
}

/* mega menus: the reference's light sage dropdown instead of the dark panel */
@media(min-width:861px){
  body.v3-biz .eo-hdr .eo-mega{background:#e9eee5;border:0;border-radius:25px;box-shadow:0 16px 40px #17352722;padding:24px;color:#132a22}
  body.v3-biz .eo-hdr .eo-mega h4{color:#647269;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  body.v3-biz .eo-hdr .eo-mega a{color:#132a22;border-radius:12px}
  body.v3-biz .eo-hdr .eo-mega a b{color:#132a22;font-weight:700}
  body.v3-biz .eo-hdr .eo-mega a span{color:#5c6962}
  body.v3-biz .eo-hdr .eo-mega a:hover{background:#dceacb}
  body.v3-biz .eo-hdr .eo-mega .bz-mega-more a{color:#27432e;font-weight:700}
  body.v3-biz .eo-hdr .eo-mega .bz-mega-more{border-top-color:#d3dccb}
  body.v3-biz .eo-hdr .eo-mega .bz-mega-soon{border-top-color:#d3dccb}
  body.v3-biz .eo-hdr .eo-mega .bz-mega-soon a,body.v3-biz .eo-hdr .eo-mega .bz-mega-soon-label,body.v3-biz .eo-hdr .eo-mega .bz-mega-soon-note{color:#5c6962}
}