/* ============================================================
   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{position:relative;display:block;border-radius:14px;padding:14px 46px 14px 16px;transition:transform .2s,box-shadow .2s,border-color .2s}
.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;border:1px solid transparent}
.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)}
/* the promo cards own their palette — the app's global link styling must not repaint or
   underline them on hover; the hover state is a lift, a glow and a travelling arrow. */
.mn::after{content:"";position:absolute;top:50%;right:18px;width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.5;transition:transform .2s,opacity .2s}
.mn:hover{transform:translateY(-2px)}
.mn:hover::after{opacity:1;transform:rotate(-45deg) translate(3px,3px)}
.mn--recep:hover{border-color:rgba(242,126,149,.55);box-shadow:0 18px 34px -18px rgba(36,17,16,.9)}
.mn--build:hover{border-color:var(--bb-primary);box-shadow:0 18px 34px -18px rgba(219,58,87,.5)}
.mn,.mn:hover,.mn:focus,.mn b,.mn span,.mn:hover b,.mn:hover span{text-decoration:none}
.mn--recep,.mn--recep:hover,.mn--recep:focus,.mn--recep:hover b,.mn--recep:hover span{color:#F6EDE7}
.mn--build,.mn--build:hover,.mn--build:focus,.mn--build:hover b,.mn--build:hover span{color:var(--bb-text)}
.mn--recep:hover small{color:#F27E95}
.mn--build:hover 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}

/* ---------------- self-sufficiency ----------------
   A page may ship its own .mkt-header rules (the ported drafts do) or no .shell at all
   (/price). The chrome therefore owns its own layout instead of inheriting the page's. */
.mkt-header{display:block!important;padding:0!important;min-height:0!important;border-bottom:1px solid var(--bb-border)!important;background:var(--bb-surface)!important}
.mkt-header .hdr-shell{display:grid!important;grid-template-columns:190px 1fr auto;align-items:center;min-height:72px;padding:0 max(24px,calc((100vw - var(--shell))/2))}
.mkt-header nav a,.mkt-header .nav-link{font-family:var(--bb-font)}
/* pages that opt in (e.g. /price) still load the application stylesheet, which underlines
   and recolours links on hover — the chrome's own links must stay as designed. */
.mkt-header a,.mkt-header a:hover,.mnav a,.mnav a:hover,.ftr a,.ftr a:hover{text-decoration:none}
.mega .mi,.mega .mi:hover,.mega .ind-link{color:inherit}
.mega .mi:hover b{color:var(--bb-primary)}
.mega .ind-link:hover{color:var(--bb-primary)}
.mega .mn--recep,.mega .mn--recep:hover,.mega .mn--recep:hover b,.mega .mn--recep:hover span{color:#F6EDE7}
.mega .mn--build,.mega .mn--build:hover,.mega .mn--build:hover b,.mega .mn--build:hover span{color:var(--bb-text)}
.mega .mn--recep small,.mega .mn--recep:hover small{color:#F27E95}
.mega .mn--build small,.mega .mn--build:hover small{color:var(--bb-primary)}
.ftr .shell,.mkt-header .shell{width:min(calc(100% - 48px),var(--shell));margin-inline:auto}
.ftr{font-family:var(--bb-font)}
/* On the application's static layout the header sits inside a 73px-tall wrapper, and a
   sticky element can never leave its parent — so the bar scrolled away on /price and
   /ai-receptionist while it stayed pinned everywhere else. Pin the wrapper instead. */
.navbar-wrapper__menu:has(> .mkt-header){position:sticky;top:0;z-index:80;background:var(--bb-surface)}
@media (max-width:860px){
  .mkt-header .hdr-shell{display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding-left:18px;padding-right:18px}
}

/* ============================================================
   Types of Work comparison modal (#difference_modal).
   Shared with the application dashboard, so every rule is scoped to the new-design
   pages. Behaviour comes from SimpleSectionSwitcher, already bundled in static.js.
   ============================================================ */
body:has(header.mkt-header) #difference_modal .modal-dialog{max-width:min(1080px,94vw)!important}
body:has(header.mkt-header) #difference_modal .modal-content{border:1px solid var(--bb-border);border-radius:22px;background:var(--bb-surface);box-shadow:0 44px 88px -30px rgba(60,45,30,.5);font-family:var(--bb-font);color:var(--bb-text);overflow:hidden}
body:has(header.mkt-header) #difference_modal .modal-header{display:block!important;height:0;min-height:0;padding:0!important;border:0;overflow:visible}
body:has(header.mkt-header) #difference_modal .modal-header .bb-close, .modal-header [data-dismiss="modal"]{position:absolute;top:14px;right:14px;z-index:3;display:flex;width:36px;height:36px;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:var(--bb-inset);color:var(--bb-text-2);font-size:19px;line-height:1;opacity:1;cursor:pointer;transition:background .15s,color .15s}
body:has(header.mkt-header) #difference_modal .modal-header .bb-close:hover, .modal-header [data-dismiss="modal"]:hover{background:var(--bb-primary-soft);color:var(--bb-primary)}
body:has(header.mkt-header) #difference_modal .modal-body{max-height:calc(100vh - 96px);overflow-y:auto;padding:38px 38px 40px!important}
body:has(header.mkt-header) #difference_modal #main-title{margin:0;font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:-.4px;line-height:1.2;text-align:center;color:var(--bb-text)}
body:has(header.mkt-header) #difference_modal #add-title{margin:10px auto 0;max-width:620px;color:var(--bb-text-2);font-size:15px;line-height:1.6;text-align:center}
body:has(header.mkt-header) #difference_modal .difference-tabs{display:flex;gap:5px;width:fit-content;margin:26px auto 30px;padding:5px;border:1px solid var(--bb-border);border-radius:999px;background:var(--bb-inset)}
body:has(header.mkt-header) #difference_modal .switcher-button{padding:10px 22px;border:0;border-radius:999px;background:transparent;color:var(--bb-text-2);font-family:var(--bb-font);font-size:14px;font-weight:700;line-height:1;cursor:pointer;transition:background .16s,color .16s}
body:has(header.mkt-header) #difference_modal .switcher-button:hover{color:var(--bb-primary)}
body:has(header.mkt-header) #difference_modal .switcher-button.active-switcher-button{background:var(--bb-primary);color:#fff;box-shadow:0 10px 20px -12px rgba(219,58,87,.7)}
body:has(header.mkt-header) #difference_modal .types-card{padding:26px;border:1px solid var(--bb-border);border-radius:16px;background:var(--bb-surface);box-shadow:var(--bb-shadow-1)}
body:has(header.mkt-header) #difference_modal .types-card .title-icon{width:36px;height:36px;flex:none}
body:has(header.mkt-header) #difference_modal .types-card .title-modal2{font-size:18px;font-weight:700;letter-spacing:-.2px}
body:has(header.mkt-header) #difference_modal .types-card p{margin:12px 0 0;color:var(--bb-text-2);font-size:14.5px;line-height:1.65}
body:has(header.mkt-header) #difference_modal .types-card p:first-of-type{margin-top:16px}
body:has(header.mkt-header) #difference_modal .example{padding:13px 15px;border:1px solid var(--bb-border);border-left:3px solid var(--bb-primary);border-radius:10px;background:var(--bb-primary-soft);color:var(--bb-text);font-size:13px;line-height:1.55}
body:has(header.mkt-header) #difference_modal #types-section > .d-sm-flex{margin-top:14px}
body:has(header.mkt-header) #difference_modal #types-section > p{margin:22px 0 0;color:var(--bb-text-2);font-size:15px;line-height:1.7}
body:has(header.mkt-header) #difference_modal .difference-table-wrap{overflow-x:auto;border:1px solid var(--bb-border);border-radius:16px;background:var(--bb-surface);box-shadow:var(--bb-shadow-1)}
body:has(header.mkt-header) #difference_modal .difference-compare-table{width:100%;min-width:640px;margin:0;border-collapse:collapse;font-size:14.5px}
body:has(header.mkt-header) #difference_modal .difference-compare-table th{padding:16px 18px;border-bottom:1px solid var(--bb-border-strong);background:var(--bb-inset);text-align:left;vertical-align:middle;font-weight:700}
body:has(header.mkt-header) #difference_modal .difference-compare-table th:first-child{color:var(--bb-text-2);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
body:has(header.mkt-header) #difference_modal .difference-compare-table th + th{border-left:1px solid var(--bb-border)}
body:has(header.mkt-header) #difference_modal .difference-compare-table td{padding:15px 18px;border-top:1px solid var(--bb-border);color:var(--bb-text);line-height:1.6;vertical-align:top}
body:has(header.mkt-header) #difference_modal .difference-compare-table tr:first-child td{border-top:0}
body:has(header.mkt-header) #difference_modal .difference-compare-table td:first-child{width:210px;color:var(--bb-text-2);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
body:has(header.mkt-header) #difference_modal .difference-compare-table td.td-50{width:50%;border-left:1px solid var(--bb-border);color:var(--bb-text);font-size:14.5px;font-weight:400;letter-spacing:normal;text-transform:none}
body:has(header.mkt-header) #difference_modal .difference-compare-table tbody tr:hover td{background:#FCFAF7}
body:has(header.mkt-header) #difference_modal .difference-compare-table ul{margin:9px 0 0;padding-left:20px;color:var(--bb-text-2)}
body:has(header.mkt-header) #difference_modal .difference-compare-table li{margin:3px 0}
body:has(header.mkt-header) #difference_modal .difference-compare-table p{margin:0}
body:has(header.mkt-header) #difference_modal .difference-compare-table img{width:20px;height:20px;flex:none}
body:has(header.mkt-header) #difference_modal .difference-compare-table .title-icon{width:30px;height:30px}
body:has(header.mkt-header) #difference_modal .difference-compare-table .title-modal2{font-size:16px;font-weight:700}
body:has(header.mkt-header) #difference_modal .d-flex{display:flex}
body:has(header.mkt-header) #difference_modal .d-none{display:none!important}
body:has(header.mkt-header) #difference_modal .d-block{display:block}
body:has(header.mkt-header) #difference_modal .d-table-cell{display:table-cell}
body:has(header.mkt-header) #difference_modal .flex-column{flex-direction:column}
body:has(header.mkt-header) #difference_modal .flex-1{flex:1;min-width:0}
body:has(header.mkt-header) #difference_modal .align-items-center{align-items:center}
body:has(header.mkt-header) #difference_modal .align-items-start{align-items:flex-start}
body:has(header.mkt-header) #difference_modal .justify-content-between{justify-content:space-between}
body:has(header.mkt-header) #difference_modal .justify-content-end{justify-content:flex-end}
body:has(header.mkt-header) #difference_modal .text-center{text-align:center}
body:has(header.mkt-header) #difference_modal .text-s{font-size:13px}
body:has(header.mkt-header) #difference_modal .mb-0{margin-bottom:0}
body:has(header.mkt-header) #difference_modal .ml-0{margin-left:0}
body:has(header.mkt-header) #difference_modal .ml-2{margin-left:8px}
body:has(header.mkt-header) #difference_modal .ml-3{margin-left:12px}
body:has(header.mkt-header) #difference_modal .ml-4{margin-left:18px}
body:has(header.mkt-header) #difference_modal .mt-3{margin-top:14px}
body:has(header.mkt-header) #difference_modal .mt-4{margin-top:20px}
@media (min-width:576px){
  body:has(header.mkt-header) #difference_modal .d-sm-none{display:none!important}
  body:has(header.mkt-header) #difference_modal .d-sm-block{display:block!important}
  body:has(header.mkt-header) #difference_modal .d-sm-flex{display:flex!important}
  body:has(header.mkt-header) #difference_modal .d-sm-table-cell{display:table-cell!important}
  body:has(header.mkt-header) #difference_modal .flex-sm-row{flex-direction:row}
  body:has(header.mkt-header) #difference_modal .ml-sm-2{margin-left:8px}
  body:has(header.mkt-header) #difference_modal .ml-sm-4{margin-left:22px}
  body:has(header.mkt-header) #difference_modal .mt-sm-0{margin-top:0}
}
@media (max-width:600px){
  body:has(header.mkt-header) #difference_modal .modal-body{padding:30px 20px 32px!important}
  body:has(header.mkt-header) #difference_modal #main-title{font-size:23px}
  body:has(header.mkt-header) #difference_modal .types-card{padding:20px}
  body:has(header.mkt-header) #difference_modal .difference-tabs{width:100%;justify-content:center}
  body:has(header.mkt-header) #difference_modal .switcher-button{flex:1;padding:10px 12px;font-size:13px}
  body:has(header.mkt-header) #difference_modal .difference-compare-table{min-width:0;table-layout:fixed}
  body:has(header.mkt-header) #difference_modal .difference-compare-table td, .difference-compare-table th{padding:13px 14px}
  body:has(header.mkt-header) #difference_modal .difference-compare-table td:first-child{width:auto}
  body:has(header.mkt-header) #difference_modal .difference-compare-table .title-modal2{font-size:14.5px}
  body:has(header.mkt-header) #difference_modal .difference-compare-table .title-icon{width:24px;height:24px}
  body:has(header.mkt-header) #difference_modal .difference-compare-table .ml-3{margin-left:8px}
}