/* Lead Receive public site.

   This file is the app's src/screens/public.css with two things prepended: the --sans and
   --display tokens, which on the dashboard live in styles.css, and the base reset the pages
   relied on. Everything below the marker is byte-identical to public.css, so a change made
   in the app through section edit mode can be carried straight over. */

:root {
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The logo's rounded heavy face. */
  --display: "Fredoka", var(--sans);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #e9e8e4;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p { margin: 0; }

/* ---- below here: public.css, unchanged ------------------------------------------------- */

/* The two public pages: the home page and the privacy policy. Everything outside the login
   gate lives here, so the app's own styles.css stays about the dashboard.

   The palette is the logo's, sampled from assets/logo.png rather than invented: the paper it
   sits on, the red of "Lead", the charcoal of "Receive". Fredoka is the logo's own face and
   is already loaded for page titles; IBM Plex Sans carries everything else. Hairlines and
   3-6px radii, matching the dashboard, because a client who sees both should not feel they
   moved between two products. */

.pub {
  --paper: #e9e8e4;
  --ink: #232e32;
  --ink-2: #5a6166;
  --ink-3: #868d92;
  --red: #e64c43;
  --red-deep: #cc3a32;
  --red-soft: #fdeceb;
  --surface: #ffffff;
  --line: #d9d6d0;
  --line-soft: #e5e2dc;
  --maxw: 1080px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.55;
}

.pub a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.pub a:hover { text-decoration-color: var(--red); }
.pub :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.pub-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* -- header ------------------------------------------------------------------------------- */

.pub-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pub-head .pub-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}
.pub-head img { height: 30px; width: auto; display: block; }
.pub-head nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.pub-head nav a { text-decoration: none; color: var(--ink-2); }
.pub-head nav a:hover { color: var(--ink); }

.pub-signin {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.pub-head nav a.pub-signin:hover { background: var(--ink); color: var(--paper); }

/* -- type scale --------------------------------------------------------------------------- */

.pub h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 15ch;
}
.pub h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.pub h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
}
.pub p { margin: 0 0 14px; max-width: 64ch; }
.pub p:last-child { margin-bottom: 0; }
.pub .lede { font-size: 19px; color: var(--ink-2); max-width: 46ch; }

.pub section { padding: 56px 0; border-top: 1px solid var(--line); }
.pub section:first-of-type { border-top: 0; }
.pub .section-intro { max-width: 58ch; margin-bottom: 28px; }
.pub .section-intro p { color: var(--ink-2); margin-bottom: 0; }

/* -- hero --------------------------------------------------------------------------------- */

.pub-hero { padding: 64px 0 60px; }
.pub-hero .pub-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.pub-hero .lede { margin-top: 18px; }
.pub-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.pub-cta {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}
.pub-cta:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.pub-cta.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.pub-cta.quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* -- the thread: the one thing on the page doing any work ---------------------------------- */

.pub-thread {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 20px 22px;
}
.pub-thread .from {
  font-size: 12px;
  color: var(--ink-3);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.pub-bubbles { display: flex; flex-direction: column; gap: 10px; }
.pub-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
}
/* Laid out as the homeowner sees it on their own phone: what we sent arrives on the left,
   what they typed sits on the right. The accent lands on their reply because that reply is
   the whole product. */
.pub-bubble.ours {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
}
.pub-bubble.theirs {
  align-self: flex-end;
  background: var(--red);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.pub-handoff {
  align-self: center;
  font-size: 12px;
  color: var(--ink-3);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.pub-handoff::before, .pub-handoff::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--line);
}
.pub-thread .note { font-size: 13px; color: var(--ink-3); margin: 16px 0 0; }

/* One orchestrated moment: the messages arrive in order, once, on load. It is the only
   animation on the page, and it exists because the pause between a text and its reply is the
   thing being sold. Anyone who asks for less motion gets the whole thread at once. */
@media (prefers-reduced-motion: no-preference) {
  .pub-bubble { animation: pub-arrive 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
  .pub-bubble:nth-child(1) { animation-delay: 0.15s; }
  .pub-bubble:nth-child(2) { animation-delay: 0.95s; }
  .pub-bubble:nth-child(3) { animation-delay: 1.55s; }
  .pub-handoff { animation: pub-arrive 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; animation-delay: 2.2s; }
}
@keyframes pub-arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* -- reply rows: what happens to each kind of answer ---------------------------------------- */

.pub-rows { border-top: 1px solid var(--line-soft); }
.pub-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.pub-row .said { font-size: 16px; color: var(--ink); }
.pub-row .said::before { content: "\201C"; }
.pub-row .said::after { content: "\201D"; }
.pub-row .then { font-size: 15px; color: var(--ink-2); }

/* -- plain two-column prose ----------------------------------------------------------------- */

.pub-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.pub-cols p { color: var(--ink-2); font-size: 15px; }

/* -- the homeowner notice: the reason a stranger lands on this page ------------------------- */

.pub-notice {
  max-width: 820px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 26px 28px;
}
.pub-notice h2 { margin-bottom: 10px; }
.pub-notice ul { margin: 14px 0 0; padding-left: 20px; }
.pub-notice li { margin-bottom: 8px; color: var(--ink-2); max-width: 62ch; }
.pub-notice li:last-child { margin-bottom: 0; }
.pub-notice b { color: var(--ink); font-weight: 600; }

/* -- footer ---------------------------------------------------------------------------------- */

.pub-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  font-size: 14px;
  color: var(--ink-2);
}
.pub-foot .pub-wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.pub-foot .who { font-weight: 500; color: var(--ink); }
.pub-foot nav { margin-left: auto; display: flex; gap: 20px; }

/* -- the policy ------------------------------------------------------------------------------ */

.pub-doc { padding: 48px 0 72px; }
.pub-doc .pub-wrap { max-width: 760px; }
.pub-doc .updated { font-size: 14px; color: var(--ink-3); margin: 10px 0 0; }
.pub-doc section { padding: 32px 0 0; border-top: 0; }
.pub-doc section + section { border-top: 1px solid var(--line-soft); }
.pub-doc h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.pub-doc p, .pub-doc li { color: var(--ink-2); font-size: 15.5px; max-width: none; }
.pub-doc strong { color: var(--ink); font-weight: 600; }
.pub-doc ul { margin: 0 0 14px; padding-left: 22px; }
.pub-doc li { margin-bottom: 7px; }
.pub-doc .toc { font-size: 15px; margin: 24px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.pub-doc .toc li { margin-bottom: 7px; }
.pub-doc .toc a { color: var(--ink-2); text-decoration: none; }
.pub-doc .toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
.pub-doc .callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px;
  margin: 0 0 14px;
}
.pub-doc .callout p:last-child { margin-bottom: 0; }

/* -- phone ------------------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .pub-hero .pub-wrap { grid-template-columns: 1fr; gap: 36px; }
  .pub-hero { padding: 40px 0 44px; }
  .pub h1 { max-width: none; }
  .pub section { padding: 40px 0; }
  .pub-cols { grid-template-columns: 1fr; gap: 26px; }
  .pub-row { grid-template-columns: 1fr; gap: 4px; }
  .pub-doc .toc { columns: 1; }
  .pub-foot .pub-wrap { flex-direction: column; }
  .pub-foot nav { margin-left: 0; }
}

@media (max-width: 520px) {
  .pub-wrap { padding: 0 18px; }
  .pub-head nav { gap: 14px; font-size: 14px; }
  .pub-head .pub-wrap { gap: 12px; }
  .pub-head img { height: 26px; }
  .pub-notice { padding: 20px; }
}