/* Landlords page (/landlords) — leasing consultation landing page.
   Third service page alongside Buyers and Sellers: it loads buyers.css for the
   shared landing components (hero + form, section rhythm, three columns, proof
   quote, final call to action, sticky button) and adds only what is specific
   to leasing here. Everything is scoped with the ll- prefix. */

/* ---------- hero ---------- */
.by-hero h1 span { text-wrap: balance; }
.ll-hero .by-sub { color: var(--paper); font-weight: 600; }
.ll-support { margin-top: 1rem; max-width: 56ch; color: var(--muted-light); font-size: .97rem; line-height: 1.7; }
.ll-value { margin-top: 1rem; max-width: 46ch; color: var(--muted-light); font-size: .88rem; line-height: 1.6; }
.ll-benefits { list-style: none; margin-top: clamp(1.8rem, 3.4vw, 2.8rem); padding-top: 1.5rem; border-top: 1px solid var(--line-light); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.ll-benefits li { color: var(--muted-light); font-size: .86rem; line-height: 1.55; }
.ll-benefits b { display: block; margin-bottom: .55rem; font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }

/* the form: five timeline choices, so the last one spans the row */
.ll-chips .by-chip:last-child { grid-column: 1 / -1; }
.ll-form .by-submit { padding-left: .8rem; padding-right: .8rem; font-size: .7rem; letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 400px) { .ll-form .by-submit { white-space: normal; } }
.ll-form textarea { width: 100%; min-height: 4.4rem; resize: vertical; font-size: 1rem; }
@media (min-width: 961px) {
  /* the form is taller than the copy, so the copy stays in view beside it */
  .ll-hero .by-hero-copy { position: sticky; top: 96px; }
  .ll-form .form-grid { margin-top: 1rem; gap: .65rem .9rem; }
  .ll-form .field input, .ll-form .field select { min-height: 44px; }
  .ll-form fieldset, .ll-form .by-situation { margin-top: .85rem; }
  .ll-form .by-chip { min-height: 42px; }
  .ll-form .by-submit { margin-top: 1.1rem; }
  .ll-form .by-form-lede { margin-top: .45rem; font-size: .88rem; }
}

/* ---------- section 2: six-step process ---------- */
.ll-steps { list-style: none; margin-top: clamp(2.4rem, 5vw, 4rem); }
.ll-step { position: relative; display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 1rem clamp(1.6rem, 4.5vw, 4.5rem); padding: clamp(1.8rem, 3.6vw, 2.9rem) 0; border-top: 1px solid var(--ink); }
.ll-step:last-child { border-bottom: 1px solid var(--line); }
.ll-step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--volt); }
.ll-id .n { display: block; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.ll-id .k { display: block; margin-top: .6rem; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--muted); }
.ll-body { min-width: 0; }
.ll-body h3 { font-family: var(--sans); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(1.1rem, 1.9vw, 1.45rem); text-wrap: balance; }
.ll-body > p { margin-top: .9rem; max-width: 64ch; color: var(--muted); line-height: 1.7; }
.ll-body > p.ll-key { margin-top: 1.3rem; padding-left: 1rem; border-left: 3px solid var(--ink); color: var(--ink); font-family: var(--sans); font-stretch: 112%; font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.4; }
.ll-body > p.ll-jump { margin-top: 1.3rem; }

/* "what this covers" expander inside a step */
.ll-more { margin-top: 1.2rem; }
.ll-more summary { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ll-more summary::-webkit-details-marker { display: none; }
.ll-more summary::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--ink); font-size: .85rem; line-height: 1; }
.ll-more[open] summary::after { content: "\2212"; background: var(--ink); color: var(--paper); }
.ll-more summary:hover { color: var(--volt-deep); }
.ll-more summary:focus-visible, .ll-acc summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.ll-more ul { list-style: none; margin-top: .5rem; columns: 2; column-gap: clamp(1.6rem, 4vw, 3rem); max-width: 46rem; }
.ll-more li { position: relative; break-inside: avoid; padding: .42rem 0 .42rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.5; }
.ll-more li::before { content: ""; position: absolute; left: 0; top: 1.02em; width: 5px; height: 5px; background: var(--ink); }
.ll-more-note { margin-top: .3rem; color: var(--muted); font-size: .9rem; }

