/* Monique Field Property: the landlord landing pages (tools/landlords.mjs).
   Loaded after worth.css, which gives them the same header, hero, form card,
   questions and footer as the worth page. This file adds only what the
   landlord pages have and the worth page doesn't. */

.top-phone span { white-space: nowrap; }

/* The form card: the offer across its top, and Jordan under the button */
.offer-ribbon {
  margin: -26px -26px 20px; padding: 11px 26px; border-radius: 10px 10px 0 0;
  background: var(--bone); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink);
}
.offer-ribbon strong { font-weight: 600; color: var(--green); }
.offer-ribbon a { color: var(--muted); text-underline-offset: 3px; }
.from-jordan { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.from-jordan img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.from-jordan p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.from-jordan strong { color: var(--ink); font-weight: 600; }
.done-offer { color: var(--green) !important; font-weight: 500; }

/* The proof strip under the hero */
.proof { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proof-item { display: flex; align-items: center; gap: 12px; padding: 22px 18px; text-decoration: none; color: var(--ink); border-left: 1px solid var(--line); }
.proof-item:first-child { border-left: 0; padding-left: 0; }
.proof-item > span { display: flex; flex-direction: column; line-height: 1.35; }
.proof-item strong { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.proof-item > span > span { font-size: 13.5px; color: var(--muted); }
.proof-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.proof-item .licon { width: 36px; height: 36px; flex: none; }
.proof-item .stars svg { width: 12px; height: 12px; }
a.proof-item:hover strong { color: var(--green); }

/* Sections */
.sec { padding: clamp(56px, 7vw, 96px) 0; }
.tone-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tone-bone { background: var(--bone); }
.wrap.narrow { max-width: 860px; }
.sec-head { margin-bottom: clamp(28px, 3vw, 40px); }
.sec-head h2 { font-size: clamp(30px, 3.1vw, 42px); max-width: 22ch; }
.sec-head h2 em, .jordan h2 em { font-style: italic; color: var(--sage); }
.sec-intro { color: var(--muted); font-size: 17px; max-width: 620px; margin-top: 16px; }
.data-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.text-link { color: var(--green); font-weight: 500; text-underline-offset: 4px; }
.licon { width: 40px; height: 40px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29,39,34,.3); min-height: 50px; }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--green); color: var(--green); }
.btn-line .ico { fill: currentColor; }
.btn-light { background: #fff; color: var(--green); min-height: 52px; padding: 0 24px; font-weight: 600; }
.btn-light:hover { background: var(--bone); }
a.btn-go { min-height: 50px; padding: 0 24px; flex: none; }

/* A ticked list */
.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticklist li { display: flex; gap: 10px; align-items: flex-start; }
.ticklist svg { flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 4px; border-radius: 50%; background: var(--pale); fill: none; stroke: var(--green); stroke-width: 2.4; }

/* The small rent roll statement */
.statement { text-align: center; }
.statement blockquote { margin: 0 0 22px; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.2; color: var(--ink); }
.statement blockquote em { color: var(--sage); }
.statement p:not(.kicker) { color: var(--muted); font-size: 17px; max-width: 680px; margin: 0 auto; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px 22px; }
.tile h3 { font: 600 17px/1.3 var(--sans); margin: 16px 0 8px; }
.tile p { color: var(--muted); font-size: 15.5px; }

/* Jordan */
.jordan-grid { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.jordan-photo { margin: 0; border-radius: 10px; overflow: hidden; background: var(--bone); }
.jordan-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.jordan h2 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 18px; }
.jordan-lede { font-size: 18px; color: var(--ink); }
.jordan-copy > p:not(.kicker):not(.jordan-lede) { color: var(--muted); }
.jordan .ticklist { margin: 24px 0 28px; }
.jordan-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Jordan's five checks, and the handover file */
.checks-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.checks { list-style: none; margin: 0; padding: 0; counter-reset: c; border-top: 1px solid var(--line); }
.checks li { counter-increment: c; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.checks li::before { content: counter(c, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); font-size: 22px; color: var(--sage); line-height: 1.2; }
.checks strong { font-weight: 600; }
.checks span { color: var(--muted); font-size: 15.5px; }
.file-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 28px 26px; box-shadow: 0 24px 60px -36px rgba(29,39,34,.3); }
.file-card h3 { font: 400 24px/1.2 var(--serif); margin: 0 0 18px; }

/* Numbered steps */
.steps3, .steps4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps3 { grid-template-columns: repeat(3, 1fr); }
.steps4 { grid-template-columns: repeat(4, 1fr); }
.steps3 li, .steps4 li { counter-increment: s; position: relative; padding: 24px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.steps3 li::before, .steps4 li::before {
  content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 14px;
}
.steps3 h3, .steps4 h3 { font: 600 17px/1.3 var(--sans); margin: 0 0 6px; }
.steps3 p, .steps4 p { color: var(--muted); font-size: 15.5px; }

/* The switch: what hurts, and what changes */
.pains-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.pains { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pains li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-weight: 500; }
.pains li::before { content: ""; flex: none; width: 18px; height: 2px; background: #b4472f; border-radius: 2px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compare-col { border-radius: 10px; padding: 26px 26px 24px; border: 1px solid var(--line); }
.compare-col h3 { font: 400 24px/1.2 var(--serif); margin: 0 0 18px; }
.compare-col.stays { background: #fff; }
.compare-col.changes { background: var(--bone); }

/* Rents */
.rents-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.table-wrap { overflow-x: auto; }
.rents { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.rents th, .rents td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rents thead th { font-size: 13px; font-weight: 600; color: var(--muted); border-bottom-color: rgba(29,39,34,.3); }
.rents tbody th { font-weight: 500; }
.rents tbody th span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.rents .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rents td.n { font-weight: 600; }

/* Reviews */
.voices-ll .voices-head { margin-bottom: 8px; }
.voices-ll .sec-head { margin-bottom: 24px; }
.quotes-ll { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quotes-ll figure { margin: 0; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.quotes-ll blockquote { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.4; }
.quotes-ll figcaption { margin-top: auto; font-size: 13px; color: var(--muted); }

/* The offer, and the closing band */
.offer { background: var(--green); color: var(--cream); }
.offer-grid { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.offer .kicker { color: var(--pale); }
.offer h2 { font-size: clamp(32px, 3.4vw, 46px); color: #fff; margin-bottom: 12px; }
.offer p { max-width: 560px; }
.offer-terms { font-size: 13.5px; color: #cfdacb; }
.cta-band { background: var(--night); color: #e3e9e0; padding: clamp(52px, 6vw, 80px) 0; }
.cta-grid { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); max-width: 20ch; margin-bottom: 12px; }
.cta-band p { max-width: 560px; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-call { color: #fff; text-underline-offset: 4px; font-size: 15px; }

/* The phone's bar at the bottom, once the form is out of sight */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(245,244,239,.96); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(29,39,34,.35);
}
.sticky-cta .btn-go { flex: 1; }
.sticky-call { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--green); }
.sticky-call .ico { width: 20px; height: 20px; }
@media (min-width: 981px) { .sticky-cta { display: none !important; } }

/* Tablet */
@media (max-width: 980px) {
  .proof-row { grid-template-columns: 1fr 1fr; }
  .proof-item { padding: 16px 14px; }
  .proof-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles.three { grid-template-columns: 1fr; }
  .jordan-grid, .checks-grid, .pains-grid, .rents-grid { grid-template-columns: 1fr; }
  .jordan-photo { max-width: 420px; }
  .steps4 { grid-template-columns: 1fr 1fr; }
  .quotes-ll { grid-template-columns: 1fr; }
  body { padding-bottom: 74px; }
}

/* Phone */
@media (max-width: 640px) {
  .top-phone-who { display: none; }
  .offer-ribbon { margin: -20px -16px 16px; padding: 10px 16px; border-radius: 8px 8px 0 0; }
  .proof-row { grid-template-columns: 1fr; }
  .proof-item, .proof-item:nth-child(odd) { border-left: 0; padding: 14px 0; }
  .proof-item:nth-child(n+2) { border-top: 1px solid var(--line); }
  .tiles, .steps3, .steps4, .compare { grid-template-columns: 1fr; }
  .rents th, .rents td { padding: 12px 6px; }
  .jordan-actions .btn { width: 100%; }
  .cta-actions, .cta-actions .btn { width: 100%; }
  .offer .btn-light { width: 100%; }
}