/*
   The first screen: one screenful, whatever the screen is.

   It used to be three quarters of the viewport with the picture at its
   own size in a column that was not there at all on a phone. Now the
   section is as tall as the window (less the bar above it), the two
   halves sit in the middle of it, and the picture takes the room it is
   given - on a phone it goes above the words, where it is the first
   thing seen rather than the thing nobody scrolls to.
*/
.home-header{
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--ds-topbar-h, 64px));
    padding: 32px 0;
    background-position: top right;
    background-repeat: no-repeat;
}

/* Newer phones: the address bar sliding away is not a page that grows. */
@supports (height: 100svh) {
    .home-header { min-height: calc(100svh - var(--ds-topbar-h, 64px)); }
}

.home-hero-art { display: flex; justify-content: center; }
.home-hero-img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--ds-topbar-h, 64px) - 96px);
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .home-header { min-height: auto; padding: 16px 0 28px; }
    /* Room for the words under it, on the same screenful. */
    .home-hero-img { max-height: 38vh; }
}

/*
   An uploaded photograph is the first screen: it covers it, at any shape
   of window, and the words sit on it. A picture of people behind the
   headline is what a dating site opens with; the same picture in a box
   beside it is a thumbnail of one.
*/
.home-header.is-covered {
    background-image:
        linear-gradient(100deg, rgba(10, 13, 20, .82) 0%, rgba(10, 13, 20, .66) 45%, rgba(10, 13, 20, .3) 100%),
        var(--home-hero);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* The photograph does not scroll with the words on a desk. */
    background-attachment: scroll;
}

/* White on the photograph, including the headline, whose letters are
   normally the gradient itself and would be invisible over it. */
.home-header.is-covered h1,
.home-header.is-covered h1.text-gradient.bg-gradient-primary,
.home-header.is-covered h1.text-gradient.text-primary {
    background-image: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.home-header.is-covered p { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.home-header.is-covered .btn-outline-primary {
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}
.home-header.is-covered .btn-outline-primary:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/*
   The people on the landing page.

   They used to be the feed's suggestion cards - a cover photo with a face
   over it - and since almost nobody uploads a cover, the grid drew one
   stock background nine times. A card about a person is the person: the
   face, the name, where they are.
*/
.lp-people {
    display: grid;
    /* Three to a row: the operator features nine, and a row of five leaves
       four standing in the next one. */
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1040px;
    margin: 0 auto;
}

.lp-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 16px 22px;
    border-radius: var(--ds-radius-lg, 22px);
    background: var(--ds-surface, #fff);
    box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04), 0 2px 12px rgba(16, 24, 40, .05));
    color: var(--ds-ink, #101828);
    text-decoration: none;
    transition: transform .16s var(--ds-ease, ease), box-shadow .16s var(--ds-ease, ease);
}
.lp-person:hover,
.lp-person:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-md, 0 4px 8px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .10));
    color: var(--ds-ink, #101828);
    text-decoration: none;
}

/* The face, with the accent as a thin ring rather than a banner behind it. */
.lp-person-face {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--ds-accent, #e91e63), color-mix(in srgb, var(--ds-accent, #e91e63) 35%, #fff));
}
.lp-person-face { position: relative; }
.lp-person-face img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ds-surface-2, #fafbfc);
    display: block;
}
.lp-person-initial {
    position: absolute;
    inset: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ds-surface-2, #fafbfc);
    color: var(--ds-ink-muted, #667085);
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.lp-person-name {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    font-weight: 700;
    font-size: 15px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-person-tick { color: var(--ds-accent, #e91e63); display: inline-flex; font-size: 14px; }
.lp-person-at,
.lp-person-where {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--ds-ink-muted, #667085);
}
.lp-person-at { margin-top: 2px; }
.lp-person-where { margin-top: 6px; font-weight: 600; color: var(--ds-ink-soft, #475467); }


@media (max-width: 575.98px) {
    /* Two to a row on a phone: one to a row is a page of scrolling. */
    .lp-people { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .lp-person-name { font-size: 14px; }
    .lp-person { padding: 18px 10px 16px; }
    .lp-person-face { width: 76px; height: 76px; }
}

@media (max-width: 767.98px) {
    /* A phone reads the words over the middle of the picture, not its edge. */
    .home-header.is-covered {
        min-height: calc(100svh - var(--ds-topbar-h, 64px));
        padding: 28px 0 40px;
        background-image:
            linear-gradient(180deg, rgba(10, 13, 20, .72) 0%, rgba(10, 13, 20, .62) 60%, rgba(10, 13, 20, .78) 100%),
            var(--home-hero);
    }
}

.home-mid-img{
    max-width: 400px;
}

.coinbasae-logo{
    height:1.3rem
}

.suggestion-header-bg {
    height: 140px !important;
}

/* The sign-up prompt a visitor gets when they press somebody's card. */
.lp-join {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lp-join[hidden] { display: none; }
.lp-join-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 13, 20, .55);
    backdrop-filter: blur(2px);
}
body.lp-join-open { overflow: hidden; }
.lp-join-box {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 28px 24px 24px;
    border-radius: var(--ds-radius-lg, 22px);
    background: var(--ds-surface, #fff);
    box-shadow: var(--ds-shadow-md, 0 12px 32px rgba(16, 24, 40, .18));
    text-align: center;
}
.lp-join-x {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--ds-ink-muted, #667085);
    cursor: pointer;
}
.lp-join-title { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.lp-join-text { margin: 0 0 18px; font-size: 14px; color: var(--ds-ink-muted, #667085); }
.lp-join-cta { display: block; width: 100%; }
.lp-join-in { display: block; margin-top: 14px; font-size: 13px; color: var(--ds-ink-muted, #667085); }
.lp-join-in b { color: var(--ds-accent, #e91e63); }

/*
   What three people say about the site.

   They were three columns of a small picture over a heading over a wall
   of text, each as tall as its own words, so the row read as three
   unrelated things of three different lengths. One card each, the same
   height, the words first and the face under them - a testimonial, which
   is what the operator is actually writing there.
*/
.lp-says {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
}

.lp-say {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 30px 26px 24px;
    border-radius: var(--ds-radius-lg, 22px);
    background: var(--ds-surface, #fff);
    box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04), 0 2px 12px rgba(16, 24, 40, .05));
}

/* The quotation mark, big and quiet, in the corner it opens. */
.lp-say-quote {
    position: absolute;
    top: 6px;
    left: 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 64px;
    line-height: 1;
    color: var(--ds-accent, #e91e63);
    opacity: .18;
    pointer-events: none;
}

.lp-say-text {
    position: relative;
    margin: 0 0 20px;
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ds-ink-soft, #475467);
}

/* Who said it, under what they said, with a hairline between. */
.lp-say-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ds-border, rgba(16, 24, 40, .08));
}
.lp-say-face {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ds-surface-2, #fafbfc);
}
.lp-say-name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ds-ink, #101828);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .lp-says { grid-template-columns: 1fr; max-width: 560px; gap: 16px; }
    .lp-say { padding: 26px 22px 20px; }
}

.search-box-wrapper{

}

.user-search-box-item{

}

.user-search-box-item .avatar{
    width: 54px;
    height: 54px;
}

.search-back-button{
    width: 40px;
    height: 40px;
}

.mobile-search-filter .card{
    border-left:none!important;
    border-right:none!important;
    border-top:none!important;
    border-radius: 0px!important;
}