/* "Also for rental owners" section on / and /zh/, linking to the lease pages.
   Uses main.css tokens. The reveal only hides content after the inline script
   adds .ll-anim, so the section is always visible without JavaScript, and
   main.css already turns motion off for prefers-reduced-motion. */

.ll-band {
  position: relative;
  overflow: clip;
  color: var(--paper-ink);
  padding: clamp(60px, 8vw, 108px) 0;
  background:
    radial-gradient(760px 420px at 88% 12%, rgba(185, 138, 47, 0.2), transparent 62%),
    radial-gradient(620px 380px at 4% 100%, rgba(185, 138, 47, 0.1), transparent 60%),
    var(--ink);
}
.ll-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .ll-grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.ll-copy { min-width: 0; display: grid; gap: 20px; }

.ll-kicker {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-bright); border: 1px solid rgba(185, 138, 47, 0.45);
  border-radius: 999px; padding: 7px 14px 7px 12px; background: rgba(185, 138, 47, 0.08);
}
.ll-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-bright); box-shadow: 0 0 0 0 rgba(185, 138, 47, 0.6); animation: llPulse 2.4s ease-out infinite; }
@keyframes llPulse { 0% { box-shadow: 0 0 0 0 rgba(185, 138, 47, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(185, 138, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(185, 138, 47, 0); } }

.ll-band h2 { color: var(--paper-ink); font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; }
.ll-band h2 em { font-style: italic; color: var(--brass-bright); }
.ll-lead { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: rgba(247, 242, 233, 0.84); max-width: 54ch; }

.ll-steps { list-style: none; display: grid; gap: 10px; margin: 4px 0; }
@media (min-width: 620px) { .ll-steps { grid-template-columns: repeat(3, 1fr); } }
.ll-steps li {
  display: grid; gap: 4px; align-content: start;
  padding: 16px 16px 15px; border-radius: 14px;
  background: rgba(247, 242, 233, 0.05); border: 1px solid rgba(247, 242, 233, 0.12);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.ll-steps li:hover { transform: translateY(-3px); border-color: rgba(185, 138, 47, 0.6); background: rgba(185, 138, 47, 0.08); }
.ll-steps svg { width: 26px; height: 26px; color: var(--brass-bright); margin-bottom: 6px; }
.ll-steps b { font-size: 1.02rem; color: var(--paper-ink); }
.ll-steps span { font-size: 0.92rem; color: rgba(247, 242, 233, 0.72); line-height: 1.4; }

.ll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.ll-btn { padding: 16px 24px; font-size: 1.02rem; box-shadow: 0 10px 28px -10px rgba(185, 138, 47, 0.7); }
.ll-btn .ll-arrow { display: inline-block; margin-left: 6px; transition: transform 0.2s ease; }
.ll-btn:hover .ll-arrow { transform: translateX(4px); }
.ll-fee { font-size: 0.98rem; color: rgba(247, 242, 233, 0.78); }
.ll-fee b { color: var(--paper-ink); }

/* Visual: photo, rotated fee badge, review card */
.ll-visual { position: relative; margin: 0; min-width: 0; }
.ll-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7); border: 1px solid rgba(247, 242, 233, 0.12); }
.ll-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ll-visual:hover .ll-photo img { transform: scale(1.04); }
.ll-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px;
  background: rgba(21, 32, 28, 0.86); color: var(--paper-ink);
  border: 1px solid rgba(185, 138, 47, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
}
.ll-badge b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; color: var(--brass-bright); }
.ll-badge span { font-size: 0.84rem; font-weight: 600; color: rgba(247, 242, 233, 0.88); }
.ll-quote {
  position: relative; z-index: 2; margin: -54px 18px 0 auto; max-width: 340px;
  background: var(--paper); color: var(--ink); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.65);
}
.ll-quote .stars { color: var(--brass-bright); letter-spacing: 2px; font-size: 0.8rem; }
.ll-quote p { font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.4; margin: 4px 0 8px; }
.ll-quote cite { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 560px) {
  .ll-badge { top: 10px; left: 10px; padding: 10px 13px; }
  .ll-quote { margin: -36px 10px 0; max-width: none; }
}

/* Scroll reveal, armed only by the inline script */
.ll-anim .ll-in { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ll-anim .ll-visual.ll-in { transform: translateY(26px) scale(0.98); transition-delay: 0.12s; }
.ll-anim .ll-steps li { opacity: 0; transform: translateY(14px); }
.ll-anim.is-in .ll-in { opacity: 1; transform: none; }
.ll-anim.is-in .ll-steps li { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease, background 0.25s ease; }
.ll-anim.is-in .ll-steps li:nth-child(2) { transition-delay: 0.12s; }
.ll-anim.is-in .ll-steps li:nth-child(3) { transition-delay: 0.24s; }
.ll-anim.is-in .ll-steps li:hover { transform: translateY(-3px); transition-delay: 0s; }
.ll-anim .ll-photo img { transform: scale(1.1); }
.ll-anim.is-in .ll-photo img { transform: scale(1); }
.ll-anim.is-in .ll-visual:hover .ll-photo img { transform: scale(1.04); }

/* The FAQ after this band has an inline padding-top:0 (it normally follows a
   padded section); give it room back so it does not touch the dark band. */
.ll-band ~ #faq { padding-top: clamp(64px, 9vw, 110px) !important; }

/* Phones: step tiles become compact rows, icon on the left. */
@media (max-width: 619px) {
  .ll-steps li { grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; }
  .ll-steps svg { grid-row: 1 / 3; margin: 2px 0 0; }
}