/* The home page (scope §5.1).
 *
 * The design template, translated. Everything here is scoped under .vs-landing,
 * because the template's class names — .hero, .section, .steps — are generic
 * enough to collide with Bootstrap or with a later page, and the home page is
 * the only thing that should ever be laid out this way.
 *
 * The layout is deliberately edge-to-edge rather than in a container: the
 * horizontal rhythm is a clamp against the viewport, so the page holds its
 * proportions from a phone to a wide monitor without a breakpoint doing the
 * work. Scope §3.2 — nothing below requires a large screen.
 */

.vs-landing {
    --edge: clamp(24px, 6.8vw, 110px);
}

.vs-landing .section {
    padding: clamp(64px, 10vw, 150px) var(--edge);
}

.vs-landing h2 {
    margin: 22px 0 0;
    font-size: clamp(36px, 5vw, 76px);
    line-height: 1.02;
    letter-spacing: -.04em;
}

/* ------------------------------------------------------------------- hero */

.vs-landing .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 840px);
    color: #fff;
}

.vs-landing .hero-image {
    position: absolute;
    inset: 0;
    background: url('../img/site/cattle-2000.jpg') center 52% / cover no-repeat;
}

.vs-landing .hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 35, 31, .88) 0%, rgba(10, 35, 31, .6) 37%, rgba(10, 35, 31, .1) 72%),
        linear-gradient(0deg, rgba(8, 25, 22, .55), transparent 44%);
}

.vs-landing .hero-content {
    position: relative;
    z-index: 2;
    width: min(760px, 80%);
    padding: clamp(60px, 10vh, 130px) var(--edge);
}

.vs-landing .hero h1 {
    margin: 25px 0 23px;
    font-size: clamp(50px, 7.5vw, 118px);
    line-height: .9;
    letter-spacing: -.055em;
    color: #fff;
}

.vs-landing .hero-copy {
    max-width: 610px;
    margin: 0;
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
}

.vs-landing .hero-actions {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.vs-landing .hero-note {
    margin: 28px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .68);
}

/* A cream button on the photograph: the primary teal has nowhere near enough
   contrast against a stormy sky. */
.vs-landing .btn-cream {
    --bs-btn-color: var(--vs-ink);
    --bs-btn-bg: var(--vs-cream);
    --bs-btn-border-color: var(--vs-cream);
    --bs-btn-hover-color: var(--vs-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

.vs-landing .link-light-underline {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    padding-bottom: 3px;
}

.vs-landing .link-light-underline:hover {
    border-bottom-color: #fff;
    color: #fff;
}

/* ------------------------------------------------------------ trust strip */

.vs-landing .trust-strip {
    background: var(--vs-cream);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30px var(--edge);
    border-bottom: 1px solid var(--vs-line);
}

.vs-landing .trust-strip > div {
    padding: 5px 28px;
    border-right: 1px solid var(--vs-line);
}

.vs-landing .trust-strip > div:first-child {
    padding-left: 0;
}

.vs-landing .trust-strip > div:last-child {
    border-right: 0;
}

.vs-landing .trust-strip strong,
.vs-landing .trust-strip span {
    display: block;
}

.vs-landing .trust-strip strong {
    font-family: var(--vs-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
}

.vs-landing .trust-strip span {
    margin-top: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--vs-muted);
}

/* ------------------------------------------------------- why it exists */

.vs-landing .intro {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 8vw;
}

.vs-landing .intro .lead-serif {
    margin: -9px 0 56px;
    font-family: var(--vs-serif);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 66px);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--vs-ink);
}

.vs-landing .body-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
}

.vs-landing .body-columns p {
    margin: 0;
    color: #4d5b58;
    line-height: 1.75;
    font-size: 15px;
}

.vs-landing .body-columns strong {
    color: var(--vs-ink);
}

/* ----------------------------------------------------------- what it does */

.vs-landing .process {
    background: var(--vs-forest);
    color: #fff;
}

.vs-landing .process h2 {
    color: #fff;
}

.vs-landing .process-heading {
    display: grid;
    grid-template-columns: 1.5fr .7fr;
    align-items: end;
    gap: 10vw;
}

.vs-landing .process-heading > p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.7;
}

.vs-landing .steps {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.vs-landing .step {
    padding: 30px 30px 24px 0;
    min-height: 250px;
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.vs-landing .step + .step {
    padding-left: 30px;
}

.vs-landing .step-number {
    font-size: 11px;
    color: var(--vs-sage);
    letter-spacing: .12em;
}

.vs-landing .step h3 {
    margin: 55px 0 15px;
    font-size: 25px;
    line-height: 1.15;
    color: #fff;
}

.vs-landing .step p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .62);
}

.vs-landing .featured-step {
    background: var(--vs);
    margin-top: -25px;
    padding-top: 55px;
    padding-right: 30px;
}

/* ------------------------------------------------- what it does not do */

