/* Rentr — shared styles
   Palette approximated from rentr_pitch_deck-updatedPDF.pdf (dark green / cream / burnt orange).
   Local static build — see ceo/web/WEBSITE-BRAINSTORM.md for every decision behind these choices. */

:root {
  --green-dark: #1c3c35;
  --green-darker: #12241f;
  --orange: #cc6b34;
  --orange-dark: #a8552a;
  --cream: #f5f2ea;
  --cream-dim: #eae6da;
  --text-dark: #1c3c35;
  --text-light: #f5f2ea;
  --muted: #6b7a76;
  --border: #d8d3c4;
  --radius: 14px;
  --max-width: 880px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.15;
  margin: 0 0 0.5em 0;
}

p { margin: 0 0 1em 0; }

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
/* Wider container for visual-heavy sections (hero, how-it-works) — text-heavy sections
   (FAQ, etc.) keep the narrower default .wrap width for readable line length. */
.wrap-wide {
  max-width: 1100px;
}

/* Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--green-dark);
  color: var(--text-light);
  border-bottom: 1px solid var(--green-darker);
}
.site-nav .wrap {
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--text-light);
  text-decoration: none;
}
/* Placeholder logo mark — a monogram, not marketing-content's final delivered logo/wordmark
   (that handoff is still TODO). Swap this out the moment a real asset lands. */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.92rem;
}
.nav-links a { text-decoration: none; color: var(--cream-dim); }
.nav-links a:hover { color: var(--text-light); }

/* Mobile nav — hidden hamburger toggle on desktop; below 760px the link row becomes a
   dropdown panel. Added 2026-09-10 after the pre-launch review found no responsive
   treatment existed and the nav (including the primary CTA button) would overflow/clip
   on phone widths. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-light);
  margin: 5px 0;
  border-radius: 2px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--orange);
  color: #fff;
}
.btn-primary:hover { background: var(--orange-dark); }
.btn-secondary {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--cream-dim);
  padding: 9px 20px;
  font-size: 0.9rem;
}
.btn-secondary:hover { background: rgba(245,242,234,0.1); }
.btn-outline-dark {
  background: transparent;
  border: 1.5px solid var(--green-dark);
  color: var(--green-dark);
}
.btn-outline-dark:hover { background: var(--green-dark); color: var(--text-light); }
.btn[disabled], .btn-disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn-disabled:hover { background: var(--border); }

/* Hero */
.hero {
  background: var(--green-dark);
  color: var(--text-light);
  padding: 76px 0 72px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { font-size: 3.1rem; max-width: 15ch; }
.hero .sub { font-size: 1.2rem; max-width: 46ch; color: var(--cream-dim); }
.hero .cta-row { display: flex; gap: 14px; align-items: center; margin-top: 28px; flex-wrap: wrap; }

.stat-strip {
  margin-top: 40px;
  padding: 18px 22px;
  background: rgba(245,242,234,0.08);
  border: 1px solid rgba(245,242,234,0.18);
  border-radius: var(--radius);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 640px;
}
.stat-strip .num { font-family: Georgia, serif; font-size: 2rem; color: var(--orange); font-weight: bold; }
.stat-strip .stat-text { font-size: 0.92rem; color: var(--cream-dim); }
.stat-strip .stat-source { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

/* Hero visual (right column) — fills the blank space next to the headline. Was a condensed
   "at a glance" icon-summary card; replaced 2026-09-10 (Luis Clare, after the pre-launch
   review flagged it as duplicating How It Works right below it) with the illustrative
   dashboard mockup itself, moved up from that section — see .mockup-card below, now used
   here instead of in How It Works, so it appears once on the page, not twice. */
.hero-visual { display: flex; justify-content: center; }

/* Sections */
section.block {
  padding: 64px 0;
}
section.block.alt { background: var(--cream-dim); }
section.block h2 { font-size: 1.9rem; color: var(--green-dark); }
section.block .lede { max-width: 60ch; color: var(--text-dark); }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}
.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 30px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.step .step-icon {
  width: 44px;
  height: 44px;
  color: var(--orange);
  margin-bottom: 18px;
}
.step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.25rem; font-family: -apple-system, sans-serif; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 1rem; color: var(--muted); margin: 0; }

/* Illustrative dashboard mockup — real coded component, not an image. Lives in the hero
   (.hero-visual is its wrapper there) since 2026-09-10; the old .mockup-wrap wrapper it
   used inside How It Works no longer exists anywhere, so it isn't defined here either.
   2026-09-10: removed the "flagged for review" line and the caption above the card
   (Luis Clare) — bill-amount's bottom margin picks up the spacing the flag used to provide. */
