/* css/pages/lease-your-home.css : Lease out your home, the owners' page (AI search build, 2026-10-27). Page layout only;
   linked after site.css. A white page (html[data-tone="white"], site.css tokens) in the Lease page's type: the hero (H1,
   first lines, two next steps, the proof, his photo), the quick answers (site.css .answers), the rent opinion form, more
   questions with the Sources line, then the shared text-me ending. No motion of its own, so T0, no JS and the fail-safe
   all read the same. Every color is a token or a neutral (no bone, no warm tan, no gold). Dark mode follows the tokens. */

.page--owners em { font-style: italic; }

/* ------------------------------------------------------------------ hero: who you're working with */
.ly-hero { padding: calc(var(--header-h) + clamp(28px, 6vh, 72px)) 0 clamp(40px, 6vh, 72px); }
.ly-hero__grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 1000px) { .ly-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ly-hero__copy { display: grid; gap: clamp(20px, 2.6vw, 30px); justify-items: start; min-width: 0; }
.ly-hero h1 { font-weight: 300; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .96; letter-spacing: -.05em; color: var(--ink); max-width: 12em; text-wrap: balance; }
.ly-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.ly-hero .first-lines { margin: 0; max-width: 56ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.ly-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ly-hero__ctas .btn--primary { min-height: 50px; padding: 0 26px; }
.ly-hero__photo { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 120px); justify-self: end; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 60px 110px -70px rgba(17, 17, 19, .55); }
.ly-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 46%; }

/* the proof (the same four as the Lease page; static here, no count-up) */
.ly-proof { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 16px clamp(20px, 3vw, 40px); margin: 6px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--rule); }
.ly-proof li { display: grid; gap: 6px; align-content: start; }
.ly-proof b { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1; letter-spacing: -.04em; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ly-proof b.ly-proof__w { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
.ly-proof li > span { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); line-height: 1.4; }

/* ------------------------------------------------------------------ the Q&As (site.css .answers), one white run */
.answers { scroll-margin-top: var(--header-h); }
#owner-answers { padding-top: clamp(24px, 4vw, 56px); }

/* ------------------------------------------------------------------ the rent opinion form, on the light-grey plate */
.ly-form { padding-block: clamp(48px, 7vw, 96px); background: var(--paper-2); scroll-margin-top: var(--header-h); }
.ly-form__grid { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (min-width: 1000px) { .ly-form__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .ly-form__head { position: sticky; top: calc(var(--header-h) + 32px); } }
.ly-form__head { display: grid; gap: 16px; justify-items: start; align-content: start; }
.ly-form__h { font-weight: 300; font-size: clamp(2.25rem, 4.2vw, 4rem); line-height: .96; letter-spacing: -.05em; color: var(--ink); }
.ly-form__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.ly-form__lede { max-width: 36ch; font-size: var(--fs-body-guide); line-height: 1.55; color: var(--fg-2); }
.ly-form .form { max-width: 40rem; }
.ly-form .form .input, .ly-form .form .select { background: var(--paper); }
/* "optional" inside a legend reads as a note, like it does in a field label (site.css .field__label .opt), as on the
   Lease and luxury pages that share this form */
.ly-form .form legend .opt { margin-left: 6px; font-weight: 400; color: var(--fg-muted); }
.ly-form .form .fieldset legend { font-weight: 500; }

/* ------------------------------------------------------------------ the ending */
.textme { margin-top: clamp(40px, 7vh, 88px); }

/* ------------------------------------------------------------------ phones */
@media (max-width: 999px) {
  .ly-hero { padding-top: calc(var(--header-h) + 22px); }
  .ly-hero__photo { aspect-ratio: 4 / 3.4; max-height: 52svh; justify-self: stretch; }
  .ly-hero__photo img { object-position: 66% 40%; }
}
@media (max-width: 767px) {
  .ly-hero h1 { font-size: clamp(2.25rem, 10.4vw, 3.25rem); }
  .ly-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .ly-proof b { white-space: normal; }
}

/* a source line under one answer (luxury lease Q&A build, 2026-10-27) sits close to it */
.answers__list .sources { margin-top: var(--s-2); }

/* ------------------------------------------------------------------ print: the answers and the form's words, no chrome */
@media print {
  .ly-hero__photo, .ly-hero__ctas, .ly-form .form { display: none; }
  .ly-form { background: #FFFFFF; }
  .answers__list > li { break-inside: avoid; }
}