/* ============================================================
   BizBaby — shared marketing chrome (header nav + footer).
   Sliced verbatim from the approved draft: drafts/external-pages-redesign/main-page-v4.html
   Loaded AFTER each page's own <style> so chrome selectors always win,
   while every page keeps its own component styling untouched.
   ============================================================ */
:root{
  --bb-primary:#DB3A57; --bb-primary-hover:#C22F4A; --bb-primary-soft:#FFF1F5;
  --bb-bg:#FAF7F2; --bb-surface:#FFFFFF; --bb-inset:#F6F6F6; --bb-surface-2:#F7F3EC;
  --bb-text:#2B2622; --bb-text-2:#6E6660; --bb-text-3:#A39B93;
  --bb-border:#EAE4DC; --bb-border-strong:#D9D2C8;
  --bb-radius-m:8px; --bb-radius-l:16px;
  --bb-font:'Rubik',system-ui,'Segoe UI',sans-serif;
  --bb-shadow-1:0 1px 4px rgba(60,45,30,.06);
  --shell:1220px;
}
/* icon system — scoped so a page's own .ic rules are never touched */
.mkt-header .ic,.mnav .ic,.ftr .ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- header — clean white bar, hairline border, mega menus ---------- */
.mkt-header{position:sticky;top:0;z-index:80;background:var(--bb-surface);border-bottom:1px solid var(--bb-border);transition:box-shadow .25s}
.mkt-header.scrolled{box-shadow:0 10px 30px -22px rgba(60,45,30,.35)}
.hdr-shell{display:grid;grid-template-columns:190px 1fr auto;align-items:center;min-height:72px;padding:0 max(24px,calc((100vw - var(--shell))/2))}
.mkt-header__logo img{width:136px;height:auto}
.mkt-header nav{display:flex;justify-content:center;align-items:center;gap:26px}
.mkt-header nav>a,.nav-link{font-weight:600;font-size:15px;position:relative;cursor:pointer}
.mkt-header nav>a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2.5px;background:var(--bb-primary);transition:right .25s}
.mkt-header nav>a:hover::after{right:0}
.mkt-header nav>a:hover,.nav-item:hover .nav-link,.nav-item:focus-within .nav-link{color:var(--bb-primary)}
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{display:inline-flex;align-items:center;gap:8px;padding:24px 0}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-5px;transition:transform .25s}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(225deg);margin-top:3px}
.mega{position:absolute;left:50%;top:100%;transform:translate(-50%,14px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--bb-border);border-radius:20px;box-shadow:0 44px 88px -30px rgba(60,45,30,.4);padding:26px}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,6px)}
/* wide panel: centre on the VIEWPORT, not the nav item, or it runs off-screen left */
.mega--features{position:fixed;top:72px;width:min(1180px,94vw);padding:32px 34px 28px}
.mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 26px}
.mega h5{margin:0 0 12px;padding:0 0 11px;font-size:11px;letter-spacing:1.7px;color:var(--bb-text-3);text-transform:uppercase;font-weight:800;border-bottom:1px solid var(--bb-border)}
.mi{display:flex;align-items:flex-start;gap:13px;padding:12px;border-radius:14px;transition:background .16s}
.mi i{display:flex;width:44px;height:44px;flex:none;border-radius:14px;background:var(--bb-primary-soft);color:var(--bb-primary);align-items:center;justify-content:center;transition:background .16s}
.mi .ic{width:22px;height:22px}
.mi b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.mi small{display:block;color:var(--bb-text-2);font-size:12.5px;margin-top:3px;line-height:1.45}
.mi:hover{background:var(--bb-primary-soft)}
.mi:hover i{background:#fff}
.mi:hover b{color:var(--bb-primary)}
.mega__new{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--bb-border)}
.mn{display:block;border-radius:14px;padding:14px 16px;transition:transform .2s}
.mn:hover{transform:translateY(-2px)}
.mn small{font-size:9.5px;letter-spacing:1.2px;font-weight:800;text-transform:uppercase;display:block}
.mn b{display:block;font-size:13.5px;margin-top:4px;font-weight:800}
.mn span{display:block;font-size:11px;margin-top:2px;opacity:.82}
.mn--recep{background:radial-gradient(240px at 85% 15%,#4A1620,#241110);color:#F6EDE7}
.mn--recep small{color:#F27E95}
.mn--build{background:linear-gradient(120deg,#FFF3E8,#FDE7EE);border:1px solid #F4C4CF;color:var(--bb-text)}
.mn--build small{color:var(--bb-primary)}
.mega--industries{width:min(600px,94vw)}
.mega__ind{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.ind-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-weight:600;font-size:13.5px}
.ind-link::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bb-primary);opacity:.7;flex:none}
.ind-link:hover{background:var(--bb-primary-soft);color:var(--bb-primary)}
.mkt-header__actions{display:flex;align-items:center;gap:18px}
.mkt-header__actions>a:first-child{font-weight:600;font-size:15px}
.mkt-header__actions>a:first-child:hover{color:var(--bb-primary)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--bb-border-strong);border-radius:10px;background:var(--bb-surface);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger i{display:block;width:18px;height:2.2px;border-radius:2px;background:var(--bb-text)}
.mnav{position:fixed;inset:0;z-index:90;background:rgba(250,247,242,.98);backdrop-filter:blur(10px);padding:84px 26px 30px;overflow:auto;display:none}
.mnav.open{display:block}
.mnav a{display:block;padding:13px 4px;font-size:19px;font-weight:700;border-bottom:1px solid var(--bb-border)}
.mnav details{border-bottom:1px solid var(--bb-border)}
.mnav summary{padding:13px 4px;font-size:19px;font-weight:700;cursor:pointer;list-style:none}
.mnav details a{font-size:15px;font-weight:600;padding:9px 16px;border:0;color:var(--bb-text-2)}
.mnav__grp{display:block;padding:15px 16px 5px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bb-text-3);font-weight:800}
.mnav__new{color:var(--bb-primary)!important;font-weight:700!important}
.mnav .btn{margin-top:22px;width:100%}
.mnav__close{position:fixed;top:18px;right:20px;z-index:91}
@media (max-width:860px){
  .mkt-header nav{display:none}
  .burger{display:flex}
  /* nav is display:none here, so the grid's 3rd column would leave actions in the middle
     track and collide with the logo — go flex instead */
  .hdr-shell{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-left:18px;padding-right:18px}
  .mkt-header__logo img{width:104px}
}
@media (max-width:520px){
  .mkt-header__actions{gap:10px}
  .mkt-header__actions>a:first-child{display:none}
}

/* ---------- footer — ink closer w/ ghost wordmark + the mascot on duty ---------- */
.ftr{position:relative;background:#211E1B;color:#F4EDE3;overflow:hidden;padding:84px 0 0}
.ftr__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:48px}
.ftr__logo{display:block;width:158px;height:auto}
.ftr__tag{margin:14px 0 0;color:#B7AC9E;font-size:14.5px;max-width:280px;line-height:1.6}
.ftr h6{margin:0 0 14px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#8A7466;font-weight:800}
.ftr__grid a{display:block;padding:5px 0;color:#CBB6A8;font-size:14px;font-weight:600;transition:color .15s,transform .15s}
.ftr__grid a:hover{color:#F27E95;transform:translateX(3px)}
.ftr__new{color:#F27E95!important;font-weight:700!important}
.ftr__bar{position:relative;z-index:1;display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:64px;padding:22px 0 26px;color:#8A7466;font-size:13px;font-weight:600}
.ftr__bar a{color:#8A7466}
.ftr__bar a:hover{color:#F27E95}
.totop{margin-left:auto;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 17px;color:#F4EDE3;font-weight:700;font-size:13px;cursor:pointer;background:transparent;transition:border-color .2s,transform .2s;font-family:var(--bb-font)}
.totop:hover{border-color:#F27E95;transform:translateY(-2px)}
.totop .caret{transform:rotate(225deg);margin-top:4px;transition:none}
.ftr__mark{position:absolute;left:0;right:0;bottom:-.14em;z-index:0;font-size:clamp(120px,21vw,320px);font-weight:800;letter-spacing:-.04em;line-height:1;color:rgba(244,237,227,.05);text-align:center;pointer-events:none;user-select:none;white-space:nowrap}

@media (max-width:1000px){
  .ftr__grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:680px){
  .ftr{padding-top:64px}
  .totop{margin-left:0}
}

/* The header CTA must look right on pages that define .btn differently (or not at all),
   so the chrome carries its own copy of the v6 button — scoped to the chrome only. */
.mkt-header .btn,.mnav .btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:10px;padding:12px 26px;border:1px solid var(--bb-primary);border-radius:var(--bb-radius-m);background:var(--bb-primary);color:#fff!important;font-family:var(--bb-font);font-size:15px;font-weight:700;line-height:1;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .18s,box-shadow .18s}
.mkt-header .btn:hover,.mnav .btn:hover{background:var(--bb-primary-hover);border-color:var(--bb-primary-hover);transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(219,58,87,.55)}
.mkt-header .btn--small{min-height:40px;padding:8px 18px}