/* ============================================================
   MyNeighbor — new landing layout (scoped under .lp)
   Only the marketing layout lives here. The header, footer and
   the signup-card auth form keep their styles.css rules, so every
   selector below is namespaced to .lp to avoid clobbering them.
   Real mobile view is handled with @media queries (no device simulator).
   ============================================================ */
.lp {
  --bg: #101311; --panel: #1b211c; --green: #70c86b; --green2: #23883f;
  --text: #f5f4eb; --muted: #b4b9ac; --line: #30382f;
  color: var(--text);
}
/* Heading resets scoped so they never touch the preserved .signup-card */
.lp .hero-copy > h1, .lp .section-head h2, .lp .preview h2, .lp .cta h2, .lp .card h3 { font-weight: 850; letter-spacing: -1px; margin: 0; }
.lp .eyebrow { color: #9cdb90; font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.lp .eyebrow::before { content: ''; width: 25px; height: 2px; background: var(--green); }

/* ---------- HERO ---------- */
.lp .hero {
  position: relative; overflow: hidden; background:
    radial-gradient(ellipse at 50% 18%, #263a27 0%, #17231b 47%, #101511 90%);
  border-top: 1px solid #202820;
}
.lp .hero-inner {
  position: relative; z-index: 3; max-width: 1200px; margin: auto;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center;
  gap: 40px; padding: 56px 28px 60px;
}
.lp .hero-copy > h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.05; margin: 20px 0 18px; letter-spacing: -3px; }
.lp .hero-copy > h1 em { font-style: normal; color: var(--green); }
.lp .intro { color: #c4cdbf; font-size: 18px; line-height: 1.8; max-width: 540px; margin: 0; }
.lp .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 6px; }
.lp .small-note { font-size: 12px; color: #99a697; margin-top: 14px; }
.lp .signup-card { max-width: 460px; margin-top: 22px; }
.lp .invite-btn { margin-top: 14px; }

/* Scene illustration (CSS-drawn house) */
.lp .scene { height: 410px; position: relative; filter: drop-shadow(0 20px 40px #0006); }
.lp .moon { position: absolute; right: 25px; top: 20px; width: 85px; height: 85px; border-radius: 50%; background: #ffedbc; box-shadow: 0 0 80px #ffe6a547; }
.lp .hill { position: absolute; bottom: 0; width: 115%; left: -5%; height: 120px; background: #2d6038; border-radius: 60% 70% 0 0; }
.lp .hill.back { bottom: 60px; background: #254d32; height: 135px; left: -12%; }
.lp .house { position: absolute; bottom: 54px; width: 210px; height: 175px; background: #e9d9b9; border-radius: 6px 6px 0 0; left: 24%; box-shadow: inset -14px 0 #0001; }
.lp .roof { position: absolute; left: -24px; top: -91px; width: 0; height: 0; border-left: 129px solid transparent; border-right: 129px solid transparent; border-bottom: 100px solid #b9674c; }
.lp .door { position: absolute; bottom: 0; left: 89px; width: 61px; height: 100px; background: #795a43; border-radius: 30px 30px 0 0; box-shadow: 0 0 32px #f8bd55aa; }
.lp .door::after { content: ''; position: absolute; right: 9px; top: 55px; width: 6px; height: 6px; background: #f5dfb5; border-radius: 50%; }
.lp .window { position: absolute; top: 39px; left: 20px; width: 50px; height: 55px; background: #f4c975; border: 6px solid #fff3d4; box-shadow: 0 0 22px #f8c97899; }
.lp .window.r { left: auto; right: 15px; }
.lp .window::after { content: ''; position: absolute; left: 19px; top: 0; height: 100%; width: 5px; background: #fff3d4; }
.lp .chimney { position: absolute; width: 28px; height: 65px; background: #bd765b; top: -89px; right: 28px; }
.lp .tree { position: absolute; bottom: 53px; right: 1%; height: 230px; width: 115px; }
.lp .trunk { position: absolute; bottom: 0; left: 50px; width: 22px; height: 110px; background: #8b6545; }
.lp .leaf { position: absolute; border-radius: 50%; background: #65b858; width: 105px; height: 110px; top: 25px; left: 4px; box-shadow: inset -15px -10px #3f944c; }
.lp .leaf.two { width: 100px; height: 95px; top: 0; left: 30px; background: #7bc766; }
.lp .leaf.three { width: 85px; height: 90px; top: 64px; left: -26px; background: #71c05b; }
.lp .path { position: absolute; bottom: -25px; left: 42%; width: 85px; height: 100px; background: #c5ae82; clip-path: polygon(32% 0, 67% 0, 100% 100%, 0 100%); }
.lp .light { position: absolute; bottom: 178px; left: calc(24% + 87px); width: 66px; height: 80px; background: #ffcf6970; filter: blur(30px); border-radius: 50%; animation: lp-glow 4s ease-in-out infinite alternate; }
.lp .star { position: absolute; color: #f7e8ac; font-size: 18px; animation: lp-twinkle 3s infinite alternate; }
.lp .star.a { top: 50px; left: 15%; }
.lp .star.b { top: 130px; right: 8%; animation-delay: 1s; }
.lp .star.c { top: 12px; left: 52%; animation-delay: 2s; }
@keyframes lp-twinkle { to { opacity: .2; transform: scale(.7); } }
@keyframes lp-glow { to { opacity: .5; } }

/* ---------- SECTIONS / CARDS ---------- */
.lp .section { max-width: 1180px; margin: 0 auto; padding: 90px 25px; }
.lp .section-head { text-align: center; max-width: 660px; margin: 0 auto 42px; }
.lp .section-head .eyebrow { justify-content: center; }
.lp .section-head h2 { font-size: clamp(32px, 4vw, 46px); letter-spacing: -1.7px; margin: 10px 0; }
.lp .section-head p { color: var(--muted); line-height: 1.7; }
.lp .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp .card { border: 1px solid var(--line); background: #191f1a; border-radius: 20px; padding: 26px; min-height: 185px; transition: transform .2s, border-color .2s; }
.lp .card:hover { transform: translateY(-5px); border-color: #4c7b4a; }
.lp .card .ico { font-size: 28px; }
.lp .card h3 { font-size: 19px; margin: 16px 0 8px; }
.lp .card p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }

/* ---------- COMMUNITY PREVIEW ---------- */
.lp .preview { background: #171e18; border-top: 1px solid #2b372c; border-bottom: 1px solid #2b372c; }
.lp .preview-inner { max-width: 1120px; margin: auto; padding: 80px 25px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.lp .preview h2 { font-size: 42px; line-height: 1.15; letter-spacing: -1.5px; margin: 12px 0; }
.lp .preview p { color: var(--muted); line-height: 1.8; }
.lp .feed { background: #101411; border: 1px solid #344033; border-radius: 18px; padding: 18px; box-shadow: 0 25px 60px #0004; }
.lp .feed-top { display: flex; gap: 8px; border-bottom: 1px solid #283329; padding-bottom: 13px; color: #aab7a7; font-size: 12px; }
.lp .pill { padding: 7px 12px; background: #25372a; border-radius: 20px; color: #b6e4b2; }
.lp .post { margin-top: 12px; background: #1d251e; border-radius: 12px; padding: 16px; }
.lp .post strong { font-size: 13px; }
.lp .post small { display: block; color: #879688; margin-top: 3px; }
.lp .post p { font-size: 13px; margin: 12px 0; color: #d7ded4; }
.lp .reactions { font-size: 12px; color: #93ae92; }
.lp .feed-note { font-size: 11px; color: #80917f; margin-top: 13px; text-align: center; }

/* ---------- CTA ---------- */
.lp .cta { text-align: center; padding: 95px 25px; background: radial-gradient(ellipse at center, #24452a, #101511 70%); }
.lp .cta h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -2px; margin: 0 0 15px; }
.lp .cta p { color: #c5d3c0; margin-bottom: 26px; }

/* ---------- Secondary button (matches .btn base in styles.css) ---------- */
.lp .btn.alt { background: transparent; border: 1px solid #657462; color: var(--text); }
.lp .btn.alt:hover { background: #1e2a20; }

/* ============================================================
   REAL MOBILE VIEW (phone device) — replaces the old simulator
   ============================================================ */
@media (max-width: 800px) {
  .lp .hero-inner { grid-template-columns: 1fr; text-align: center; padding: 44px 20px 40px; gap: 14px; }
  .lp .eyebrow, .lp .actions { justify-content: center; }
  .lp .intro { margin: 0 auto; font-size: 15px; line-height: 1.65; }
  .lp .hero-copy > h1 { font-size: clamp(38px, 10vw, 58px); letter-spacing: -2px; }
  .lp .signup-card { margin-left: auto; margin-right: auto; width: 100%; }
  .lp .actions .btn { flex: 1 1 160px; }
  .lp .small-note { font-size: 11px; max-width: 320px; margin: 14px auto 0; }
  .lp .scene { height: 290px; max-width: 350px; width: 100%; margin: -8px auto -30px; transform: scale(.77); transform-origin: center bottom; }
  .lp .section { padding: 60px 18px; }
  .lp .section-head { margin-bottom: 28px; }
  .lp .section-head h2 { font-size: 32px; }
  .lp .section-head p { font-size: 14px; }
  .lp .cards { grid-template-columns: 1fr; gap: 12px; }
  .lp .card { padding: 21px; min-height: 0; }
  .lp .card h3 { margin: 10px 0 6px; font-size: 17px; }
  .lp .preview-inner { grid-template-columns: 1fr; gap: 20px; padding: 55px 18px; }
  .lp .preview h2 { font-size: 32px; }
  .lp .preview p { font-size: 14px; }
  .lp .feed { padding: 12px; }
  .lp .post { padding: 13px; }
  .lp .cta { padding: 70px 18px; }
  .lp .cta h2 { font-size: 34px; }
  .lp .cta p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
}