/* Patterns the marketing pages need and the app does not. Everything here keeps formgivning.md's
   palette, measure and naming: colour only where it carries meaning, a change of surface in place of a
   border, and class names that say what the content is rather than how it looks.

   The app's ban on illustration is lifted for the site, which has to hold a stranger's attention
   rather than stay out of the way of someone working.

   Two places the site knowingly departs from the app's measure, both for the same reason the app's
   own rule gives — a line of text should not run the width of a monitor:

   - The container stops at 68rem rather than the app's 96rem, because these pages are prose read once
     by a stranger, not tables compared down the page by someone working.
   - The hero title is larger than any heading in the app. A landing page has one sentence that has to
     carry the whole visit, and the app has no equivalent of it. */

.container {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: 2rem;
}

/* ---------- Head and foot ---------- */

.site-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--linen) 85%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);

    > .container {
        display: flex;
        align-items: center;
        gap: var(--gap);
        padding-block: .85rem;
    }
}

.wordmark {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);

    &:hover { text-decoration: none; }
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-inline-start: auto;
    font-size: .95rem;

    a {
        color: var(--ink-soft);

        /* Bark marks where you are. It never carries state, so this is the one job it has here. */
        &[aria-current="page"] { color: var(--bark); font-weight: 600; }
    }
}

.site-foot {
    margin-top: 4rem;
    padding-block: 2.5rem 3rem;
    background: var(--birch);
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--ink-soft);

    > .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: var(--gap) 2rem;
    }

    h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }

    ul { margin: .75rem 0 0; padding: 0; list-style: none; }
    li + li { margin-top: .5rem; }

    .foot-note { grid-column: 1 / -1; color: var(--quiet); }
}

/* ---------- Sections ---------- */

.hero {
    padding-block: 4.5rem 3rem;

    h1 {
        max-width: 30ch;
        margin-block: .5rem .85rem;
        font-size: clamp(2.1rem, 5vw, 3.4rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .lead { max-width: 56ch; font-size: 1.15rem; color: var(--ink-soft); }

    .actions { margin-top: 1.75rem; }
}

.section {
    padding-block: 3rem;

    /* A change of surface instead of a rule, as the app does between its cards and its page. */
    &.on-paper { background: var(--paper); border-block: 1px solid var(--line); }
    &.on-birch { background: var(--birch); }
}

.section-head {
    max-width: 60ch;
    margin-bottom: 1.75rem;

    h2 {
        margin-block: .5rem .6rem;
        font-size: clamp(1.5rem, 2.6vw, 2rem);
        line-height: 1.2;
    }

    .lead { color: var(--ink-soft); font-size: 1.05rem; }
}

/* Prose that is read rather than scanned. */
.measure {
    max-width: 62ch;

    > * + * { margin-top: 1rem; }

    h3 { font-size: 1.15rem; margin-top: 1.75rem; }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* ---------- Cards and grids ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.5rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    h3 { font-size: 1.15rem; }

    p { color: var(--ink-soft); }

    /* Only a link that is the card's own last element gets pushed to the foot. A link inside the
       heading is the heading, and keeps the heading's size. */
    > a { margin-top: auto; font-size: .9rem; font-weight: 500; }
}

/* Claims set as a list, each with its own supporting sentence. */
.claim-list {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;

    dt {
        font-weight: 600;
        font-size: 1.05rem;
    }

    dd {
        margin: .35rem 0 0;
        max-width: 62ch;
        color: var(--ink-soft);
    }
}

/* Numbered steps down the page: how a bank row becomes a booked entry. */
.step-list {
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        counter-increment: step;
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 1rem;
        padding-bottom: 1.5rem;

        &::before {
            content: counter(step);
            display: grid;
            place-items: center;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            background: var(--bark-soft);
            color: var(--bark);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        &:last-child { padding-bottom: 0; }
    }

    h3 { font-size: 1.05rem; margin-top: .3rem; }
    p { margin-top: .35rem; color: var(--ink-soft); max-width: 58ch; }
}

/* ---------- Waitlist and private beta ---------- */

.signup {
    display: grid;
    gap: 1rem;
    max-width: 34rem;
    padding: 1.35rem 1.5rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    label { display: block; font-weight: 500; }

    input[type="text"], input[type="email"] {
        width: 100%;
        margin-top: .35rem;
        padding: .5rem .85rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-small);
        background: var(--paper);
        color: var(--ink);
        font: inherit;

        &::placeholder { color: var(--quiet); }
    }

    .hint { font-size: .9rem; color: var(--quiet); }
}

/* The two doors: follow along, or ask to use it before it is finished. */
.door-choice {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    border: none;

    legend { font-weight: 500; padding: 0; }

    label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: .75rem;
        padding: .6rem .85rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-small);
        font-weight: 400;
        cursor: pointer;

        transition: background .12s, border-color .12s;
        &:hover { background: var(--sand); }

        /* Bark marks the chosen one, the same job it does for a selected row in the app. */
        &:has(:checked) { background: var(--bark-soft); border-color: var(--bark); }

        strong { display: block; font-weight: 600; }
        small { color: var(--ink-soft); }
    }
}

/* Which features a visitor is waiting for. Doubles as what to build next. */
.interest-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .5rem .75rem;
    margin: 0;
    padding: 0;
    border: none;

    legend { font-weight: 500; padding: 0; margin-bottom: .5rem; }

    label { display: flex; gap: .5rem; font-weight: 400; }
}

@media (max-width: 48rem) {
    .container { padding-inline: 1rem; }

    .site-head > .container { flex-wrap: wrap; gap: .75rem 1rem; }
    .site-nav { margin-inline-start: 0; width: 100%; gap: 1rem; font-size: .9rem; }

    .hero { padding-block: 2.5rem 2rem; }
    .section { padding-block: 2.25rem; }
}