/* Chrome for the shared header/footer (partials/site-header.hbs, partials/site-footer.hbs)
   on default-layout pages. Scoped to .mchrome so it never touches post/page typography,
   which already comes from built/main.css. Source: this is a copy, not an import, of the
   rules the landing kit uses for the same markup — keep it in sync by hand when the kit
   changes:
     - pulse.css lines 2-7 (font-face), 9-19 (tokens), 31 (.wrap), 53-59 and 84-87 (.nav)
     - landing.css lines 161-169, 218-220 and 228-236 (.foot, .menu-sheet)
   Every rule below carries .mchrome or .mchrome-cta except @font-face. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

.mchrome{
  --ground:#F7F7F6;--surface:#FFFFFF;--surface-2:#F2F2F1;--surface-3:#FAFAF9;
  --border:#E5E5E3;--border-soft:#EDEDEB;--border-strong:#D4D4D1;
  --ink:#2C3038;--ink-2:#5B6068;--ink-3:#6B7079;--ink-4:#B4B8BF;--ink-deep:#16181C;
  --brand:#FF5C5E;--brand-tint:#FFF2F0;--link:#CC295C;--link-hover:#AC054D;
  --teal-700:#0B7E86;--teal-tint:#E6FAFB;--teal-border:#B6EEF2;
  --display:'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:32px;--max:1120px;
}

/* Reset: _global.scss styles ul, li, a, header, footer and nav, and would otherwise leak
   into the shared chrome (list bullets, link underline/color, inherited spacing). */
.mchrome,
.mchrome *{box-sizing:border-box}
.mchrome ul,
.mchrome li{margin:0;padding:0;list-style:none}
.mchrome a{background-color:transparent;color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.mchrome a:hover{color:var(--link-hover)}

.mchrome .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* width:100% keeps this box full-width when it's a flex item (default.hbs's
   .viewport is a column flexbox), so the auto margins below have room to
   center it instead of the item shrinking to its content's hypothetical size. */
.mchrome.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Primary CTA button (pulse.css 34-36, 88), scoped to the pricing card's "Start
   free" button (partials/pricing/plans.hbs) so it can't collide with .btn classes
   that post/page HTML brings in on the other 155 default-layout pages this file
   loads on. Colors/fonts are hardcoded copies of the --ink/--display tokens above
   since those are scoped to .mchrome. */
.mchrome-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border:2px solid #2C3038;border-radius:12px;background:#fff;color:#2C3038;font-family:'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif;font-optical-sizing:auto;font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none}
.mchrome-cta.mchrome-cta-primary{background:#2C3038;color:#fff}
.mchrome-cta.mchrome-cta-primary:hover{background:#16181C;border-color:#16181C}
@media (max-width:700px){
  .mchrome-cta{height:48px;border-radius:14px;font-size:16px}
}

/* Nav (pulse.css 53-59) */
.mchrome .nav{height:88px;display:flex;align-items:center;justify-content:space-between;position:relative}
.mchrome .nav .lockup{height:56px;margin-left:-12px;display:block}
.mchrome .nav ul{display:flex;gap:28px;align-items:center;font-size:15px}
.mchrome .nav ul a{color:var(--ink-2);text-decoration:none}
.mchrome .nav ul a:hover{color:var(--ink);text-decoration:underline}
.mchrome .nav ul a.signin{color:var(--link);text-decoration:underline}
.mchrome .nav .burger{display:none}

/* Phone menu sheet (landing.css 228-236) */
.mchrome .menu-sheet{display:none}

/* Footer (landing.css 161-169) — .foot lives on the same element as .mchrome */
.mchrome.foot{padding:40px 32px 56px;border-top:1.5px solid var(--border)}
.mchrome.foot .foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.mchrome.foot .lockup{height:48px;margin-left:-10px;display:block}
.mchrome.foot .foot-line{font-size:14px;color:var(--ink-3);margin-top:4px}
.mchrome.foot .foot-legal{font-size:11px;letter-spacing:.04em;color:var(--ink-4);margin-top:8px}
.mchrome.foot .foot-links{display:flex;gap:24px;font-size:14px;flex-wrap:wrap;margin-top:8px}
.mchrome.foot .foot-links a{color:var(--ink-2)}
.mchrome.foot .foot-voice{font-size:14px;color:var(--ink-3);margin-top:36px}
.mchrome.foot .foot-voice .mono{color:var(--ink-2)}

@media (max-width:700px){
  .mchrome{--gutter:16px}
  .mchrome .nav{height:64px}
  .mchrome .nav .lockup{height:48px;margin-left:-10px}
  .mchrome .nav ul{display:none}
  .mchrome .nav .burger{display:block;width:44px;height:44px;border:0;background:none;padding:0;color:var(--ink);margin-right:-8px}

  /* z-index raised from the landing kit's 10 to clear default-layout's .site-header-content (z-index:100, _screen.scss) */
  .mchrome .menu-sheet{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1.5px solid var(--border);z-index:150}
  .mchrome .nav.open .menu-sheet{display:block}
  .mchrome .menu-sheet ul{padding:12px 16px 16px;display:flex;flex-direction:column}
  .mchrome .menu-sheet li+li{margin-top:4px}
  .mchrome .menu-sheet a{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--ink-2);text-decoration:none}
  .mchrome .menu-sheet a.signin{color:var(--link)}

  .mchrome.foot{padding:32px 16px 48px}
  .mchrome.foot .foot-grid{flex-direction:column;gap:20px}
  .mchrome.foot .foot-links{gap:12px 20px}
}