/* The public page for co-founder matching. It borrows the marketing shell; these are its own parts. */
.matching-hero{position:relative;isolation:isolate;padding:clamp(90px,13vw,170px) 6% clamp(70px,9vw,120px);color:#fff3e1;overflow:hidden}
.matching-hero::before{content:'';position:absolute;inset:0;z-index:-2;background:url("../assets/welcome.4f85003a0451.png") 40% 50%/cover no-repeat}
.matching-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1d1710f0 0%,#1d1710c4 48%,#1d171070 100%)}
.matching-hero-inner{max-width:1320px;margin:0 auto}
.matching-eyebrow{display:inline-block;font-size:14px;color:#edc8a5;margin-bottom:24px}
.matching-hero h1{font-size:clamp(46px,6.4vw,96px);font-weight:500;line-height:1.04;letter-spacing:-.055em;max-width:16ch}
.matching-hero > .matching-hero-inner > p{margin-top:26px;max-width:58ch;font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:#e0cfb6}
.matching-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:38px}
.matching-signin{font-size:15px;color:#f0d6b5;border-bottom:1px solid #f0d6b580;padding-bottom:3px}
.matching-signin:hover{border-color:#f0d6b5}
.matching-hero small{display:block;margin-top:26px;font-size:13px;color:#c3ad90}

/* The marketing body is dark; everything below the hero reads on paper, like the rest of the brand. */
.matching-steps,.matching-difference{background:#ede4d4;color:#3f3326}
.matching-steps{padding:clamp(60px,7vw,100px) 6% clamp(30px,4vw,50px)}
.matching-difference{padding:clamp(30px,4vw,50px) 6% clamp(60px,7vw,100px)}
/* One container per section, so the heading and what follows it line up at every width. */
.matching-inner{max-width:1320px;margin-inline:auto}
.matching-steps h2,.matching-difference h2{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1.1;color:#30271e}
.matching-steps ol{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.matching-steps li{padding:28px 28px 30px;background:#fdf6e9;border:1px solid #d9c9ac;border-radius:18px}
.matching-steps li > span{display:block;font-size:34px;font-weight:600;line-height:1;letter-spacing:-.04em;color:#d2b188;font-variant-numeric:tabular-nums}
.matching-steps h3{margin:12px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:#30271e}
.matching-steps p{margin:11px 0 0;font-size:15px;line-height:1.7;color:#776956}

.matching-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:start}
.matching-split > div > p{margin-top:20px;font-size:17px;line-height:1.75;color:#776956;max-width:46ch}
.matching-difference ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.matching-difference li{padding-left:22px;position:relative;font-size:16px;line-height:1.7;color:#6d5f4d}
.matching-difference li::before{content:'';position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;background:#a74f31}
.matching-difference strong{font-weight:600;color:#3f3326}

@media(max-width:900px){.matching-split{grid-template-columns:1fr}}
@media(max-width:700px){.matching-hero{padding-inline:24px}.matching-steps,.matching-difference{padding-inline:24px}.matching-actions{gap:18px}}

/* The wall: founders scattered about, with introductions that either hold or fade away. */
/* A bowed line may stray past the stage; the band keeps it off the page's scrollbar. */
.matching-wall{background:#1d1710;color:#f0ddc2;padding:clamp(60px,7vw,96px) 6%;overflow:hidden}
.wall-inner{max-width:1180px;margin:0 auto;text-align:center}
.wall-caption{margin:0 auto;max-width:46ch;font-size:clamp(19px,2vw,26px);line-height:1.5;letter-spacing:-.02em;color:#f6e7cf}
.wall-note{margin:28px auto 0;text-align:center;font-size:14px;color:#b49f84}
/* width first, then the height follows: aspect-ratio with a min-height can widen the box. */
.wall-stage{position:relative;width:100%;margin-top:26px;aspect-ratio:2.45/1;min-height:380px}
.wall-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wall-links path{fill:none;stroke-linecap:round}
.wall-stage ul{list-style:none;margin:0;padding:0}
/* Scattered, so no two of them sit on the same line. */
.wall-stage li:nth-child(1){--x:7%;--y:70%}
.wall-stage li:nth-child(2){--x:20%;--y:22%}
.wall-stage li:nth-child(3){--x:32%;--y:76%}
.wall-stage li:nth-child(4){--x:45%;--y:24%}
.wall-stage li:nth-child(5){--x:57%;--y:74%}
.wall-stage li:nth-child(6){--x:69%;--y:20%}
.wall-stage li:nth-child(7){--x:81%;--y:72%}
.wall-stage li:nth-child(8){--x:93%;--y:26%}
.wall-stage li{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.72;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.75,.3,1)}
.wall-stage li img{display:block;width:clamp(68px,6.6vw,96px);height:clamp(68px,6.6vw,96px);border-radius:50%;object-fit:cover;border:2px solid #4a3c2b;background:#2c2419;filter:saturate(.9) brightness(.88);transition:border-color .35s ease,box-shadow .35s ease,filter .35s ease}
.wall-stage li small{font-size:14.5px;color:#a7927a;white-space:nowrap;transition:color .35s ease}
.wall-stage li.is-trying{opacity:1;transform:translate(-50%,-50%) scale(1.03)}
.wall-stage li.is-trying img{border-color:#a0764f;box-shadow:0 0 0 3px #a74f3118}
.wall-stage li.is-matched{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
.wall-stage li.is-matched img{border-color:#e09a63;box-shadow:0 0 0 4px #c76a4130,0 12px 30px #00000055;filter:none}
.wall-stage li.is-matched small{color:#e9c49c}

/* A line being tried, then one that held, then one that did not. */
.wall-links path{stroke:#c76a41;stroke-width:1.6;opacity:0}
.wall-links path.is-trying{stroke:#9a7a5c;stroke-dasharray:5 6;opacity:.9;animation:try-draw .7s ease forwards,try-crawl 1.1s linear infinite}
.wall-links path.is-made{stroke:#e09a63;stroke-width:2;opacity:.95;stroke-dasharray:none;filter:drop-shadow(0 0 6px #c76a4166)}
.wall-links path.is-lost{opacity:0;transition:opacity .55s ease,stroke .55s ease;stroke:#7b5a3f}
.wall-links path.is-fading{opacity:.3;transition:opacity 1.2s ease}
@keyframes try-draw{from{stroke-dashoffset:var(--length)}to{stroke-dashoffset:0}}
@keyframes try-crawl{to{stroke-dashoffset:-11}}

/* Narrow screens get their own scatter, kept clear of the edges so no one is half cut off. */
@media(max-width:900px){
  .wall-stage{aspect-ratio:0.95/1;min-height:470px}
  .wall-stage li small{font-size:12px}
  .wall-stage li:nth-child(1){--x:21%;--y:13%}
  .wall-stage li:nth-child(2){--x:55%;--y:22%}
  .wall-stage li:nth-child(3){--x:84%;--y:11%}
  .wall-stage li:nth-child(4){--x:30%;--y:44%}
  .wall-stage li:nth-child(5){--x:69%;--y:50%}
  .wall-stage li:nth-child(6){--x:17%;--y:77%}
  .wall-stage li:nth-child(7){--x:51%;--y:86%}
  .wall-stage li:nth-child(8){--x:82%;--y:74%}
}
@media(max-width:700px){.matching-wall{padding-inline:20px}.wall-stage{aspect-ratio:1/1.35;min-height:470px}}

/* Sections arrive as you reach them. */
.will-rise{opacity:0;transform:translateY(16px)}
.has-risen{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.3,1)}
.matching-steps li{transition:transform .25s ease,box-shadow .25s ease}
.matching-steps li:hover{transform:translateY(-4px);box-shadow:0 16px 36px #3b2a1714}
@media(prefers-reduced-motion:reduce){.will-rise{opacity:1;transform:none}.wall-links path.is-trying{animation:none;stroke-dasharray:none}}
@media(max-width:700px){.wall-stage ul{gap:14px}.matching-wall{padding-inline:24px}}