:root {
  --bg: #17132e; --bg2: #1e1940; --card: #231d4a; --card2: #2a2357; --line: #3a3270; --ink: #f4f2ff; --soft: #b9b3d9; --muted: #8f88b8;
  --yellow: #fbbf24; --yellow-ink: #1c1608; --green: #16a34a; --teal: #2dd4bf; --radius: 14px;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* nav */
.lnav { position: sticky; top: 0; z-index: 20; background: rgba(23,19,46,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.06); }
.lnav .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.lbrand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; text-decoration: none; white-space: nowrap; }
.lbrand .mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow); color: var(--yellow-ink); font-weight: 900; font-size: 1.2rem; }
.lbrand .mark-img { width: 40px; height: 40px; border-radius: 10px; display: block; flex-shrink: 0; }
.lbrand small { display: block; font-weight: 600; font-size: .72rem; color: var(--muted); letter-spacing: .02em; margin-top: -3px; }
.llinks { display: flex; gap: 26px; margin-left: auto; }
.llinks a { text-decoration: none; color: var(--soft); font-weight: 600; font-size: .95rem; }
.llinks a:hover { color: var(--ink); }
.lcta { display: flex; gap: 10px; }
.lbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font: 700 .97rem var(--sans);
        text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; white-space: nowrap; transition: transform .12s, background .12s; }
