/* blocfone® hero — socials front porch. Mobile-first: pitch on top, LIVE chat
   filling the rest of the screen (the chat IS the demo — no CTA button). */
:root {
  --bg: #ffffff;
  --canvas: #f2f4f7;
  --text: #1a1a1a;
  --hint: #7a8087;
  --accent: #f5c400;
  --navy: #040039;
  --border: #d9dee4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 16px/1.5 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

#page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 1060px;
  margin: 0 auto;
}

/* ── Pitch ── */
#pitch {
  padding: 10px 20px 6px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
#brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;   /* matches the chat widget's header brand */
  color: var(--navy);
  margin-bottom: 8px;
}
#brand img { width: 38px; height: 38px; }
#brand img { border-radius: 50%; display: block; }
h1 {
  color: var(--navy);
  font-size: 25px;               /* "Landed. Connected." fits one line on phones */
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin-bottom: 5px;
}
#sub { color: var(--hint); font-size: 13.5px; margin-bottom: 7px; }  /* two short lines */
#trust { list-style: none; display: flex; flex-direction: column; gap: 3px; }
#trust li { font-size: 13px; }

/* ── Live chat ── */
#chatwrap {
  flex: 1 1 auto;
  display: flex;
  padding: 6px 8px calc(10px + env(safe-area-inset-bottom));
  min-height: 420px;   /* pre-JS fallback; hero.js grows the iframe to the
                          widget's full content height (embed=fit) and the
                          PAGE scrolls — no inner scrollbars on mobile. */
}
#chatframe {
  flex: 1 1 auto;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--canvas);
  box-shadow: 0 6px 30px rgba(0,0,0,.08);
}

/* ── Desktop: pitch left, phone-framed chat right ── */
@media (min-width: 900px) {
  #page {
    display: grid;
    grid-template-columns: 1fr 460px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0 40px;
    padding: 0 24px;
  }
  #pitch { grid-column: 1; padding: 40px 0; }
  #brand { font-size: 17px; margin-bottom: 14px; }
  #brand img { width: 44px; height: 44px; }
  h1 { font-size: 52px; margin-bottom: 14px; }
  #sub { font-size: 18px; margin-bottom: 18px; }
  #trust { gap: 8px; }
  #trust li { font-size: 15.5px; }
  #chatwrap {
    grid-column: 2;
    padding: 28px 0;
    min-height: 0;
    justify-content: center;
  }
  #chatframe {
    width: 400px;
    height: min(720px, calc(100dvh - 120px));
    flex: 0 0 auto;
    border-radius: 26px;
    border: 8px solid #111;      /* simple phone frame */
  }
}