.vs-landing .boundaries {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 10vw;
    align-items: start;
}

.vs-landing .boundaries-heading {
    position: sticky;
    top: 40px;
}

.vs-landing .boundaries-heading > p {
    margin-top: 24px;
    color: var(--vs-muted);
}

.vs-landing .boundary-list {
    border-top: 1px solid var(--vs-line);
}

.vs-landing .boundary-list article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 24px;
    padding: 30px 0;
    border-bottom: 1px solid var(--vs-line);
}

.vs-landing .boundary-list article > span {
    font-size: 11px;
    color: var(--vs);
    letter-spacing: .1em;
    padding-top: 6px;
}

.vs-landing .boundary-list h3 {
    margin: 0 0 10px;
    font-size: 25px;
    line-height: 1.2;
}

.vs-landing .boundary-list p {
    margin: 0;
    color: var(--vs-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ------------------------------------------- who it is for, and pricing */

.vs-landing .audience {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    background: linear-gradient(110deg, var(--vs-forest) 0 52%, #d9d2c2 52%);
    color: #fff;
}

.vs-landing .audience-card {
    padding: clamp(64px, 9vw, 130px) clamp(24px, 7vw, 110px);
}

.vs-landing .audience-card h2 {
    color: #fff;
}

.vs-landing .audience-card > p {
    max-width: 620px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.7;
}

.vs-landing .audience-card ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0;
    margin: 38px 0 0;
    font-size: 13px;
}

.vs-landing .check {
    width: 20px;
    height: 20px;
    margin-right: 7px;
    border: 1px solid var(--vs-sage);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--vs-sage);
    font-size: 11px;
}

.vs-landing .pricing-card {
    color: var(--vs-ink);
    padding: clamp(64px, 9vw, 130px) clamp(24px, 6vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vs-landing .pricing-card h2 {
    font-size: clamp(32px, 3.4vw, 54px);
}

.vs-landing .pricing-card p {
    max-width: 430px;
    line-height: 1.7;
    margin: 28px 0 0;
    color: #46524f;
}

/* -------------------------------------------------------------- start here */

.vs-landing .cta {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 9vw;
    align-items: end;
    background: var(--vs-cream);
}

.vs-landing .cta-action > p {
    margin: 0 0 25px;
    line-height: 1.6;
    color: var(--vs-muted);
}

.vs-landing .cta-action .btn {
    width: 100%;
}

.vs-landing .cta-action .btn + .btn {
    margin-top: 12px;
}

/* ------------------------------------------------------------ narrower */

@media (max-width: 991px) {
    .vs-landing .trust-strip {
        grid-template-columns: 1fr 1fr;
        gap: 20px 0;
    }

    .vs-landing .trust-strip > div:nth-child(2) {
        border-right: 0;
    }

    .vs-landing .intro,
    .vs-landing .boundaries,
    .vs-landing .process-heading,
    .vs-landing .cta {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .vs-landing .steps {
        grid-template-columns: 1fr 1fr;
    }

    .vs-landing .featured-step {
        margin-top: 0;
        padding-top: 30px;
    }

    .vs-landing .boundaries-heading {
        position: static;
    }

    .vs-landing .audience {
        grid-template-columns: 1fr;
        background: var(--vs-forest);
    }

    .vs-landing .pricing-card {
        background: #d9d2c2;
    }
}

@media (max-width: 620px) {
    .vs-landing .hero {
        min-height: 84svh;
    }

    .vs-landing .hero-image {
        background-image: url('../img/site/cattle-1000.jpg');
        background-position: 57% 50%;
    }

    .vs-landing .hero-shade {
        background:
            linear-gradient(90deg, rgba(10, 35, 31, .82), rgba(10, 35, 31, .35)),
            linear-gradient(0deg, rgba(8, 25, 22, .7), transparent 60%);
    }

    .vs-landing .hero-content {
        width: 100%;
        padding-bottom: 64px;
    }

    .vs-landing .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .vs-landing .hero-actions .link-light-underline {
        align-self: flex-start;
    }

    .vs-landing .trust-strip {
        grid-template-columns: 1fr;
    }

    .vs-landing .trust-strip > div,
    .vs-landing .trust-strip > div:first-child {
        padding: 5px 0 18px;
        border-right: 0;
        border-bottom: 1px solid var(--vs-line);
    }

    .vs-landing .trust-strip > div:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .vs-landing .body-columns,
    .vs-landing .steps {
        grid-template-columns: 1fr;
    }

    .vs-landing .body-columns {
        gap: 24px;
    }

    .vs-landing .step {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        min-height: 0;
        padding-right: 0;
    }

    .vs-landing .step + .step {
        padding-left: 0;
    }

    .vs-landing .step h3 {
        margin-top: 28px;
    }

    .vs-landing .audience-card ul {
        flex-direction: column;
        gap: 14px;
    }
}