/* ============================================================
   Local Letter — marketing site brand system
   Source: docs/design-handoff.md (brief is authoritative)
   ============================================================ */

:root {
  --paper: #FAF9F7;
  --rail: #F3F3F1;
  --cream: #F9F8F6;
  --card: #FFFFFF;

  --ink: #1E242B;
  --muted: #5C646B;
  --faint: #9AA0A6;

  --line: #DFDBD5;
  --line-soft: #EAE7E2;

  --gold: #C4A47C;
  --gold-deep: #A88862;
  --gold-wash-10: rgba(196, 164, 124, .10);
  --gold-wash-18: rgba(196, 164, 124, .18);

  --olive: #4A6D56;
  --rust: #9E4D44;

  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;

  --shadow-card: 0 2px 8px -2px rgba(30, 36, 43, .05);
  --shadow-lift: 0 12px 32px -12px rgba(30, 36, 43, .10);

  --radius: 2px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-deep); }

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

.serif { font-family: var(--serif); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}

/* gold tick sitting on a hairline — the app's .el-rule motif */
.el-rule {
  position: relative;
  border-top: 1px solid var(--line);
}
.el-rule::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--gold);
}
.el-rule.center::before { left: 50%; transform: translateX(-50%); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2C333B; color: #fff; }

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ---------- wordmark ---------- */

.wordmark { display: flex; align-items: center; gap: 12px; }

.wordmark .seal {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wordmark .wm-name {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}

.wordmark .wm-sub {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  margin-top: 4px;
  line-height: 1;
}

/* ---------- layout helpers ---------- */

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- shared section scaffolding ---------- */

.section { padding: 96px 0; }
.section.on-rail { background: var(--rail); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 720px; }
.section-head .el-rule { margin-bottom: 28px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: 44px; }
.section-head.centered { margin: 0 auto; text-align: center; }
.section-head.centered .el-rule::before { left: 50%; transform: translateX(-50%); }

.lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- founding banner ---------- */

.founding {
  background: var(--gold-wash-18);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.founding-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.founding-copy { font-family: var(--serif); font-size: 24px; line-height: 1.4; }
.founding-copy .seats { font-style: italic; color: var(--gold-deep); white-space: nowrap; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 760px; margin: 56px auto 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 24px;
  color: var(--gold-deep);
  flex: none;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-a { padding: 0 4px 28px; max-width: 640px; color: var(--muted); line-height: 1.7; }

/* ---------- final CTA ---------- */

.final-cta { text-align: center; padding: 110px 0; }
.final-cta h2 { font-size: 52px; max-width: 720px; margin: 0 auto; }
.final-cta .btn { margin-top: 36px; padding: 16px 34px; font-size: 13px; }
.final-cta .fine { margin-top: 18px; font-size: 14px; color: var(--muted); }

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

.footer { border-top: 1px solid var(--line); background: var(--rail); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 32px;
  padding-bottom: 32px;
  font-size: 13px;
  color: var(--muted);
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer .tagline { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); }
.footer .postal { width: 100%; font-size: 11px; color: var(--faint); letter-spacing: 0.04em; }

/* ---------- nav (shared) ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);box-shadow:0 2px 0 var(--gold)}
.nav .btn{padding:11px 20px}
.wm-logo{display:block;height:30px;width:auto}
.nav-soon{font-size:13px;font-weight:500;color:var(--faint);display:inline-flex;align-items:baseline;gap:6px;cursor:default}
.soon-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-deep)}
/* ---------- feature rows (Home + Features) ---------- */
.featrow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:64px}
.featrow .num{font-family:var(--serif);font-size:15px;color:var(--gold-deep);display:block;margin-bottom:10px}
.featrow h3{font-size:30px;margin-bottom:12px}
.featrow p{font-size:15.5px;color:var(--muted);line-height:1.68;max-width:44ch}
.featrow.rev .ftext{order:2}
.fshot{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-lift)}
.fshot img{display:block;width:100%;border:1px solid var(--line-soft)}
.fshot.crop{position:relative}
.fshot.crop img{height:796px;object-fit:cover;object-position:top}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.trio .fshot{padding:7px}
a.golink{border-bottom:1px solid var(--gold);color:var(--ink);font-weight:500}
a.golink:hover{color:var(--gold-deep)}
/* ---------- pricing plans (Home + Pricing) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;position:relative}
.plan.featured{border-color:var(--gold);box-shadow:var(--shadow-lift)}
.plan.featured::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--gold)}
.plan-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:12px}
.plan-name{font-family:var(--serif);font-size:24px}
.plan-price{font-family:var(--serif);font-size:52px;letter-spacing:-.01em;margin-top:12px}
.plan-price .per{font-size:16px;color:var(--muted);font-family:var(--sans);letter-spacing:0}
.plan-tag{font-size:14px;color:var(--muted);margin-top:6px}
.plan ul{list-style:none;margin:22px 0 26px;flex:1}
.plan li{padding:9px 0;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--muted)}
.plan li:first-child{border-top:0}
.plan .btn{width:100%}
.plan .soon{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--gold-deep);margin-left:6px;white-space:nowrap}
.team-line{max-width:820px;margin:36px auto 0;text-align:center;font-size:15px;color:var(--muted)}
.team-line a{border-bottom:1px solid var(--gold);color:var(--ink)}
/* ---------- two-way CRM sync (Home + Features) ---------- */
.sync{display:grid;grid-template-columns:1fr minmax(250px,1.1fr) 1fr;gap:30px;margin-top:56px;align-items:center}
.sync-node{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:24px}
.sync-node .sn-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--gold-deep);display:block;margin-bottom:8px}
.sync-node ul{list-style:none}
.sync-node li{padding:12px 0;border-top:1px solid var(--line-soft);font-size:15.5px;font-weight:500}
.sync-node li:first-child{border-top:0}
.sync-node li .sub{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:3px}
.sync-lanes{display:flex;flex-direction:column;gap:40px}
.lane{text-align:center}
.lane .lane-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:12px}
.lane .lane-sub{font-size:13px;color:var(--muted);display:block;margin-top:12px}
.lane .arrow{position:relative;height:1px;background:var(--gold)}
.lane .arrow::before{content:"";position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--gold-deep)}
.lane .arrow::after{content:"";position:absolute;top:-4px;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.lane.in .arrow::before{left:0}
.lane.in .arrow::after{right:-1px;border-left:9px solid var(--gold-deep)}
.lane.out .arrow::before{right:0}
.lane.out .arrow::after{left:-1px;border-right:9px solid var(--gold-deep)}
.sync-detail{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:30px}
.sync-kicker{max-width:720px;margin:44px auto 0;text-align:center;font-size:15.5px;color:var(--muted)}
.review-points{list-style:none}
.review-points li{padding:18px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.review-points li:first-child{border-top:1px solid var(--line)}
.review-points .tick{color:var(--gold-deep);font-family:var(--serif);flex:none}
.review-points b{font-weight:600}
.review-points p{display:inline;color:var(--muted);font-size:15px}
/* ---------- footer columns ---------- */
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:56px 0 40px}
.f-brand p{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);max-width:26ch}
.f-col h4{font-family:var(--sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);margin-bottom:14px}
.f-col a,.f-col .f-soon{display:block;font-size:14px;color:var(--muted);padding:5px 0}
.f-col a:hover{color:var(--ink)}
.f-col .f-soon{color:var(--faint);cursor:default}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding:20px 0 28px;font-size:12px;color:var(--faint)}