/* step 3: one real listing photo beside the five marketing pieces */
.ll-mk { margin-top: 1.7rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.ll-fig picture, .ll-fig img { display: block; width: 100%; }
.ll-fig img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ll-fig figcaption { margin-top: .7rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; color: var(--muted); }
.ll-fig figcaption a, .ll-cred a { color: var(--ink); border-bottom: 1px solid currentColor; }
.ll-fig figcaption a:hover, .ll-cred a:hover { color: var(--volt-deep); }
.ll-feats > div { padding: .95rem 0; border-top: 1px solid var(--line-strong); }
.ll-feats > div:first-child { padding-top: 0; border-top: 0; }
.ll-feats dt { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ll-feats dd { margin-top: .4rem; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* step 6: the scope statement is set apart so it cannot be missed */
.ll-scope { margin-top: 1.6rem; max-width: 46rem; padding: 1.2rem 1.4rem; background: var(--bone); border-left: 3px solid var(--ink); }
.ll-scope h4 { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ll-scope p { margin-top: .6rem; font-size: .96rem; line-height: 1.65; }
.ll-foot { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }

/* ---------- sections 3 and 4: heading beside an accordion ---------- */
.ll-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5.5vw, 5.5rem); align-items: start; }
.ll-split .by-h2 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); }
.ll-plain { margin-top: 1.2rem; max-width: 58ch; color: var(--ink); line-height: 1.7; }
.ll-split-cta { margin-top: 1.8rem; }
.ll-acc { border-top: 1px solid var(--ink); }
.ll-acc details { border-bottom: 1px solid var(--line-strong); }
.ll-acc summary { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 22px; align-items: center; gap: .8rem; min-height: 60px; padding: .9rem 0; cursor: pointer; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc .n { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; color: var(--cobalt); }
.ll-acc .t { font-family: var(--sans); font-stretch: 112%; font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em; line-height: 1.3; }
.ll-acc .x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--ink); font-family: var(--mono); font-size: .85rem; line-height: 1; }
.ll-acc .x::before { content: "+"; }
.ll-acc details[open] .x { background: var(--ink); color: var(--paper); }
.ll-acc details[open] .x::before { content: "\2212"; }
.ll-acc summary:hover .t { color: var(--volt-deep); }
.ll-acc .a { padding: 0 2.4rem 1.4rem 3.4rem; }
.ll-acc .a p { max-width: 60ch; color: var(--muted); line-height: 1.7; }
.ll-rules { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); padding: 1.4rem 1.5rem; background: var(--paper); }
.ll-rules h3 { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ll-rules ul { list-style: none; margin-top: .8rem; }
.ll-rules li { position: relative; padding: .5rem 0 .5rem 1.2rem; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.55; }
.ll-rules li:first-child { border-top: 0; }
.ll-rules li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; background: var(--ink); }
.ll-legal { margin-top: 1.4rem; max-width: 62ch; font-size: .86rem; line-height: 1.65; color: var(--muted); }

/* ---------- section 5: credibility, kept distinct from sales figures ---------- */
.ll-cred { margin-top: clamp(2.4rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-strong); }
.ll-cred > div { padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1rem, 2.4vw, 2rem) clamp(1.3rem, 2.6vw, 2rem) 0; }
.ll-cred > div + div { border-left: 1px solid var(--line-strong); padding-left: clamp(1rem, 2.4vw, 2rem); }
.ll-cred .v { font-family: var(--sans); font-stretch: 125%; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.7rem, 3.2vw, 2.6rem); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.ll-cred .v span { color: var(--volt); }
.ll-cred .l { margin-top: .8rem; max-width: 30ch; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.ll-proof blockquote { font-size: clamp(1rem, 1.3vw, 1.1rem); }
.ll-final-note { margin-top: 1.4rem; max-width: 52ch; font-size: .92rem; line-height: 1.6; color: var(--muted-light); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .ll-hero h1 { font-size: clamp(1.15rem, 5vw, 2.6rem); }   /* "Lease Your Property" stays on one line */
  .ll-support, .ll-benefits { display: none; }   /* phone: headline, short intro, button, then the form */
  .ll-value { text-align: center; max-width: none; }
  .ll-split { grid-template-columns: 1fr; gap: 2.2rem; }
  .ll-step { grid-template-columns: 1fr; gap: .9rem; }
  .ll-id .k { display: inline; margin: 0 0 0 .8rem; }
  .ll-id .n { display: inline; }
}
@media (max-width: 720px) {
  .ll-mk { grid-template-columns: 1fr; }
  .ll-more ul { columns: 1; }
  .ll-acc .a { padding: 0 0 1.3rem 0; }
  .ll-acc summary { grid-template-columns: 2rem minmax(0, 1fr) 22px; }
  .ll-cred { grid-template-columns: 1fr; border-bottom: 0; }
  .ll-cred > div, .ll-cred > div + div { padding: 1.3rem 0; border-left: 0; border-bottom: 1px solid var(--line-strong); }
  .ll-cred .l { max-width: none; }
  .ll-foot .btn, .ll-split-cta { width: 100%; justify-content: center; }
  .ll-proof { grid-template-columns: 1fr; }   /* the landlord quote is long; give it the full width */
}