.page-header{position:relative;overflow:hidden;padding-block:var(--space-xl) var(--space-lg);background:var(--color-paper)}.page-header__bubble{--bub: var(--color-dot-rose);width:150px;height:150px;top:-36px;left:8%;right:auto;animation-duration:11s}.page-header__bubble--b{--bub: var(--color-dot-sky);width:96px;height:96px;inset:auto 6% 12% auto;animation-duration:14s;animation-delay:-6s}@media(max-width:760px){.page-header__bubble{width:100px;height:100px;top:-24px;left:4%}.page-header__bubble--b{width:60px;height:60px;bottom:6%;right:4%}}.page-header__dot{position:absolute;z-index:0;border-radius:50%;pointer-events:none}.page-header__dot--1{width:12px;height:12px;top:70%;left:55%;background:var(--color-dot-rose)}.page-header__dot--2{width:9px;height:9px;top:20%;left:90%;background:var(--color-dot-sky)}.page-header__dot--3{width:7px;height:7px;top:46%;left:78%;background:var(--color-dot-rose)}.page-header .container{position:relative;z-index:1}.page-header__title{margin-top:var(--space-2xs);font-size:var(--text-h1);max-width:16ch}.page-header__sub{margin-top:var(--space-sm);color:var(--color-ink-2);font-size:var(--text-lg);max-width:var(--measure-max)}.friends-intro__text{color:var(--color-ink-2);max-width:var(--measure-max)}.info-cards{margin-top:var(--space-xl);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md)}@media(min-width:700px){.info-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.info-card{padding:var(--space-lg);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}@media(hover:hover){.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}}.info-card__title{margin-top:var(--space-sm);font-size:var(--text-h3)}.info-card__text{margin-top:var(--space-2xs);color:var(--color-ink-2);font-size:var(--text-sm)}.join-friends__lead{margin-top:var(--space-md);max-width:var(--measure-max);color:var(--color-ink-2);font-size:var(--text-lg)}.step-list{position:relative;margin:var(--space-xl) 0 0;padding:0;list-style:none;max-width:560px}.step-list:before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--color-rule)}.step-list__row{position:relative;padding-left:var(--space-2xl);padding-bottom:var(--space-lg)}.step-list__row:last-child{padding-bottom:0}.step-list__num{position:absolute;left:0;top:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--color-accent-ink);background:var(--color-accent);box-shadow:0 0 0 4px var(--color-paper-2)}.step-list__text{padding-top:var(--space-3xs);color:var(--color-ink)}.step-list__link{font-weight:600;color:var(--color-accent);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size .25s var(--ease-out)}@media(hover:hover){.step-list__link:hover{background-size:100% 1px}}.js .step-list.reveal{opacity:1;transform:none;filter:none}.js .step-list.reveal:before{transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease-out) .1s}.js .step-list.reveal.is-visible:before{transform:scaleY(1)}.js .step-list.reveal .step-list__row{opacity:0;transform:translate(-18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}.js .step-list.reveal.is-visible .step-list__row{opacity:1;transform:translate(0)}.js .step-list.reveal.is-visible .step-list__row:nth-child(1){transition-delay:.2s}.js .step-list.reveal.is-visible .step-list__row:nth-child(2){transition-delay:.4s}.js .step-list.reveal.is-visible .step-list__row:nth-child(3){transition-delay:.6s}.js .step-list.reveal .step-list__num{transform:scale(0)}.js .step-list.reveal.is-visible .step-list__num{animation:step-num-pop .5s var(--ease-out) forwards,step-num-ring .8s var(--ease-out) forwards}.js .step-list.reveal.is-visible .step-list__row:nth-child(1) .step-list__num{animation-delay:.3s,.42s}.js .step-list.reveal.is-visible .step-list__row:nth-child(2) .step-list__num{animation-delay:.5s,.62s}.js .step-list.reveal.is-visible .step-list__row:nth-child(3) .step-list__num{animation-delay:.7s,.82s}@keyframes step-num-pop{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes step-num-ring{0%{box-shadow:0 0 color-mix(in oklch,var(--color-accent) 35%,transparent)}to{box-shadow:0 0 0 12px transparent}}@media(max-width:760px){.page-header__dot--3{top:88%;left:68%}}