@media (max-width: 960px) {
  .plans{grid-template-columns:1fr 1fr}
  .featrow{grid-template-columns:1fr;gap:32px}
  .featrow.rev .ftext{order:0}
  .sync{grid-template-columns:1fr;gap:20px}
  .lane .arrow{max-width:280px;margin:0 auto}
  .footer-cols{grid-template-columns:1fr 1fr}
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .plans{grid-template-columns:1fr}
  .sync-detail{grid-template-columns:1fr}
  .nav-links a:not(.btn),.nav-soon{display:none}
  .section { padding: 64px 0; }
  .section-head h2 { font-size: 32px; }
  .lede { font-size: 16.5px; }
  .founding-copy { font-size: 20px; }
  .faq-item summary { font-size: 19px; }
  .final-cta { padding: 72px 0; }
  .final-cta h2 { font-size: 36px; }
  .final-cta .btn { width: 100%; max-width: 340px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- sales assistant ---------- */
.chat-toggle{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;color:var(--gold);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lift);cursor:pointer}
.chat-toggle:hover{border-color:var(--gold);color:var(--gold-deep)}
.chat-toggle svg{display:block}
.chat-toggle[aria-expanded="true"]{background:var(--ink);color:var(--gold);border-color:var(--ink)}
#chat-panel{position:fixed;right:22px;bottom:78px;z-index:60;width:min(360px,calc(100vw - 44px));height:min(480px,calc(100dvh - 120px));display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift);overflow:hidden}
#chat-panel[hidden]{display:none}
.chat-head{padding:14px 8px 14px 18px;border-bottom:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:space-between;gap:8px}
#chat-close{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--muted);transition:color .15s ease}
#chat-close:hover{color:var(--ink)}
.chat-head b{font-family:var(--serif);font-size:17px;display:block}
.chat-head span{font-size:12px;color:var(--muted)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:86%;padding:10px 14px;font-size:14px;line-height:1.5;border-radius:var(--radius)}
.chat-user{align-self:flex-end;background:var(--ink);color:#fff}
.chat-assistant{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card)}
.chat-form input{flex:1;min-width:0;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;outline:none}
.chat-form input:focus{border-color:var(--gold-deep)}
.chat-form button{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--ink);border:0;border-radius:var(--radius);padding:0 16px;cursor:pointer}
.chat-form button:hover{background:var(--gold-deep);color:#fff}
@media (max-width:720px){.chat-toggle{right:14px;bottom:14px}#chat-panel{right:12px;left:12px;bottom:66px;width:auto;height:min(70dvh,520px)}}


/* ── Appended by scripts/port-marketing-site.mjs. Edit it there, not here. ── */

/* Every page scrolled sideways on a phone by about 25px. At 390px the wordmark
   and the gold nav button do not fit on one line, and the button was the thing
   hanging off the edge. Measured with document.scrollWidth, not eyeballed. */
@media (max-width: 480px) {
  .nav-inner { gap: 12px; }
  .wm-logo { height: 24px; }
  .wordmark .wm-sub, .wm-sub { font-size: 9px; letter-spacing: 0.14em; }
  .nav .btn { padding: 10px 13px; font-size: 10.5px; letter-spacing: 0.06em; }
}

/* ── Design review fixes, 2026-08-05. Measured on the live DOM, not eyeballed. ── */

/* 1. STICKY-NAV GOLD BUTTON: rendered 13px grey-on-gold at 2.56:1 (WCAG AA
   fail) while the hero and footer render the same .btn-gold ink-on-gold at
   6.67:1. Root cause is the cascade, not a design choice: `.nav-links a`
   (0,1,1) outweighs `.btn-gold` (0,1,0) and overrides its color AND
   letter-spacing — and `.nav-links a:hover` beats `.btn-gold:hover` the same
   way, killing the white hover text. Re-assert the button's own styling at
   nav specificity. */
.nav-links a.btn-gold { color: var(--ink); letter-spacing: 0.1em; }
.nav-links a.btn-gold:hover { color: #fff; }

/* 2. GOLD TEXT CONTRAST: --gold-deep #A88862 measured 3.14:1 on the paper
   background, but it is TEXT everywhere it matters — every section eyebrow,
   including the hero positioning line ("Weekly local newsletters for real
   estate agents & lenders") — and the fill under white hover text on every
   gold button (3.3:1). #82633E is the same bronze family darkened until every
   use passes AA: 5.3:1 as text on paper, 4.6:1 on the gold-wash band, 5.5:1
   under white button-hover text. */
:root { --gold-deep: #82633E; }

/* 3. PHONES HAD NO MENU: at ≤720px the export hides Features / Pricing /
   About / Sign in with no replacement — Sign in was reachable only from the
   footer, ~9,000px of scrolling away. site.js (hand-written; ports never
   overwrite it) injects a toggle button and clones those links into this
   dropdown. 48px rows meet the touch-target minimum. */
.nav-menu-toggle { display: none; }
.nav-mobile-panel { display: none; }
@media (max-width: 720px) {
  .nav-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex: none;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); cursor: pointer;
  }
  .nav.nav-open .nav-mobile-panel { display: block; }
  .nav-mobile-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
  }
  .nav-mobile-panel a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 20px; font-size: 15px; font-weight: 500; color: var(--ink);
    border-top: 1px solid var(--line);
  }
  /* 4. In-prose golinks measured 21–25px tall on phones — half the 44px touch
     minimum. Padding fattens the target without changing the look. */
  a.golink { display: inline-block; padding: 10px 0; }
}
/* The 480px block above shrinks the nav APPLY button to keep everything on
   one line; the toggle adds 40-44px back, so tighten further. Re-measured:
   375px viewport fits with room to spare only once the wordmark tagline
   yields at ≤420px. */
@media (max-width: 480px) {
  .nav-links { gap: 10px; }
  .nav-menu-toggle { width: 40px; height: 40px; }
  .nav-links a.btn-gold { letter-spacing: 0.06em; }
}
@media (max-width: 420px) {
  .wordmark .wm-sub, .wm-sub { display: none; }
}

/* The hero's italic "you." keeps the LIGHTER gold by request. home.html's own
   style block colors it var(--gold-deep), which this fix pack darkened for
   small-text AA — but at display size (74px desktop / 44px mobile) WCAG
   large-text only needs 3:1, and #A88862 measures 3.14:1 on paper. Passes,
   and the warmth is the point of the flourish. Extra specificity because the
   page's <style> block can outrank a same-specificity appended rule. */
header.hero h1 em { color: #A88862; }