.mockup-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 2px solid var(--green-dark);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 16px 40px rgba(28,60,53,0.12);
}
.mockup-card .house-name { font-weight: 700; font-size: 1.2rem; color: var(--green-dark); }
.mockup-card .house-meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; }
.mockup-card .bill-label { font-size: 0.85rem; color: var(--muted); }
.mockup-card .bill-amount { font-family: Georgia, serif; font-size: 2.6rem; color: var(--orange); font-weight: bold; margin: 2px 0 18px; }
.roommate-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.roommate-row .who { display: flex; align-items: center; gap: 10px; }
/* Names have no color of their own by default, so they'd otherwise inherit whatever text
   color surrounds the card — since the card moved into the hero (2026-09-10), that was the
   hero's light cream text color, unreadable against the card's white background. Set
   explicitly rather than relying on inheritance, so this can't happen again if the card
   moves somewhere else later. */
.roommate-row .name { color: var(--text-dark); font-weight: 500; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-dark); color: #fff;
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pill { font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.pill.paid { background: #e3ede9; color: var(--green-dark); }
.pill.pending { background: var(--cream-dim); color: var(--muted); }
.mockup-card .mock-cta {
  width: 100%; margin-top: 16px; text-align: center;
  background: var(--orange); color: #fff; border-radius: 999px;
  padding: 12px; font-weight: 600; font-size: 0.92rem;
}
.mockup-card .mock-footnote { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 8px; }

/* FAQ */
.faq-item {
  border-top: 1px solid var(--border);
  padding: 18px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-size: 1rem; font-family: -apple-system, sans-serif; margin: 0 0 6px; }
.faq-item p { margin: 0; font-size: 0.94rem; color: var(--text-dark); }
.todo {
  color: var(--orange-dark);
  background: #fbeee2;
  border: 1px dashed var(--orange);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.85em;
  font-family: ui-monospace, Menlo, monospace;
}

/* Pricing / freemium */
.plan-row { display: flex; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.plan-card {
  flex: 1; min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px;
}
.plan-card h3 { font-size: 1.1rem; font-family: -apple-system, sans-serif; }
.plan-card .price { font-family: Georgia, serif; font-size: 1.5rem; color: var(--green-dark); margin-bottom: 8px; }
.plan-card .price .unit { font-family: -apple-system, sans-serif; font-size: 0.95rem; font-weight: normal; color: var(--muted); }
.plan-card ul { padding-left: 18px; font-size: 0.92rem; color: var(--text-dark); }
.plan-card.premium { border-color: var(--orange); }

/* Closing CTA */
.closing-cta {
  background: var(--green-dark);
  color: var(--text-light);
  text-align: center;
  padding: 64px 0;
}
.closing-cta h2 { color: var(--text-light); }
.closing-cta .sub { color: var(--cream-dim); }
.closing-cta .also { margin-top: 18px; font-size: 0.9rem; }
.closing-cta .also a { color: var(--orange); text-decoration: underline; }

/* Footer */
footer.site-footer {
  background: var(--green-darker);
  color: var(--cream-dim);
  padding: 28px 0;
  font-size: 0.85rem;
}
footer.site-footer .wrap { max-width: 1080px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* Forms */
main.form-page { padding: 56px 0 80px; }
main.form-page .wrap { max-width: 620px; }
main.form-page h1 { font-size: 2rem; color: var(--green-dark); }
main.form-page .sub { color: var(--muted); }
/* "Coming soon" state — forms are disabled (not accepting submissions yet), so no
   consent/privacy line is needed until real signups open. See WEBSITE-BRAINSTORM.md. */
.badge-soon {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-family: -apple-system, sans-serif;
  background: var(--cream-dim);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
form.rentr-form input:disabled,
form.rentr-form textarea:disabled {
  background: var(--cream-dim);
  color: var(--muted);
  cursor: not-allowed;
}
.local-note {
  background: var(--cream-dim);
  border: 1px dashed var(--muted);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-dark);
  margin: 20px 0 28px;
}
/* Interim lead-capture, added 2026-09-10: while the forms below are disabled ("Coming
   soon", no consent copy yet), this gives an interested visitor a real way to reach out —
   a self-initiated email, not a Rentr-collected/stored form submission, so it doesn't need
   consent copy of its own. See WEBSITE-BRAINSTORM.md. */
.notify-box {
  background: var(--cream-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--text-dark);
  margin: 20px 0 8px;
}
.notify-box a { color: var(--orange-dark); font-weight: 600; text-decoration: underline; }
form.rentr-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
form.rentr-form label { font-size: 0.88rem; font-weight: 600; display: block; margin-bottom: 6px; }
form.rentr-form input, form.rentr-form select, form.rentr-form textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text-dark);
}
form.rentr-form .hint { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
form.rentr-form .consent { font-size: 0.82rem; color: var(--muted); }
form.rentr-form button { margin-top: 6px; align-self: flex-start; }
.form-status {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--cream-dim);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  display: none;
}
.form-status.visible { display: block; }
.back-link { font-size: 0.88rem; }

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px) {
  .site-nav .wrap { position: relative; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--green-dark);
    border-top: 1px solid var(--green-darker);
    padding: 12px 24px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; }
  .nav-links .btn { margin-top: 6px; }
}

@media (max-width: 720px) {
  .hero h1 { font-size: 2.1rem; }
  .steps { grid-template-columns: 1fr; }
  .plan-row { flex-direction: column; }
}