/* helpmebaby.com marketing home page, styled to the v2 template's marketing page. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2"); }
:root { --navy: #13202B; --ink: #1B2430; --ink-2: #33404F; --body: #44505F; --muted: #5B6676; --line: #E3E7EC;
  --grey: #F6F7F9; --link: #1F5470; --cta: #B04E0C; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #FFFFFF; color: var(--ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); } a:hover { color: #163E54; }
.mk-wrap { max-width: 1200px; margin: 0 auto; }
.mk-wrap.narrow { max-width: 800px; }
.mk-top { border-bottom: 1px solid var(--line); }
.mk-bar { padding: 0 24px; min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
/* port-static-fixes D1: the header bar and the hero are wrappers with their own side padding. The template renders
   them content-box (1200px of content plus 24px each side, content from x 120 at 1440); under the border-box reset
   above they lost 48px (content from x 144). Content-box puts them back on the template's grid, in line with the
   sections below. */
.mk-bar, .mk-hero { box-sizing: content-box; }
.mk-logo img { display: block; height: 48px; width: auto; }
.mk-navlinks { display: flex; gap: 28px; font-size: 15px; }
.mk-navlinks a, .mk-signin { color: var(--ink-2); text-decoration: none; }
.mk-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mk-signin { font-size: 15px; padding: 10px 4px; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 8px;
  font-size: 15px; font-weight: 600; text-decoration: none; }
.mk-btn.lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.mk-btn.primary { background: var(--cta); color: #FFFFFF; }
.mk-btn.primary:hover { color: #FFFFFF; background: #974309; }
.mk-btn.outline { border: 1px solid #C9D3DC; background: #FFFFFF; color: var(--navy); font-weight: 500; }
.mk-btn.dark { border: 1px solid #4A6175; color: #FFFFFF; font-weight: 500; }
.mk-hero-band { background: var(--grey); border-bottom: 1px solid var(--line); }
.mk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 88px 24px 96px; }
.mk-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.mk-eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--link); }
.mk-hero h1 { margin: 0; font-size: 54px; line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; color: var(--navy); }
.mk-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--body); max-width: 520px; }
.mk-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.mk-shot { background: #FFFFFF; border: 1px solid #DCE2E8; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(19,32,43,.06); }
.mk-mock { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; min-height: 400px; font-size: 12px; }
.mk-mock-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.mm-h { padding: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mm-row { padding: 10px 12px; border-bottom: 1px solid #EEF1F4; display: flex; flex-direction: column; gap: 4px; }
.mm-row.cur { background: #EAF2F7; }
.mm-row .pill, .mk-mock .pill { align-self: flex-start; padding: 1px 6px; border-radius: 999px; font-weight: 600; font-size: 11px; }
.st-open { background: #E2EDF4; color: #1F5470; } .st-new { background: #FCEFD8; color: #7A4A00; }
.mk-mock-main { display: flex; flex-direction: column; background: var(--grey); }
.mm-title { padding: 12px 16px; background: #FFFFFF; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.mm-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mm-msg { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; line-height: 1.5; }
.mm-msg.note { background: #FFF8E6; border-color: #F0DFAE; } .mm-msg.note b { color: #6B4E00; }
.mm-reply { margin: 0 16px 16px; background: #FFFFFF; border: 1px solid #D5DCE3; border-radius: 8px; padding: 10px 12px; color: var(--muted); }
.mk-mock-side { border-left: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mm-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #F9FAFB; display: flex; flex-direction: column; gap: 6px; }
.mk-muted { color: var(--muted); }
.mk-sec { padding: 96px 24px; }
.mk-sec.grey { background: var(--grey); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 88px 24px; }
.mk-stack { display: flex; flex-direction: column; gap: 40px; }
.mk-intro { max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.mk-sec h2, .mk-cta-band h2 { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.mk-lead2 { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; }
.mk-card { border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.mk-card h3, .mk-steps h3 { margin: 0; font-size: 19px; font-weight: 600; }
.mk-card p, .mk-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.mk-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.mk-steps li { display: flex; flex-direction: column; gap: 10px; }
.mk-num { width: 36px; height: 36px; border-radius: 50%; background: var(--link); color: #FFFFFF; display: flex; align-items: center;
  justify-content: center; font-weight: 700; }
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mk-dev { display: flex; flex-direction: column; gap: 18px; }
.mk-dev p:not(.mk-eyebrow) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }
.mk-link { font-size: 16px; font-weight: 600; }
.mk-code { background: var(--navy); border-radius: 12px; padding: 24px; overflow-x: auto; }
.mk-code pre { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #D7E1E8; }
.mk-plan { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.mk-plan.rec { border: 2px solid var(--link); padding: 31px; }
.mk-plan-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-plan h3 { margin: 0; font-size: 20px; font-weight: 600; }
.mk-plan p { margin: 0; font-size: 15px; }
.mk-rec { font-size: 12px; font-weight: 600; color: var(--link); background: #E2EDF4; padding: 4px 10px; border-radius: 999px; }
.mk-price { font-size: 38px; font-weight: 700; color: var(--navy); } .mk-per { font-size: 15px; color: var(--muted); }
.mk-plan ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.mk-plan .mk-btn { margin-top: auto; }
.mk-faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mk-faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.mk-faq summary { cursor: pointer; font-size: 17px; font-weight: 600; min-height: 28px; }
.mk-faq p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.mk-cta-band { background: var(--navy); padding: 88px 24px; }
.mk-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.mk-cta-row > div:first-child { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.mk-cta-band h2 { color: #FFFFFF; }
.mk-cta-band p { margin: 0; font-size: 18px; line-height: 1.55; color: #C9D4DD; }
.mk-foot { border-top: 1px solid #22384A; background: var(--navy); padding: 32px 24px; }
.mk-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; color: #9FB0BE; }
.mk-foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.mk-foot a { color: #C9D4DD; text-decoration: none; }
@media (max-width: 980px) {
  .mk-hero, .mk-split { grid-template-columns: 1fr; }
  .mk-mock { grid-template-columns: 120px minmax(0, 1fr); }
  .mk-mock-side { display: none; }
}
@media (max-width: 640px) {
  .mk-navlinks { display: none; }
  .mk-mock { grid-template-columns: 1fr; }
  .mk-mock-list { display: none; }
  /* port-static-fixes D2: the 16px gutters and the smaller hero h1 / section h2 that were here are not the
     template's (its phone rule only hides the nav links and the mock's list): removed, so the phone keeps the
     template's 24px gutters, 54px h1 and 38px h2. With the 24px gutters back, the header (logo, Sign in, Start free
     trial) is 4px too wide for one row at 390 and wrapped with the logo on the top edge; a 16px gap between its items
     keeps it on one row, as before. */
  .mk-bar { gap: 16px; }
  /* port-static-fixes D3: on one column the conversation pane needn't fill the 400px the three-pane mock reserves
     (a blank band between the note and the reply box); it takes its content's height, as the template's stacked
     mock does. */
  .mk-mock { min-height: 0; }
}