.lbtn:hover { background: rgba(255,255,255,.06); }
.lbtn.yellow { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.lbtn.yellow:hover { background: #fcd34d; }
.lbtn.big { padding: 15px 26px; font-size: 1.04rem; }
.lbtn.block { width: 100%; }
.menu-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.6rem; cursor: pointer; margin-left: auto; }

/* hero */
.hero { padding: 72px 0 56px; background: radial-gradient(900px 420px at 85% 0%, rgba(251,191,36,.10), transparent 60%), radial-gradient(700px 400px at 0% 30%, rgba(45,212,191,.08), transparent 60%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--yellow); background: rgba(251,191,36,.1);
           border: 1px solid rgba(251,191,36,.3); padding: 5px 12px; border-radius: 999px; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.12; margin: 18px 0 18px; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero p.lead { font-size: 1.15rem; color: var(--soft); max-width: 560px; margin: 0 0 28px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .fine { margin-top: 14px; font-size: .88rem; color: var(--muted); }
.hero-vis { position: relative; min-height: 460px; }
.bldg { position: absolute; width: 64%; max-width: 360px; left: -2%; top: -4px; overflow: visible; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.mock { position: relative; margin: 196px 0 0 36%; background: #f6f7fb; color: #1a2433; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
        overflow: hidden; border: 1px solid rgba(255,255,255,.1); transform: rotate(-1deg); animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-8px); } }
.mock-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e3e7ec; font-size: .8rem; font-weight: 700; color: #0f6e66; }
.mock-top i { width: 10px; height: 10px; border-radius: 50%; background: #e3e7ec; display: inline-block; }
.mock-top span { margin-left: 8px; }
.mock-body { padding: 16px; display: grid; gap: 12px; }
.mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mtile { background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; padding: 10px 12px; border-top: 3px solid #e3e7ec; }
.mtile.g { border-top-color: #17803d; } .mtile.r { border-top-color: #b42318; } .mtile.a { border-top-color: #e8a33a; }
.mtile b { display: block; font-size: 1.05rem; } .mtile small { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #66727f; font-weight: 700; }
.mlist { background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; padding: 6px 12px; font-size: .82rem; }
.mlist div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef0f3; gap: 8px; }
.mlist div:last-child { border-bottom: 0; }
.pill { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pill.g { background: #e5f5ea; color: #17803d; } .pill.a { background: #fff2dc; color: #a15c00; } .pill.r { background: #fde8e6; color: #b42318; }

/* strip */
.strip { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: var(--bg2); }
.strip { overflow: hidden; }
.ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; gap: 44px; padding: 16px 0; color: var(--soft); font-weight: 600; font-size: .92rem; white-space: nowrap; animation: ticker 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* sections */
section.s { padding: 88px 0; }
.s-head { max-width: 720px; margin: 0 0 44px; }
.s-head .kicker { color: var(--yellow); font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.s-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; margin: 8px 0 12px; letter-spacing: -.01em; }
.s-head p { color: var(--soft); font-size: 1.07rem; margin: 0; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.feat .ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 1.3rem; background: var(--card2); margin-bottom: 14px; }
.feat h3 { margin: 0 0 6px; font-size: 1.08rem; }
.feat p { margin: 0; color: var(--soft); font-size: .95rem; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: st; }
.step { position: relative; padding: 26px 22px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card), var(--bg2)); border: 1px solid var(--line); }
.step::before { counter-increment: st; content: counter(st); font: 800 1rem var(--mono); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
                background: var(--yellow); color: var(--yellow-ink); margin-bottom: 14px; }
.step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--soft); font-size: .94rem; }

/* pricing — modelled on the reference, sized to fit any width */
.pricing-intro { color: var(--soft); font-size: 1.08rem; max-width: 760px; margin: -24px 0 48px; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.plan { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 38px 28px 28px;
        display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0,0,0,.35); border-color: #5b52a8; }
.plan.trial { border-color: rgba(22,163,74,.55); }
.plan.best { border-color: var(--yellow); background: linear-gradient(180deg, #2b2356, var(--card) 55%); box-shadow: 0 0 0 1px rgba(251,191,36,.25), 0 18px 50px rgba(251,191,36,.08); }
.plan.best:hover { border-color: #fcd34d; box-shadow: 0 0 0 1px rgba(251,191,36,.4), 0 24px 60px rgba(251,191,36,.16); }
.plan .tag { position: absolute; top: -15px; left: 28px; font-weight: 800; font-size: .82rem; padding: 6px 12px; border-radius: 4px; letter-spacing: .01em; }
.plan .tag.green { background: var(--green); color: #fff; }
.plan .tag.yellow { background: var(--yellow); color: var(--yellow-ink); }
.plan h3 { margin: 0 0 14px; font-size: 1.06rem; font-weight: 600; color: var(--soft); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; margin-bottom: 12px; min-height: 3.1rem; }
.price .amt { font: 800 clamp(1.9rem, 2.55vw, 2.5rem)/1.1 var(--mono); letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price small { font: 700 .98rem var(--sans); color: var(--muted); }
.price.word .amt { font-size: clamp(1.75rem, 2.3vw, 2.25rem); letter-spacing: -.03em; }
.plan .sub { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0 0 24px; min-height: 2.9em; }
.plan ul { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.plan li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); font-size: .97rem; line-height: 1.45; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.plan.best li::before { border-color: var(--yellow); }
.plan li:first-child { padding-top: 4px; }
.plan li:first-child::before { top: 9px; }
.plan li:last-child { border-bottom: 0; }
.plan .lbtn { padding: 14px 16px; font-size: 1rem; border-radius: 6px; border-color: rgba(255,255,255,.3); transition: transform .2s, background .2s, border-color .2s; }
.plan .lbtn:hover { border-color: rgba(255,255,255,.6); }
.plan .lbtn.yellow { border-color: var(--yellow); }
.plan .lbtn.yellow:hover { transform: translateY(-1px); }
.price-note { color: var(--muted); font-size: .9rem; margin-top: 28px; max-width: 760px; }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--yellow); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--soft); margin: 10px 0 0; font-size: .96rem; }

/* contact */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.cinfo p { color: var(--soft); }
.cinfo .line { display: flex; gap: 12px; align-items: center; margin: 14px 0; font-weight: 600; }
.cinfo .line span { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); }
.lform { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lform .full { grid-column: 1 / -1; }
.lform label { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 6px; color: var(--soft); }
.lform input, .lform select, .lform textarea { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.lform input:focus, .lform select:focus, .lform textarea:focus { outline: 2px solid rgba(251,191,36,.45); border-color: var(--yellow); }
.lform .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--soft); }
.lform .check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.hp { position: absolute; left: -9999px; }
.lnote { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; }
.lnote.ok { background: rgba(22,163,74,.15); color: #86efac; border: 1px solid rgba(22,163,74,.4); }
.lnote.err { background: rgba(220,38,38,.12); color: #fca5a5; border: 1px solid rgba(220,38,38,.4); }

/* final cta & footer */
.final { text-align: center; padding: 72px 24px; background: radial-gradient(600px 260px at 50% 0%, rgba(251,191,36,.14), transparent 70%), var(--bg2); border-top: 1px solid rgba(255,255,255,.06); }
.final h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 12px; }
.final p { color: var(--soft); margin: 0 0 26px; }
.lfoot { border-top: 1px solid rgba(255,255,255,.06); padding: 30px 0; color: var(--muted); font-size: .9rem; }
.lfoot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.lfoot a { color: var(--soft); text-decoration: none; margin-left: 18px; }

/* sign-up */
.auth-page { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 48px 20px; }
.auth-card { width: 100%; max-width: 560px; }
.auth-card h1 { font-size: 1.9rem; margin: 0 0 6px; }
.auth-card .lead { color: var(--soft); margin: 0 0 22px; }
.plan-chip { display: inline-flex; gap: 8px; align-items: center; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .9rem; margin-bottom: 18px; }

@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; }
  .price .amt { font-size: clamp(2rem, 4.6vw, 2.6rem); }
  .price.word .amt { font-size: clamp(1.8rem, 4vw, 2.3rem); }
}
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
  .llinks, .lcta { display: none; }
  .menu-toggle { display: block; }
  .lnav.open .llinks, .lnav.open .lcta { display: flex; }
  .lnav.open .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 16px; }
  .lnav.open .llinks { flex-direction: column; gap: 14px; width: 100%; order: 3; margin: 8px 0 0; }
  .lnav.open .lcta { width: 100%; order: 4; }
  .lnav.open .lcta .lbtn { flex: 1; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  section.s { padding: 64px 0; }
  .hero { padding: 44px 0 40px; }
  .fgrid, .steps, .faq, .pgrid { grid-template-columns: 1fr; }
  .pgrid { gap: 34px; }
  .plan { padding: 34px 22px 24px; }
  .plan .tag { left: 22px; }
  .price .amt { font-size: 2.3rem; }
  .price.word .amt { font-size: 2.05rem; }
  .plan .sub { min-height: 0; margin-bottom: 18px; }
  .lform { grid-template-columns: 1fr; padding: 20px; }
  .mtiles { gap: 6px; }
  .mtile { padding: 8px 8px; }
  .mtile b { font-size: .92rem; }
  .mtile small { font-size: .58rem; }
  .mock { transform: none; }
  .lfoot .wrap { flex-direction: column; }
  .lfoot a { margin: 0 14px 0 0; }
}


/* ===================== property-renting animations ===================== */
/* building: windows light up as units get rented, then turn over */
.win { fill: #1b163a; stroke: #4a4190; stroke-width: 1; animation: light 11s var(--d) infinite; }
@keyframes light { 0%, 4% { fill: #1b163a; } 9%, 82% { fill: #fbbf24; filter: drop-shadow(0 0 6px rgba(251,191,36,.8)); } 90%, 100% { fill: #1b163a; } }
.door { transform-box: fill-box; transform-origin: left center; animation: door 11s ease-in-out infinite; }
@keyframes door { 0%, 58%, 76%, 100% { transform: perspective(200px) rotateY(0); } 63%, 71% { transform: perspective(200px) rotateY(-70deg); } }
.sign { transform-box: view-box; transform-origin: 38px 123px; animation: swing 3.2s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
.sign text { font: 800 11px var(--sans); letter-spacing: .06em; }
.s-rent text { fill: #b42318; }
.s-done text { fill: #fff; }
.s-rent { animation: rentA 11s infinite; } .s-done { animation: rentB 11s infinite; }
@keyframes rentA { 0%, 52% { opacity: 1; } 56%, 90% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes rentB { 0%, 52% { opacity: 0; } 56%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
.key { transform-box: fill-box; transform-origin: 30% 50%; animation: keyturn 4s ease-in-out infinite; }
@keyframes keyturn { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-6px) rotate(18deg); } }

/* live dashboard */
.occ { display: block; height: 4px; background: #eef0f3; border-radius: 4px; margin-top: 6px; overflow: hidden; }
.occ span { display: block; height: 100%; width: 92%; background: #17803d; border-radius: 4px; transform-origin: left; animation: grow 1.6s .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { transform: scaleX(0); } }
.pill { transition: background .4s, color .4s; }
.pill.done { background: #e5f5ea; color: #17803d; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 50% { transform: scale(1.25); } }
.toast { position: absolute; right: 12px; top: 46px; display: flex; gap: 8px; align-items: center; max-width: 82%; background: #1a2433; color: #fff; font-size: .78rem; font-weight: 600;
         padding: 9px 12px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .35s, transform .35s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast .t-ic { font-size: 1rem; }

/* scroll reveal */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--rd, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .plan.reveal.in:hover { transform: translateY(-6px); }

/* feature icons */
.feat { transition: transform .3s, border-color .3s, background .3s; }
.feat:hover { transform: translateY(-4px); border-color: #5b52a8; background: var(--card2); }
.feat .ic { transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.feat:hover .ic { transform: rotate(-10deg) scale(1.12); }

/* how it works: a house moves into its new home */
.journey { position: relative; height: 56px; margin: -10px 0 26px; }
.j-line { position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.j-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform-origin: left; transform: scaleX(0); }
.j-dot { position: absolute; top: 8px; left: calc(12.5% + var(--i) * 25%); transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
         background: var(--card); border: 2px solid var(--line); font-size: 1.05rem; transition: border-color .4s, background .4s, transform .4s; }
.j-house { position: absolute; top: -14px; left: 12.5%; transform: translateX(-50%); font-size: 1.5rem; z-index: 2; opacity: 0; }
.journey.in .j-fill { animation: jfill 3.2s .3s cubic-bezier(.45,.05,.3,1) forwards; }
.journey.in .j-house { animation: jhouse 3.2s .3s cubic-bezier(.45,.05,.3,1) forwards; }
.journey.in .j-dot { animation: jdot .5s calc(.3s + var(--i) * 1s) forwards; }
@keyframes jfill { to { transform: scaleX(1); } }
@keyframes jhouse { 0% { left: 12.5%; opacity: 1; } 30% { top: -20px; } 100% { left: 87.5%; opacity: 1; top: -14px; } }
@keyframes jdot { 60% { transform: translateX(-50%) scale(1.2); } 100% { transform: translateX(-50%) scale(1); border-color: var(--yellow); background: #3b3170; } }

/* final call to action: the door opens */
.final-door { width: 96px; margin: 0 auto 10px; }
.final-door svg { display: block; width: 100%; overflow: visible; }
.fd-door { transform-box: fill-box; transform-origin: left center; animation: fdoor 5s ease-in-out infinite; }
@keyframes fdoor { 0%, 30%, 100% { transform: perspective(160px) rotateY(0); } 45%, 80% { transform: perspective(160px) rotateY(-75deg); } }
.fd-win { fill: #fbbf24; animation: glow 5s ease-in-out infinite; }
@keyframes glow { 0%, 30%, 100% { fill: #4a4190; } 45%, 80% { fill: #fbbf24; } }
.final:hover .fd-door { animation-duration: 2s; }

/* page-load entrance for the hero */
.hero h1, .hero p.lead, .hero .ctas, .hero .fine, .eyebrow { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 { animation-delay: .08s; } .hero p.lead { animation-delay: .16s; } .hero .ctas { animation-delay: .24s; } .hero .fine { animation-delay: .32s; }
.hero-vis { animation: rise 1s .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 980px) {
  .hero-vis { min-height: 0; max-width: 560px; }
  .bldg { width: 52%; left: 0; }
  .mock { margin: 170px 0 0 30%; }
}
@media (max-width: 640px) {
  .bldg { width: 72%; }
  .mock { margin: 168px 0 0 0; animation: none; transform: none; }
  .toast { top: 40px; right: 8px; }
  .journey { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .win { fill: #fbbf24; } .s-done { opacity: 0; } .j-fill { transform: none; } .j-house { display: none; }
  .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; } .ticker-track span[aria-hidden] { display: none; }
  html { scroll-behavior: auto; }
}