/* Landlord Ledger — site styles */
:root{
  --green:#1D6A4F; --green-dk:#14503C; --soft:#E7F2ED; --ink:#212B36;
  --gray:#6B7280; --line:#D7DEDA; --amber:#8A5A00; --amber-bg:#FDF6E7;
  --red:#A02318; --bg:#FBFCFB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; font-size:17px;
  border-left:8px solid var(--green);
}
@media(max-width:640px){ body{border-left:none;border-top:8px solid var(--green)} }
a{color:var(--green)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.narrow{max-width:720px}

/* nav */
nav{display:flex;align-items:center;gap:22px;padding:18px 0;flex-wrap:wrap}
nav .brand{font-weight:bold;letter-spacing:.14em;color:var(--green);text-decoration:none;font-size:14px;display:flex;align-items:center;gap:10px}
nav .brandmark{height:32px;width:auto;display:block}
nav .links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
nav .links a{text-decoration:none;color:var(--ink);font-size:15px}
nav .links a.cta{color:#fff;background:var(--green);padding:8px 14px;border-radius:8px;font-weight:bold}

/* type */
h1{font-size:clamp(34px,5.4vw,54px);line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin-bottom:14px}
h3{font-size:20px;margin-bottom:8px}
.kicker{color:var(--green);font-weight:bold;letter-spacing:.12em;font-size:13px;text-transform:uppercase;margin-bottom:10px}
.sub{color:var(--gray);font-size:19px;margin-top:14px}
.muted{color:var(--gray)}
section{padding:56px 0}
section.tight{padding:34px 0}

/* buttons */
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  padding:14px 24px;border-radius:10px;font-weight:bold;font-size:17px}
.btn:hover{background:var(--green-dk)}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}
.price-note{font-size:14px;color:var(--gray)}

/* checks */
.checks{list-style:none;margin-top:18px}
.checks li{padding-left:30px;position:relative;margin-bottom:9px}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:bold}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:40px 0 56px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.shot{border-radius:10px;box-shadow:0 18px 44px rgba(20,50,40,.18);border:1px solid var(--line)}
.shot-tilt{transform:rotate(1.6deg)}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.card .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--soft);color:var(--green);font-weight:bold;margin-bottom:10px}
.card h3{font-size:17px}
.card p{font-size:15px;color:var(--gray);margin-top:4px}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:34px}
.feature.rev .txt{order:2}
@media(max-width:860px){.feature{grid-template-columns:1fr}.feature.rev .txt{order:0}}

/* bands */
.band{background:var(--green);color:#fff;border-radius:16px;padding:44px 40px}
.band h2{color:#fff}
.band .btn{background:#fff;color:var(--green)}
.band-soft{background:var(--soft);border-radius:16px;padding:40px}
.callout{background:var(--amber-bg);border:1px solid #E8D9B0;border-left:6px solid var(--amber);
  border-radius:10px;padding:18px 20px;margin:22px 0;font-size:16px}

/* price */
.price-old{color:var(--gray);text-decoration:line-through;font-size:26px;margin-right:10px}
.price-new{font-size:44px;font-weight:bold;color:var(--green)}
.band .price-old{color:rgba(255,255,255,.65)}
.band .price-new{color:#fff}

/* faq */
details{border-bottom:1px solid var(--line);padding:16px 0}
details summary{font-weight:bold;cursor:pointer;font-size:17px}
details p{margin-top:10px;color:var(--gray)}

/* article */
article{padding:30px 0 10px}
article h1{font-size:clamp(30px,4.6vw,42px);margin-bottom:10px}
article .meta{color:var(--gray);font-size:15px;margin-bottom:26px}
article h2{margin-top:36px}
article h3{margin-top:24px}
article p{margin:14px 0}
article ul,article ol{margin:14px 0 14px 24px}
article li{margin-bottom:8px}
.cta-box{background:var(--soft);border-radius:12px;padding:24px 26px;margin:34px 0}
.cta-box h3{margin-top:0}

/* ============ motion system ============ */
.sitehead{position:sticky;top:0;z-index:40;background:rgba(251,252,251,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .35s}
.sitehead.scrolled{box-shadow:0 2px 20px rgba(20,50,40,.10)}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:4px;background:var(--green);
  transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.scene{position:fixed;inset:0;z-index:-1;display:flex;justify-content:center;
  align-items:flex-start;pointer-events:none;overflow:hidden}
.scene img{width:min(1150px,94vw);height:auto;opacity:.5;will-change:transform}
@media(max-width:760px){.scene img{opacity:.32;width:170vw;max-width:none}}
[data-reveal]{opacity:0;transform:translateY(36px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);will-change:opacity,transform}
[data-reveal="left"]{transform:translateX(-52px)}
[data-reveal="right"]{transform:translateX(52px)}
[data-reveal="zoom"]{transform:scale(.94) translateY(18px)}
[data-reveal].in{opacity:1;transform:none}
.drift{will-change:transform}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .scene img,.drift{transform:none!important}
  html{scroll-behavior:auto}
}

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 44px;font-size:14px;color:var(--gray)}
footer .brand{color:var(--green);font-weight:bold;letter-spacing:.12em;font-size:13px}
footer a{color:var(--gray)}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;margin-top:8px;justify-content:space-between}