/* Homepage: a tree. One trunk grows down the middle as the page scrolls. Listing branches left, buying or renting branches right. */
.fx{--fx-gap:clamp(72px,8vw,112px);background:var(--paper);color:var(--ink);padding-top:clamp(20px,3vw,32px)}
.fx-title{margin:0 0 clamp(16px,2vw,24px);font-size:clamp(26px,2.8vw,36px);line-height:1.15;letter-spacing:-.03em}
.fx-faster{white-space:nowrap}
.fx-faster svg{display:inline-block;width:.72em;height:.72em;margin-left:.08em;vertical-align:-.02em;fill:none;stroke:var(--forest);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.fx-title.wait .fx-faster svg{opacity:0;transform:translate(-.5em,.5em)}

.fx-heads{position:sticky;top:var(--sb-head,46px);z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--fx-gap);padding:8px 0;background:var(--paper);font:700 clamp(17px,1.4vw,20px)/1.2 "Inter Tight",sans-serif;letter-spacing:-.015em;color:var(--muted)}
.fx-tree{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--fx-gap);padding-top:12px}
.fx-trunk{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line);border-radius:2px;overflow:hidden}
.fx-trunk i{display:block;width:100%;height:100%;background:var(--forest);transform-origin:top;transform:scaleY(1)}

/* Each home in the grid takes two rows, and the two sides start one row apart, so the branches alternate. */
.fx-item{position:relative;min-width:0;margin:0;padding-bottom:clamp(28px,3vw,44px)}
.fx-item.left{grid-column:1}
.fx-item.right{grid-column:2}
.fx-item:nth-of-type(1){grid-row:1/3}.fx-item:nth-of-type(2){grid-row:2/4}
.fx-item:nth-of-type(3){grid-row:3/5}.fx-item:nth-of-type(4){grid-row:4/6}
.fx-item:nth-of-type(5){grid-row:5/7}.fx-item:nth-of-type(6){grid-row:6/8}
.fx-item:nth-of-type(7){grid-row:7/9}.fx-item:nth-of-type(8){grid-row:8/10}
.fx-branch{position:absolute;top:36%;width:calc(var(--fx-gap) / 2);height:2px;background:var(--forest)}
.fx-item.left .fx-branch{right:calc(var(--fx-gap) / -2);transform-origin:right}
.fx-item.right .fx-branch{left:calc(var(--fx-gap) / -2);transform-origin:left}
.fx-branch::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--forest)}
.fx-item.left .fx-branch::after{right:-6px}
.fx-item.right .fx-branch::after{left:-6px}

.fx-who{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fx-screen{position:relative;width:100%;aspect-ratio:1680/1170;border-radius:16px;overflow:hidden;background:#E6ECE1}
.fx-screen video{display:block;width:100%;height:100%;object-fit:cover}
/* Drawings in the walkthrough's style: glass rooms on dark, lime for what matters. Big enough to read at a glance. */
.fx-art{background:#101a17;box-shadow:0 1px 0 rgba(16,26,23,.04),0 18px 40px -24px rgba(16,26,23,.45)}
.fx-art img{display:block;width:100%;height:100%;object-fit:cover}
.fx-item h3{margin:14px 0 4px;font:750 clamp(19px,1.6vw,22px)/1.2 "Inter Tight",sans-serif;letter-spacing:-.02em}
.fx-item p{margin:0;max-width:46ch;font-size:16px;line-height:1.45;color:var(--muted)}
.fx-end{grid-column:1;grid-row:9;align-self:start;display:flex;align-items:center;gap:20px;padding-bottom:clamp(48px,6vw,80px)}

/* With the script running: homes fade in as they arrive, and a branch draws when the trunk reaches it. */
.fx-live .fx-card{opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.fx-live .left .fx-card{transform:translateX(-18px)}
.fx-live .right .fx-card{transform:translateX(18px)}
.fx-live .fx-item.in .fx-card{opacity:1;transform:none}
.fx-live .fx-branch{transform:scaleX(0);transition:transform .4s ease}
.fx-live .fx-branch::after{transform:scale(0);transition:transform .3s ease}
.fx-live .fx-item.on .fx-branch{transform:none}
.fx-live .fx-item.on .fx-branch::after{transform:none}

@media (max-width:900px){
  /* No room for two sides: the trunk moves to the edge and every home says which side it belongs to. */
  .fx-heads{display:none}
  .fx-tree{display:block;padding:4px 0 0 24px}
  .fx-trunk{left:6px}
  .fx-item{padding-bottom:36px}
  .fx-item .fx-branch,.fx-item.left .fx-branch,.fx-item.right .fx-branch{left:-18px;right:auto;top:12px;width:18px;transform-origin:left}
  .fx-item .fx-branch::after,.fx-item.left .fx-branch::after,.fx-item.right .fx-branch::after{left:-6px;right:auto}
  .fx-who{position:static;display:block;width:auto;height:auto;overflow:visible;clip-path:none;margin-bottom:8px;font:700 15px/1.2 "Inter Tight",sans-serif;letter-spacing:-.01em;color:var(--muted)}
  .fx-live .left .fx-card,.fx-live .right .fx-card{transform:translateY(14px)}
  .fx-live .fx-item.in .fx-card{transform:none}
  .fx-end{padding-top:4px}
}
@media (prefers-reduced-motion:reduce){.fx-live .fx-card,.fx-live .fx-branch,.fx-live .fx-branch::after,.fx-faster svg{transition:none}}