/*
  Advisor landing page (/advisor).

  page.css sets html { font-size: 62.5% }, so 1rem = 10px. Sizes are measured
  off the "Wireframe - 1" (1440px) and "iPhone 16 & 17 Pro - 1" (402px)
  artboards; the site-wide Frutiger stack replaces the artboards' font.

  Each card is one frame drawn in two parts: the problem on white and the
  solution on the pink band. On desktop the pairs are flattened into a
  two-row grid so all four problems share row 1 and the band is one strip.
*/

.advisor-page {
    background: var(--WHITE);
    color: var(--BLACK);
    font-family: "Frutiger 45 Light", "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
}

.adv-hero {
    padding: 4.6rem 1.6rem 2.2rem;
    background: #0B0A2D;
    color: var(--WHITE);
    text-align: center;
}

.adv-hero-title {
    margin: 0;
    font-family: "Frutiger Bold", "Helvetica Neue", Arial, sans-serif;
    font-size: 3.2rem;
    line-height: 1.25;
}

.adv-cta {
    display: inline-block;
    min-width: 14.8rem;
    margin-top: 2.2rem;
    padding: 0.8rem 2.4rem 0.6rem;
    border: 1px solid var(--WHITE);
    border-radius: 0.8rem;
    color: var(--WHITE);
    font-size: 2rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.adv-cta:hover,
.adv-cta:focus {
    background: var(--WHITE);
    color: #0B0A2D;
    text-decoration: none;
}

.adv-struggles-heading {
    margin: 0;
    padding: 3.6rem 1.6rem 2.2rem;
    font-family: "Frutiger Bold", "Helvetica Neue", Arial, sans-serif;
    font-size: 2.4rem;
    text-align: center;
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 27.7rem));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    justify-content: center;
    column-gap: 5.2rem;
    padding: 0 1.6rem;
}

.adv-pair {
    display: contents;
}

.adv-image {
    display: block;
    width: 100%;
    height: auto;
}

.adv-problem {
    padding: 1.2rem 1.2rem 4rem;
    border: 1px solid #656565;
    border-bottom: 0;
}

.adv-problem-text {
    margin: 2.6rem 0 0;
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: center;
}

/* A stacking context, so the band's z-index: -1 stays above the page's
   white background. */
.adv-struggles {
    position: relative;
    z-index: 0;
}

/* Behind every card and stretched to the page edges, so it is one strip.
   Not a wide box-shadow: each column's shadow would cover the ones before. */
.adv-solution {
    position: relative;
    padding-bottom: 2.4rem;
}

.adv-solution::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    z-index: -1;
    background: #F72662;
}

.adv-solution-frame {
    padding: 6rem 1.2rem 1.4rem;
    border: 1px solid #656565;
    border-top: 0;
}

.adv-solution-title {
    margin: 1.6rem 0 0;
    color: var(--WHITE);
    font-family: "Frutiger Bold", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1.35;
    text-align: center;
}

.adv-bottom-cta {
    display: none;
}

@media (max-width: 991px) {
    .adv-hero {
        padding: 4.8rem 1.6rem 2.4rem;
    }

    .adv-hero-title {
        font-size: 2rem;
    }

    .adv-cta {
        min-width: 12rem;
        margin-top: 2rem;
        padding: 0.7rem 2rem 0.5rem;
        font-size: 1.4rem;
    }

    .adv-struggles-heading {
        padding: 3.6rem 1.6rem 2.8rem;
        font-size: 1.6rem;
    }

    .adv-grid {
        display: block;
    }

    .adv-pair {
        display: block;
        width: 27.7rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .adv-pair + .adv-pair {
        margin-top: 3.7rem;
    }

    .adv-solution {
        padding-bottom: 3rem;
    }

    .adv-bottom-cta {
        display: block;
        padding: 1.6rem 1.6rem 2.4rem;
        background: #0B0A2D;
        text-align: center;
    }
}