/* Land a House — brand: pine #1E5B4F / amber #E8A13D (see extension repo brand/) */
:root{
  --pine:#1E5B4F; --pine-deep:#143E36; --pine-darkest:#0E2C27;
  --amber:#E8A13D; --amber-soft:#F0B45C;
  --cream:#F5F7F2; --card:#FFFFFF; --ink:#17251F; --muted:#5C6B63; --line:#E2E9E4;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:16px;
}
a{ color:var(--pine); }
.container{ max-width:1040px; margin:0 auto; padding:0 24px; }

/* header */
.site-header{ background:var(--pine-darkest); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; }
.site-header nav{ display:flex; gap:22px; align-items:center; }
.site-header nav a{ color:#B9D2C8; text-decoration:none; font-size:14px; font-weight:500; }
.site-header nav a:hover{ color:#fff; }
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.wordmark span{ color:#EAF4EF; font-weight:800; font-size:18px; letter-spacing:-0.02em; }

/* hero */
.hero{ background:linear-gradient(165deg,var(--pine-darkest) 0%,var(--pine-deep) 60%,var(--pine) 100%); color:#EAF4EF; padding:72px 0 88px; }
.hero .container{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; }
.hero h1{ font-size:clamp(20px,3vw,30px); font-weight:800; letter-spacing:-0.03em; margin:0; max-width:17ch; text-wrap:balance; line-height:1.15; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero p.lede{ font-size:18px; color:#B9D2C8; max-width:52ch; margin:0; }
.hero-logo{ width:min(600px,92%); height:auto; }
.cta{ display:inline-flex; align-items:center; gap:10px; background:var(--amber); color:#1B1508; font-weight:700;
      padding:14px 28px; border-radius:12px; text-decoration:none; font-size:16px; transition:background .15s; }
.cta:hover{ background:var(--amber-soft); }
.cta-note{ font-size:13px; color:#8FB3A6; }

/* sections */
section.block{ padding:72px 0; }
section.block.alt{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.block h2{ font-size:28px; letter-spacing:-0.02em; margin:0 0 8px; text-wrap:balance; }
.block .sub{ color:var(--muted); margin:0 0 36px; max-width:60ch; }
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.feature{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; }
.alt .feature{ background:var(--cream); }
.feature .glyph{ width:42px; height:42px; border-radius:11px; background:var(--pine); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feature h3{ margin:0 0 6px; font-size:16px; }
.feature p{ margin:0; font-size:14px; color:var(--muted); }

/* how it works */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; counter-reset:step; }
.step{ position:relative; padding:24px 24px 24px 24px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.step::before{ counter-increment:step; content:counter(step);
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px;
  background:var(--amber); color:#1B1508; font-weight:800; font-size:14px; margin-bottom:12px; }
.step h3{ margin:0 0 6px; font-size:16px; }
.step p{ margin:0; font-size:14px; color:var(--muted); }

/* mock card */
.mockwrap{ display:flex; justify-content:center; }
.mock{ width:min(360px,100%); background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px rgba(14,44,39,.18); overflow:hidden; }
.mock .photo{ height:150px; background:linear-gradient(135deg,#2E6E5E,#4E8F7B); display:flex; align-items:center; justify-content:center; }
.mock .body{ padding:18px; display:flex; flex-direction:column; gap:8px; }
.mock .addr{ font-weight:700; font-size:14px; }
.mock .price{ color:var(--pine); font-weight:800; font-size:18px; }
.badges{ display:flex; gap:6px; flex-wrap:wrap; }
.badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.badge.green{ background:#E2F1EA; color:#1E5B4F; }
.badge.amber{ background:#FBEED8; color:#8A5A14; }
.badge.red{ background:#FCE4E4; color:#A33; }
.mock .meta{ font-size:12px; color:var(--muted); }

/* footer */
footer{ background:var(--pine-darkest); color:#8FB3A6; padding:40px 0; font-size:13px; }
footer .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
footer a{ color:#B9D2C8; text-decoration:none; margin-left:18px; }
footer a:hover{ color:#fff; }

/* text pages (privacy / support) */
.page{ max-width:720px; margin:0 auto; padding:56px 24px 80px; }
.page h1{ font-size:32px; letter-spacing:-0.02em; }
.page h2{ font-size:20px; margin-top:36px; }
.page p, .page li{ color:#33413A; font-size:15px; }
.page .updated{ color:var(--muted); font-size:13px; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }


/* how-it-works step illustrations */
.step-art{ margin-bottom:12px; }

/* animated demo */
.demo-stage{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.demo-page{ width:300px; height:240px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; position:relative; text-align:left; box-shadow:0 14px 34px rgba(14,44,39,.10); }
.dph{ background:#E9EDE9; border-radius:5px; height:12px; }
.demo-panel{ position:absolute; right:10px; bottom:10px; width:170px; background:#fff; border-radius:12px;
  box-shadow:0 12px 30px rgba(14,44,39,.24); border:1px solid var(--line); overflow:hidden;
  animation: panelIn 9s infinite; }
.dp-head{ background:#1E5B4F; color:#fff; font-size:10px; font-weight:700; padding:6px 9px; display:flex; gap:6px; align-items:center; }
.dp-body{ padding:9px; display:flex; flex-direction:column; gap:6px; }
.dp-addr{ font-size:10px; font-weight:700; color:#1c2823; }
.dp-price{ font-size:12px; font-weight:800; color:var(--pine); }
.dp-stars{ display:flex; gap:2.5px; }
.dp-stars span{ flex:1; height:9px; border-radius:2.5px; background:#E8A13D; animation: starFill 9s infinite; }
.dp-stars span.off{ background:#EDF1ED; animation:none; }
.dp-stars span:nth-child(1){ animation-delay:0s } .dp-stars span:nth-child(2){ animation-delay:.12s }
.dp-stars span:nth-child(3){ animation-delay:.24s } .dp-stars span:nth-child(4){ animation-delay:.36s }
.dp-stars span:nth-child(5){ animation-delay:.48s } .dp-stars span:nth-child(6){ animation-delay:.6s }
.dp-stars span:nth-child(7){ animation-delay:.72s } .dp-stars span:nth-child(8){ animation-delay:.84s }
.dp-save{ position:relative; height:26px; border-radius:8px; overflow:hidden; font-size:11px; font-weight:700; }
.dp-save span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.dp-save .s1{ background:var(--pine); color:#fff; animation: saveA 9s infinite; }
.dp-save .s2{ background:#2E9E63; color:#fff; opacity:0; animation: saveB 9s infinite; }
.demo-arrow{ opacity:0; animation: arrowIn 9s infinite; }
.demo-dash{ width:270px; background:#F7F9F6; border:1px solid var(--line); border-radius:14px; padding:10px; text-align:left; box-shadow:0 14px 34px rgba(14,44,39,.10); }
.dd-top{ font-size:10px; font-weight:700; color:#5C6B63; display:flex; align-items:center; gap:6px; padding:2px 4px 8px; }
.dd-card{ display:flex; gap:9px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:11px; padding:8px; margin-top:8px; }
.ddc-thumb{ width:44px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.ddc-t{ font-size:10.5px; font-weight:700; color:#1c2823; }
.ddc-p{ font-size:11px; font-weight:800; color:var(--pine); }
.ddc-b{ font-size:8.5px; font-weight:700; background:#E2F1EA; color:#1E5B4F; border-radius:99px; padding:1.5px 6px; }
.dd-card.new{ opacity:0; transform:translateY(14px) scale(.94); animation: cardIn 9s infinite; }

@keyframes panelIn{ 0%{transform:translateY(24px); opacity:0} 6%,96%{transform:none; opacity:1} 100%{transform:translateY(24px); opacity:0} }
@keyframes starFill{ 0%,10%{transform:scaleX(0); transform-origin:left} 24%,96%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
@keyframes saveA{ 0%,38%{opacity:1} 44%,96%{opacity:0} 100%{opacity:1} }
@keyframes saveB{ 0%,38%{opacity:0} 44%,96%{opacity:1} 100%{opacity:0} }
@keyframes arrowIn{ 0%,46%{opacity:0} 54%,96%{opacity:1} 100%{opacity:0} }
@keyframes cardIn{ 0%,50%{opacity:0; transform:translateY(14px) scale(.94)} 60%,96%{opacity:1; transform:none} 100%{opacity:0} }

@media (prefers-reduced-motion: reduce){
  .demo-panel,.dp-stars span,.dp-save .s1,.dp-save .s2,.demo-arrow,.dd-card.new{ animation:none !important; }
  .dp-save .s1{ opacity:0 } .dp-save .s2{ opacity:1 } .demo-arrow{ opacity:1 } .dd-card.new{ opacity:1; transform:none }
}