/* The public site of Adam.
   A businesslike blue visual system with a phase-led product narrative. Builds
   on landing-base.css. */

/* A column of at least the screen height, so the footer sits at the bottom even
   when a page is short. The page content takes the room that is left and its
   last section stretches into it: on the account screens the hero blue runs
   down to the footer, and nothing shows below the footer. */
body.land {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
}

.land-page {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.land-page > :last-child {
    flex-grow: 1;
}

/* Navigation.
   The header carries the standard dark wordmark, so the bar itself is white.
   A navy bar would put a black logo on a dark blue surface and make
   the header compete with the hero below it instead of framing it. */
.land .site-nav {
    background: #fff;
    border-bottom: 1px solid var(--site-line);
}

/* Opaque, so the bar needs no backdrop blur: the blurred layer of the base
   stylesheet buys nothing behind a solid white surface. */
.land .site-nav.is-scrolled {
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 8px 26px rgba(16, 27, 40, 0.1);
}

.land .site-nav__links {
    gap: 24px;
}

.land .site-nav__links a {
    color: var(--site-ink);
    font-weight: 500;
}

.land .site-nav__links a:hover {
    color: var(--site-text-accent);
}

.land .land-nav__login {
    padding: 8px 15px;
    border: 1px solid #ccd7e2;
    border-radius: 6px;
    font-weight: 600;
}

/* The same red as the text of every other link on hover, border included. */
.land .land-nav__login:hover {
    border-color: var(--site-text-accent);
    color: var(--site-text-accent);
}

/* The menu button. Only below the width at which the six links stop fitting on
   one line beside the logo; above it the links stand in the bar. */
.land .site-nav__toggle {
    display: none;
}

@media (max-width: 1023px) {
    /* One row at every width: the base stylesheet wraps the links under the
       logo on a phone, which is what this replaces. */
    .land .site-nav--menu .site-nav__inner {
        flex-wrap: nowrap;
        height: 64px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .land .site-nav--menu .site-nav__toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border: 1px solid #ccd7e2;
        border-radius: 6px;
        background: #fff;
        color: var(--site-ink);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    /* Three bars drawn by one element and its two pseudo-elements; open, the
       middle one goes and the outer two cross. */
    .land .site-nav__toggle-bars,
    .land .site-nav__toggle-bars::before,
    .land .site-nav__toggle-bars::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .land .site-nav__toggle-bars {
        position: relative;
    }

    .land .site-nav__toggle-bars::before,
    .land .site-nav__toggle-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .land .site-nav__toggle-bars::before {
        top: -6px;
    }

    .land .site-nav__toggle-bars::after {
        top: 6px;
    }

    .land .site-nav--menu.is-menu-open .site-nav__toggle-bars {
        background: transparent;
    }

    .land .site-nav--menu.is-menu-open .site-nav__toggle-bars::before {
        transform: translateY(6px) rotate(45deg);
    }

    .land .site-nav--menu.is-menu-open .site-nav__toggle-bars::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    .land .site-nav--menu .site-nav__links {
        display: none;
    }

    /* Open, the links drop down under the bar at its full width: one per line,
       with the demo and the login as whole-width buttons at the end. The bar is
       sticky, so the panel hangs from it. */
    .land .site-nav--menu.is-menu-open .site-nav__links {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 28px 22px;
        border-bottom: 1px solid var(--site-line);
        background: #fff;
        box-shadow: 0 18px 30px rgba(16, 27, 40, 0.12);
        font-size: 16px;
    }

    /* A line between the links, not around the two buttons: those keep their
       own border, and with it the red of their hover. */
    .land .site-nav--menu.is-menu-open .site-nav__links a:not(.site-nav__cta):not(.land-nav__login) {
        padding: 14px 0;
        border-bottom: 1px solid var(--site-line);
    }

    .land .site-nav--menu.is-menu-open .site-nav__links .site-nav__cta,
    .land .site-nav--menu.is-menu-open .site-nav__links .land-nav__login {
        margin-top: 14px;
        padding: 12px 16px;
        text-align: center;
    }

    .land .site-nav--menu.is-menu-open .site-nav__links .land-nav__login {
        margin-top: 10px;
    }
}

/* Login page */
.land-login {
    padding: 78px 0 90px;
    background:
        radial-gradient(circle at 82% 12%, rgba(94, 128, 162, 0.2), transparent 36%),
        linear-gradient(132deg, var(--site-navy) 0%, #142235 100%);
    color: #b9c6d4;
}

/* The kicker's default red is a text colour for light surfaces; dark sections
   use the light brand tint. */
.land-login .land-section-kicker,
.land-legal-head .land-section-kicker,
.land-about-hero .land-section-kicker,
.site-demo .land-section-kicker {
    color: var(--site-tint-on-dark);
}

.land-login__inner {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 62px;
    align-items: start;
}

.land-login__intro h1 {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(36px, 4.4vw, 48px);
    line-height: 1.1;
}

.land-login__lead {
    max-width: 560px;
    margin: 0 0 24px;
    font-size: 18px;
}

/* Text links on the dark band take the light tint; inside the white card they
   take the accent drawn for light surfaces. A link drawn as a button keeps the
   colour of the button. */
.land-login a:not(.site-btn) {
    color: var(--site-tint-on-dark);
}

.land-login__form a:not(.site-btn) {
    color: var(--site-text-accent);
}

.land-login__demo {
    margin: 0;
    color: #8fa0b0;
    font-size: 15px;
}

.land-login__form {
    padding: 30px;
}

.land-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 0 20px;
    font-size: 14px;
}

/* .site-form draws every label as a block with room below it and every input as
   a full-width field on a line of its own, so these two rules carry the weight
   to put the checkbox in front of its label. */
.land-login__options .land-login__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--site-body);
    font-weight: 500;
}

.land-login__options .land-login__remember input {
    flex: none;
    width: auto;
    margin: 0;
    padding: 0;
    accent-color: var(--site-fill);
}

.land-login__forgot {
    color: var(--site-text-accent);
    font-weight: 600;
}

/* Account screens around the login page: setting a password, recovering one and
   the two step verification. They share the login layout, so only the parts the
   login page does not have are defined here. */
.land-auth__steps {
    margin: 0 0 26px;
    padding-left: 20px;
}

.land-auth__steps li {
    padding: 6px 0 6px 6px;
    font-size: 16px;
}

/* The questions a user gets stuck on. They reuse the FAQ component, which is
   drawn for light surfaces at page width; here it sits on the dark band in the
   narrower intro column. */
.land-auth__help {
    max-width: 560px;
    margin: 0 0 26px;
    border-top-color: rgba(255, 255, 255, 0.14);
}

.land-auth__help .site-faq__item {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.land-auth__help .site-faq__item button {
    padding: 14px 0;
    color: #fff;
    font-size: 16px;
}

.land-auth__help .site-faq__item button:hover {
    color: var(--site-tint-on-dark);
}

.land-auth__help .site-faq__item button::after {
    width: 12px;
    height: 12px;
    color: var(--site-tint-on-dark);
}

.land-auth__help .site-faq__item button::before {
    right: 5px;
    height: 12px;
    margin-top: -6px;
    background: var(--site-tint-on-dark);
}

.land-auth__help .site-faq__body {
    font-size: 15px;
}

.land-auth__help .site-faq__item.is-open .site-faq__body {
    padding-bottom: 16px;
}

.land-auth__account {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding: 11px 12px;
    border-radius: 7px;
    background: var(--site-bg);
    font-size: 14px;
}

.land-auth__account span {
    color: #7b8b9b;
}

.land-auth__account strong {
    color: var(--site-ink);
}

/* A box whose value is a sentence rather than an address: the label goes on
   top, so neither side has to break into a narrow column. */
.land-auth__account--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Running text inside the white card. Without a colour of its own it would take
   the light text of the dark band around the card. */
.land-auth__text {
    margin: 0 0 20px;
    color: var(--site-body);
    font-size: 15px;
    line-height: 1.55;
}

.land-auth__text a {
    white-space: nowrap;
}

.land-auth__rules {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    color: #7b8b9b;
    font-size: 13px;
}

.land-auth__rules li {
    position: relative;
    padding: 3px 0 3px 16px;
}

.land-auth__rules li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #ccd7e2;
}

.land-auth__qr {
    margin: 0 0 16px;
    text-align: center;
}

.land-auth__qr img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid var(--site-line);
    border-radius: 10px;
}

.land-auth__qr figcaption {
    margin-top: 8px;
    color: #8a949e;
    font-size: 13px;
}

.land-auth__secret {
    margin: 0 0 20px;
    text-align: center;
    font-size: 13px;
}

.land-auth__secret span {
    display: block;
    margin-bottom: 6px;
    color: #7b8b9b;
}

.land-auth__secret code {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 6px;
    background: var(--site-bg);
    color: var(--site-ink);
    font-size: 15px;
    letter-spacing: 0.06em;
}

.land-auth__code {
    text-align: center;
    font-size: 22px;
    letter-spacing: 0.35em;
}

.land-auth__result {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--site-line);
    background: var(--site-bg);
    color: var(--site-body);
    font-size: 14px;
}

/* Equal pricing tiers with a clear rhythm between audience, price and note. */
.land .site-price__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.land .site-tier {
    display: flex;
    flex-direction: column;
    padding: 32px;
}

.land .site-tier h3 {
    margin: 0 0 10px;
}

.land .site-tier .site-tier__who {
    margin: 0 0 24px;
    line-height: 1.5;
}

.land .site-tier .site-tier__amount {
    margin: 0 0 22px;
    color: var(--site-ink);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.land .site-tier .site-tier__amount span {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.35;
}

.land .site-tier .site-tier__note {
    margin: 0;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--site-line);
    line-height: 1.55;
}

.land-tier__features {
    margin-top: 24px;
}

.land-tier__features h4 {
    margin: 0 0 18px;
    color: var(--site-ink);
    font-size: 14px;
    letter-spacing: 0;
}

.land-tier__features--accent h4 {
    color: var(--site-text-accent);
}

.land-tier__features ul {
    display: grid;
    gap: 19px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.land-tier__features li {
    position: relative;
    padding-left: 31px;
}

.land-tier__features li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f8e8eb;
}

.land-tier__features li::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 6px;
    width: 8px;
    height: 4px;
    border-bottom: 2px solid var(--site-text-accent);
    border-left: 2px solid var(--site-text-accent);
    transform: rotate(-45deg);
}

.land-tier__features strong,
.land-tier__features span {
    display: block;
}

.land-tier__features strong {
    color: var(--site-ink);
    font-size: 14px;
    line-height: 1.4;
}

.land-tier__features span {
    margin-top: 3px;
    color: #667789;
    font-size: 13px;
    line-height: 1.55;
}

.land-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 12%, rgba(94, 128, 162, 0.2), transparent 38%),
        linear-gradient(132deg, var(--site-navy) 0%, #142235 100%);
}

/* The mark in the corner of the hero, cut off by its edge. It sits far
   enough right to keep the eye clear of the column of content. The disc stays
   flat and even, exactly as in the logo; the eye is what moves.

   What stays in view is 340 by 294 of its 480 pixels. The gestures per page
   play inside that part: AdamMark.HERO_WINDOW in adam-mark.js is this
   rectangle in the units of the mark, and a test keeps the two together. */
.land-hero__mark {
    position: absolute;
    right: -140px;
    bottom: -186px;
    z-index: 0;
    width: 480px;
    height: 480px;
    line-height: 0;
}

/* The disc is solid, so the column of text has to stay in front of it at
   every width. */
.land-hero .site-hero__inner {
    position: relative;
    z-index: 1;
}

/* The promise under the heading of the home page, in the white of the heading. */
.land-hero__promise {
    color: #fff;
}

/* The same mark in the hero of every other page, each with the gesture that
   fits what the page is about (hero-mark.js). The hero clips it at its edge and
   keeps its own content in front, the form cards included. */
.land-marked {
    position: relative;
    overflow: hidden;
}

.land-marked > .site-wrap {
    position: relative;
    z-index: 1;
}

.land-hero__mark .adam-mark-ball,
.land-hero__mark .adam-mark-eye-lid,
.land-card__mark .adam-mark-ball,
.land-card__mark .adam-mark-eye-lid {
    fill: var(--site-fill);
}

.land-hero__mark .adam-mark-eye-shape,
.land-card__mark .adam-mark-eye-shape {
    fill: #fff;
}

/* The crumbs of a bite fly out of the disc, so the mark may draw outside its
   own box; the hero still clips it at its edge. */
.land-hero__mark .adam-mark {
    overflow: visible;
}

.land-hero__mark .adam-mark-crumb {
    fill: var(--site-fill);
}

/* The reading glasses of the legal pages, white all over: filled lenses under
   a white frame, so the eye and its lens read as one white shape. */
.land-hero__mark .adam-mark-prop--glasses {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.land-hero__mark .adam-mark-prop-lens {
    fill: #fff;
}

.land-hero__mark .adam-mark-prop-frame {
    stroke: #fff;
    stroke-width: 3;
}

/* The body of the keyhole, in the white of the eye that is its head. */
.land-hero__mark .adam-mark-prop--keyhole {
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
}

.land-hero__shot {
    position: relative;
    z-index: 1;
}

.land-hero__shot figcaption,
.land-shot figcaption {
    margin-top: 10px;
    color: #7c8d9e;
    font-size: 13px;
}

.land-hero__shot figcaption {
    color: #9dabb9;
}

.land-image-zoom {
    position: relative;
    display: block;
    border-radius: 11px;
    color: inherit;
    cursor: zoom-in;
    text-decoration: none;
}

.land-image-zoom__icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    background: rgba(16, 27, 40, 0.82);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms ease;
}

.land-image-zoom__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.land-image-zoom:hover .land-image-zoom__icon,
.land-image-zoom:focus-visible .land-image-zoom__icon {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.land-image-zoom:focus-visible {
    outline: 3px solid var(--site-fill);
    outline-offset: 4px;
}

.land-image-lightbox {
    width: min(96vw, 1800px);
    max-width: none;
    max-height: 96vh;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #101b28;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.land-image-lightbox[open] {
    animation: land-lightbox-in 180ms ease-out both;
}

.land-image-lightbox::backdrop {
    background: rgba(8, 15, 24, 0.86);
}

.land-image-lightbox[open]::backdrop {
    animation: land-lightbox-backdrop-in 180ms ease-out both;
}

.land-image-lightbox.is-closing {
    animation: land-lightbox-out 160ms ease-in both;
}

.land-image-lightbox.is-closing::backdrop {
    animation: land-lightbox-backdrop-out 160ms ease-in both;
}

@keyframes land-lightbox-in {
    from {
        opacity: 0;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes land-lightbox-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.99);
    }
}

@keyframes land-lightbox-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes land-lightbox-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.land-image-lightbox__panel {
    display: grid;
    max-height: 96vh;
    grid-template-rows: auto minmax(0, 1fr);
}

.land-image-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 16px;
    color: #fff;
}

.land-image-lightbox__bar p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.land-image-lightbox__bar button {
    padding: 7px 11px;
    border: 1px solid #6f8194;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.land-image-lightbox__bar button:hover {
    border-color: #fff;
}

.land-image-lightbox img,
.land-image-lightbox video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(96vh - 56px);
    object-fit: contain;
    background: #fff;
}

/* Image and film share the dialog; the one not in use carries `hidden`, which
   has to outweigh the display rule above. */
.land-image-lightbox [hidden] {
    display: none;
}

.land-audiences {
    padding: 76px 0;
    border-top: 1px solid var(--site-line);
    background: #f5f8fb;
}

.land-audiences__head {
    margin-bottom: 30px;
}

.land-audiences__head h2 {
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.2;
}

.land-audiences__head > p:last-child {
    margin: 0;
    color: #637486;
    font-size: 17px;
}

.land-audiences__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.land-audiences__grid article {
    padding: 30px;
    border: 1px solid #cfdae4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(16, 27, 40, 0.06);
}

.land-audiences__grid .land-audiences__organisation {
    border-color: rgba(205, 68, 90, 0.48);
}

.land-audiences__type {
    margin: 0 0 8px;
    color: var(--site-text-accent);
    font-size: 13px;
    font-weight: 600;
}

.land-audiences__grid h3 {
    margin: 0 0 17px;
    color: var(--site-ink);
    font-size: 22px;
    line-height: 1.3;
}

.land-audiences__link {
    display: inline-block;
    margin-top: 23px;
    color: var(--site-text-accent);
    font-weight: 700;
}

/* The base stylesheet leaves the space above the questions to a light page head.
   Here the page head is dark, so the questions bring their own. */
.land-faq {
    padding-top: 72px;
}

.land-faq__sections {
    display: grid;
    gap: 64px;
}

.land-faq__section {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    gap: 58px;
    align-items: start;
}

/* The padding matches the one above each question, so the group heading starts
   level with its first question. */
.land-faq__head {
    position: sticky;
    top: 101px;
    padding-top: 20px;
}

/* The kicker hangs above the heading: its negative top margin equals its own
   line plus the gap below it, so it takes no room in the alignment. */
.land-faq__head .land-section-kicker {
    margin-top: -30px;
    line-height: 20px;
}

.land-faq__head h2 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.2;
}

.land-faq__head > p:last-child {
    margin: 0;
    color: #667789;
    line-height: 1.65;
}

.land-section-kicker {
    margin: 0 0 10px;
    color: var(--site-text-accent);
    font-size: 13px;
    font-weight: 600;
}

/* The kickers of the base stylesheet arrive in capitals. This site keeps its
   hierarchy in size, weight and colour, so they are reset here on top of it. */
.land .site-kicker,
.land .site-pagehead__kicker {
    letter-spacing: 0;
    text-transform: none;
}

/* Section intros: the heading and the paragraph under it, above the cards or
   grid of a section. Every intro keeps one measure: the paragraph 62ch, about
   80 characters a line in Manrope and the measure of a page head's lead, the
   heading at most 760 pixels. What follows the intro keeps the full width. A
   heading with a narrower limit of its own keeps it. */
.land .site-roles h2,
.land .site-closing h2,
.land-audiences__head h2,
.land-practice__head h2 {
    max-width: 760px;
}

.land .site-sub,
.land .site-teaser p,
.land .site-closing p,
.land-process__intro p:last-child,
.land-audiences__head > p:last-child,
.land-quality__head > p:last-child,
.land-practice__head > p:last-child {
    max-width: 62ch;
}

/* The closing stands centred, so its narrowed lines centre with it. */
.land .site-closing h2,
.land .site-closing p {
    margin-right: auto;
    margin-left: auto;
}

.land-roles {
    padding-bottom: 68px;
}

/* A role point with a heading of its own above its line of text. */
.land-roles .site-role li strong {
    display: block;
    color: var(--site-ink);
}

.land-process__intro {
    padding: 68px 0 34px;
    border-top: 1px solid var(--site-line);
    background: var(--site-bg);
}

.land-process__intro h2 {
    max-width: 25ch;
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.16;
}

.land-process__intro p:last-child {
    margin: 0;
    font-size: 18px;
}

/* On a sub page the intro sits inside the column instead of around it. There
   it is a plain heading block above the numbered steps; the grey band of the
   home page would shrink to a box with the text against its edge. */
.land-process--page {
    padding: 68px 0 76px;
}

.land-process--page .land-process__intro {
    padding: 0 0 30px;
    border-top: 0;
    background: none;
}

.land-stepsbar {
    position: sticky;
    top: 74px;
    z-index: 40;
    border-top: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.land-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.land-steps li {
    position: relative;
    min-width: 0;
    padding: 17px 8px 15px 31px;
    color: #788898;
    transition: background 0.2s ease, color 0.2s ease;
}

.land-steps li::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: transparent;
}

.land-steps li > span {
    position: absolute;
    top: 18px;
    left: 7px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid #aebbc7;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.land-steps strong,
.land-steps em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.land-steps strong {
    color: var(--site-ink);
    font-size: 14px;
    line-height: 1.25;
}

.land-steps em {
    margin-top: 2px;
    font-size: 11px;
    font-style: normal;
    line-height: 1.3;
}

.land-steps li.is-active {
    background: #f8fafc;
    color: var(--site-text-accent);
}

.land-steps li.is-active::after {
    background: var(--site-fill);
}

.land-steps li.is-active > span {
    border-color: var(--site-fill);
    background: var(--site-fill);
    color: #fff;
}

.land-phase {
    padding: 78px 0;
    scroll-margin-top: 159px;
}

.land-phase--alt {
    border-top: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
    background: var(--site-bg);
}

.land-phase__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 60px;
    align-items: center;
}

/* Mirrored as a whole: the screenshot keeps the wide column on whichever side
   it stands, so all three steps show it at the same size. */
.land-phase__inner--flip {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}

.land-phase__inner--flip .land-phase__text {
    order: 2;
}

.land-phase__num {
    margin: 0 0 8px;
    color: var(--site-text-accent);
    font-size: 13px;
    font-weight: 600;
}

.land-phase h2 {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1.2;
}

.land-phase__text > p:not(.land-phase__num) {
    margin: 0 0 18px;
}

.land-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.land-list li {
    position: relative;
    padding: 5px 0 5px 25px;
}

.land-list li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--site-fill);
}

.land-shot {
    margin: 0;
}

.land-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--site-line);
    border-radius: 11px;
    box-shadow: 0 18px 44px rgba(16, 27, 40, 0.13);
}

.land-quality {
    padding: 78px 0;
    background: linear-gradient(135deg, var(--site-navy), #101b28);
    color: #b9c6d4;
}

.land-quality .land-section-kicker {
    color: var(--site-tint-on-dark);
}

.land-quality__head {
    margin-bottom: 32px;
}

.land-quality h2 {
    max-width: 690px;
    margin: 0 0 12px;
    color: #fff;
    font-size: 36px;
}

.land-quality__head > p:last-child {
    margin: 0;
}

.land-quality__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.land-quality__grid article {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.land-quality__grid h3 {
    margin: 0 0 9px;
    color: #fff;
    font-size: 17px;
}

.land-quality__grid p {
    margin: 0;
    font-size: 14px;
}

/* The promise of a card, between its heading and its text. */
.land-quality__grid .land-quality__lead {
    margin-bottom: 9px;
    color: #fff;
    font-weight: 600;
}

.land-quality__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px !important;
}

.land-quality__links a {
    color: var(--site-tint-on-dark);
}

.land .site-closing .site-btn--ghost {
    border-color: #aab8c5;
    color: var(--site-navy);
}

.land .site-closing .site-btn--ghost:hover {
    border-color: var(--site-navy);
    color: var(--site-ink);
}

.land .site-demo h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 38px;
    line-height: 1.15;
}

/* About page */
.land-about-hero {
    padding: 78px 0;
    background:
        radial-gradient(circle at 84% 15%, rgba(94, 128, 162, 0.22), transparent 35%),
        linear-gradient(132deg, var(--site-navy) 0%, #142235 100%);
    color: #b9c6d4;
}

.land-about-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.75fr);
    gap: 80px;
    align-items: center;
}

.land-about-hero h1 {
    max-width: 16ch;
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
}

.land-about-hero__lead {
    max-width: 65ch;
    margin: 0;
    font-size: 19px;
}

.land-about-hero__statement {
    padding: 29px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
}

.land-about-hero__statement strong {
    color: #fff;
    font-size: 18px;
}

.land-about-hero__statement p {
    margin: 10px 0 0;
}

.land-team {
    padding: 82px 0 88px;
}

.land-team__head {
    max-width: 760px;
    margin-bottom: 38px;
}

.land-team__head h2,
.land-about-method h2,
.land-about-contact h2 {
    margin: 0 0 14px;
    font-size: 38px;
    line-height: 1.15;
}

.land-team__head > p:last-child {
    margin: 0;
}

.land-team__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.land-person {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--site-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(24, 43, 62, 0.08);
}

.land-person > img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    object-position: center top;
    background: var(--site-bg);
}

.land-person__content {
    padding: 30px 28px;
}

.land-person__role {
    margin: 0 0 7px;
    color: var(--site-text-accent);
    font-size: 13px;
    font-weight: 600;
}

.land-person h2 {
    margin: 0 0 12px;
    font-size: 26px;
}

.land-person__content > p:not(.land-person__role) {
    margin: 0;
    font-size: 15px;
}

.land-person__links {
    display: flex;
    gap: 18px;
    margin-top: 20px;
}

.land-person__links a {
    font-size: 14px;
    font-weight: 700;
}

.land-about-method {
    padding: 82px 0;
    border-top: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
    background: var(--site-bg);
}

.land-about-method__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 74px;
}

.land-about-method__inner > div:first-child > p:last-child {
    margin-bottom: 0;
}

.land-numbered {
    border-top: 1px solid #ccd7e2;
}

.land-numbered article {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    padding: 23px 0;
    border-bottom: 1px solid #ccd7e2;
}

.land-numbered span {
    color: var(--site-text-accent);
    font-size: 13px;
    font-weight: 700;
}

.land-numbered h3 {
    margin: 0 0 5px;
    font-size: 18px;
}

.land-numbered p {
    margin: 0;
    font-size: 15px;
}

.land-about-contact {
    padding: 72px 0;
}

.land-about-contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 50px;
    align-items: center;
}

.land-about-contact__inner > div:first-child {
    max-width: 720px;
}

.land-about-contact__inner p:last-child {
    margin-bottom: 0;
}

.land-about-contact__actions {
    display: grid;
    gap: 11px;
    min-width: 285px;
    text-align: center;
}

.land-about-contact__actions .site-btn--ghost {
    border-color: #aab8c5;
    color: var(--site-navy);
}

.land-about-contact__actions > a:last-child {
    font-size: 14px;
    font-weight: 700;
}

/* Explainer film.
   The frame holds the opening still with the play control below the logo. The
   film opens in the dialog over the page. The veil is a link to the file, so it
   does something without script as well. */
.land-film {
    padding: 52px 0 8px;
}

.land-film__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(16, 27, 40, 0.16);
}

.land-film__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.land-film__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 7%;
    text-decoration: none;
    cursor: pointer;
}

.land-film__veil:focus-visible {
    outline: 3px solid var(--site-navy);
    outline-offset: -8px;
}

.land-film__veil:hover .land-film__play,
.land-film__veil:focus-visible .land-film__play {
    background-color: var(--site-fill);
}

.land-film__play {
    display: block;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--site-navy) no-repeat center/22px 26px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M2 2l18 11L2 24z' fill='%23ffffff'/%3E%3C/svg%3E");
    transition: background-color 120ms ease-out;
}

@media (max-width: 720px) {
    .land-film__play {
        width: 56px;
        height: 56px;
    }
}

/* Legal and policy pages */
.land-legal-head {
    padding: 66px 0 58px;
    background:
        radial-gradient(circle at 84% 10%, rgba(94, 128, 162, 0.2), transparent 34%),
        linear-gradient(132deg, var(--site-navy) 0%, #142235 100%);
    color: #b9c6d4;
}

.land-legal-head h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.08;
}

.land-legal-head p:not(.land-section-kicker) {
    max-width: 720px;
    margin: 0 0 17px;
    font-size: 18px;
}

.land-legal-head span {
    color: #8fa0b0;
    font-size: 13px;
}

.land-legal {
    padding: 72px 0 92px;
}

.land-legal__layout {
    display: grid;
    grid-template-columns: 225px minmax(0, 780px);
    gap: 78px;
    justify-content: center;
    align-items: start;
}

.land-legal__nav {
    position: sticky;
    top: 95px;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--site-line);
    border-radius: 9px;
    background: #fff;
}

.land-legal__nav p {
    margin: 0;
    padding: 14px 17px;
    background: var(--site-bg);
    color: var(--site-ink);
    font-size: 13px;
    font-weight: 600;
}

.land-legal__nav a {
    padding: 12px 17px;
    border-top: 1px solid var(--site-line);
    color: var(--site-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.land-legal__nav a:hover,
.land-legal__nav a.is-current {
    background: #f8fafc;
    color: var(--site-text-accent);
}

.land-legal__nav a.is-current {
    box-shadow: inset 3px 0 0 var(--site-fill);
}

.land-legal__content {
    min-width: 0;
}

.land-legal__content > p:first-of-type {
    margin-top: 0;
}

.land-legal__content h2 {
    margin: 42px 0 10px;
    padding-top: 4px;
    color: var(--site-ink);
    font-size: 24px;
    line-height: 1.25;
}

.land-legal__content h2:first-of-type {
    margin-top: 0;
}

.land-legal__content p,
.land-legal__content li {
    font-size: 15px;
    line-height: 1.75;
}

.land-legal__content p {
    margin: 0 0 16px;
}

.land-legal__content ul {
    display: grid;
    gap: 8px;
    margin: 0 0 19px;
    padding-left: 23px;
}

.land-legal__content a {
    font-weight: 650;
}

/* Full site footer.
   The footer's own dark is a shade over a lighter navy, and its content can
   sit higher than its top edge, which the footer clips: site.js lets the
   content slide into place and the shade deepen as the page reaches its end.
   At rest the shade covers the navy entirely, so without that script the
   footer looks as it always did. */
.land-foot {
    position: relative;
    overflow: hidden;
    padding: 62px 0 0;
    background: var(--site-navy);
}

.land-foot__shade {
    position: absolute;
    inset: 0;
    background: var(--site-ink);
}

.land-foot__inner {
    position: relative;
}

.land-foot__grid {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr 1fr 1fr;
    gap: 45px;
}

.land-foot h2 {
    margin: 0 0 17px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0;
}

.land-foot__company p {
    margin-top: 18px;
    color: #d7e0e8;
}

.land-foot address {
    color: #9aabba;
    font-style: normal;
    line-height: 1.75;
}

.land-foot__links {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.land-foot__links a,
.land-foot__badges a {
    color: #c6d2de;
    text-decoration: none;
}

.land-foot__links a:hover,
.land-foot__badges a:hover {
    color: #fff;
}

.land-foot__badges {
    display: flex;
    gap: 20px;
}

.land-foot__badges a {
    display: grid;
    gap: 7px;
    justify-items: center;
    font-size: 12px;
    text-align: center;
}

.land-foot__badges img {
    width: 60px;
    height: auto;
    filter: invert(1);
    opacity: 0.82;
}

.land-foot__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 45px;
    padding-top: 20px;
    padding-bottom: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
}

.land-foot__bottom p {
    margin: 0;
}

.land-foot__bottom button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #c6d2de;
    cursor: pointer;
    font: inherit;
}

.land-foot__bottom button:hover {
    color: #fff;
}

/* The cookie banner. The site loads no analytics. */
.land-cookie-space {
    height: 0;
    transition: height 220ms ease;
}

.land-cookie-space.is-visible {
    height: 88px;
}

.land-cookie-space[hidden] {
    display: none;
}

.land-cookie {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9000;
    border-top: 1px solid #d7e0e8;
    background: #fff;
    box-shadow: 0 -10px 30px rgba(16, 27, 40, 0.12);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 180ms ease, transform 220ms ease;
}

.land-cookie.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.land-cookie.is-closing {
    opacity: 0;
    transform: translateY(100%);
}

.land-cookie__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
}

.land-cookie[hidden] {
    display: none;
}

.land-cookie__copy p {
    display: inline;
    margin: 0;
    color: var(--site-body);
    font-size: 14px;
    line-height: 1.5;
}

.land-cookie__copy a {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.land-cookie__actions {
    display: flex;
    gap: 10px;
}

.land-cookie__actions .site-btn {
    min-width: 0;
    padding: 9px 15px;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
}

.land-cookie__actions .site-btn--ghost {
    border-color: #aab8c5;
    color: var(--site-navy);
}

.land-cookie__actions .site-btn--ghost:hover {
    border-color: var(--site-navy);
    background: var(--site-navy);
    color: #fff;
}

/* Practice articles.
   A card is the hero of its article in small: the same dark band, with the
   mark cut off at the same two edges. The mark is 192 pixels and keeps 136 by
   117.6 of them in view, the same share of the disc as in the hero. On a card
   it is the logo at rest and does not move; the gesture plays on the article. */
.land-practice {
    padding: 72px 0 80px;
}

.land-practice--teaser {
    border-top: 1px solid var(--site-line);
}

.land-practice--related {
    padding: 64px 0;
    border-top: 1px solid var(--site-line);
    background: var(--site-bg);
}

.land-practice__head {
    margin-bottom: 30px;
}

.land-practice__head h2 {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.2;
}

.land-practice__head > p:last-child {
    margin: 0;
    color: #637486;
    font-size: 17px;
}

.land-practice__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.land-practice__empty {
    margin: 0;
    color: #667789;
}

.land-card {
    display: flex;
}

.land-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid #cfdae4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(16, 27, 40, 0.06);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.land-card__link:hover,
.land-card__link:focus-visible {
    border-color: rgba(205, 68, 90, 0.48);
    box-shadow: 0 18px 40px rgba(16, 27, 40, 0.12);
    transform: translateY(-2px);
}

.land-card__link:focus-visible {
    outline: 3px solid var(--site-fill);
    outline-offset: 3px;
}

.land-card__band {
    position: relative;
    height: 118px;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 12%, rgba(94, 128, 162, 0.2), transparent 46%),
        linear-gradient(132deg, var(--site-navy) 0%, #142235 100%);
}

.land-card__label {
    position: absolute;
    bottom: 18px;
    left: 24px;
    z-index: 1;
    margin: 0;
    color: var(--site-tint-on-dark);
    font-size: 13px;
    font-weight: 600;
}

.land-card__mark {
    position: absolute;
    right: -56px;
    bottom: -74.4px;
    width: 192px;
    height: 192px;
    line-height: 0;
}

.land-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}

.land-card__title {
    margin: 0;
    color: var(--site-ink);
    font-size: 20px;
    line-height: 1.3;
}

.land-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.land-card__more {
    margin: auto 0 0;
    padding-top: 6px;
    color: var(--site-text-accent);
    font-size: 14px;
    font-weight: 700;
}

/* The head of an article has no lead under its title, so it is given the height
   the mark needs: lower than this and the top of a gesture is cut off. */
.land-article-head {
    display: flex;
    min-height: 300px;
    align-items: center;
}

.land-article-head > .site-wrap {
    width: 100%;
}

.land-article-head .site-pagehead__kicker a {
    color: inherit;
    text-decoration: none;
}

.land-article-head .site-pagehead__kicker a:hover {
    text-decoration: underline;
}

.land-article-head h1 {
    margin-bottom: 0;
}

.land-article-head__date {
    margin: 14px 0 0;
    color: #8fa0b0;
    font-size: 13px;
}

.land-article {
    padding: 56px 0 76px;
}

.land-article__inner {
    display: grid;
    gap: 34px;
    justify-items: start;
}

.land-article__draft {
    margin: 0;
}

/* The answer comes first and stands on its own: someone who reads only this
   has what the article says. */
.land-article__answer {
    max-width: 760px;
    padding: 24px 28px;
    border-left: 3px solid var(--site-fill);
    border-radius: 0 10px 10px 0;
    background: var(--site-bg);
}

.land-article__answer > p:last-child {
    margin: 0;
    color: var(--site-ink);
    font-size: 19px;
    line-height: 1.6;
}

.land-article__shot {
    width: 100%;
    max-width: 1000px;
}

.land-article__body {
    max-width: 760px;
}

.land-article__body h2 {
    margin: 44px 0 12px;
    font-size: 26px;
    line-height: 1.25;
}

.land-article__body h2:first-child {
    margin-top: 0;
}

.land-article__body p {
    margin: 0 0 16px;
}

.land-article__body .land-list {
    margin-bottom: 18px;
}

.land-article__body .land-list strong,
.land-phase__text .land-list strong {
    color: var(--site-ink);
}

.land-article__body .land-numbered {
    margin: 6px 0 20px;
}

@media (max-width: 1040px) {
    .land-quality__grid,
    .land-practice__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .land-team__grid,
    .land-foot__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .land-person {
        grid-template-columns: 180px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .land-cookie-space.is-visible {
        height: 150px;
    }

    .land-phase__inner,
    .land-audiences__grid,
    .land-faq__section,
    .land-about-hero__inner,
    .land-about-method__inner,
    .land-about-contact__inner,
    .land-cookie__inner,
    .land-legal__layout,
    .land-login__inner {
        grid-template-columns: 1fr;
    }

    .land-about-hero__inner,
    .land-about-method__inner,
    .land-login__inner {
        gap: 38px;
    }

    .land-cookie__inner {
        gap: 16px;
    }

    .land-legal__layout {
        gap: 34px;
    }

    .land-legal__nav {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .land-legal__nav p {
        grid-column: 1 / -1;
    }

    .land-phase__inner--flip .land-phase__text {
        order: 0;
    }

    .land-faq__head {
        position: static;
    }

    .land-steps em {
        display: none;
    }
}

@media (max-width: 720px) {
    .land-cookie-space.is-visible {
        height: 230px;
    }

    .land-process__intro h2,
    .land-quality h2 {
        font-size: 30px;
    }

    .land-stepsbar {
        position: static;
    }

    .land-steps {
        grid-template-columns: 1fr;
        padding: 8px 0;
    }

    .land-steps li {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 38px;
    }

    .land-steps li::after {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        width: 3px;
        height: auto;
    }

    .land-steps li > span {
        top: 9px;
        left: 12px;
    }

    .land-steps em {
        display: block;
    }

    .land-quality__grid,
    .land-practice__grid {
        grid-template-columns: 1fr;
    }

    .land .site-price__grid {
        grid-template-columns: 1fr;
    }

    .land-phase {
        padding: 58px 0;
    }

    .land-team__grid,
    .land-foot__grid {
        grid-template-columns: 1fr;
    }

    .land-person {
        grid-template-columns: 145px minmax(0, 1fr);
    }

    .land-person > img {
        min-height: 300px;
    }

    .land-cookie__actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .land-about-hero,
    .land-team,
    .land-about-method,
    .land-about-contact,
    .land-legal,
    .land-login {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .land-legal-head {
        padding-top: 54px;
        padding-bottom: 48px;
    }

    .land-about-hero h1 {
        font-size: 39px;
    }

    .land-team__head h2,
    .land-about-method h2,
    .land-about-contact h2 {
        font-size: 31px;
    }

    .land-person {
        grid-template-columns: 1fr;
    }

    .land-person > img {
        height: 320px;
        min-height: 0;
    }

    .land-foot__grid {
        gap: 34px;
    }

    .land-foot__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .land-cookie__inner {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .land-steps li,
    .land-card__link,
    .land-image-zoom__icon,
    .land-image-lightbox,
    .land-image-lightbox::backdrop,
    .land-cookie,
    .land-cookie-space {
        animation: none;
        transition: none;
    }
}

/* Messages and errors on the forms that really send. */
.site-form .land-form-message {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.45;
}

.land-form-message--success {
    background: #e7f4ec;
    color: #1d5c37;
}

.land-form-message--danger {
    background: #fbe9ec;
    color: #8f2436;
}

/* A step the user still has to take, such as entering the 2FA code: guidance,
   not a failure. */
.land-form-message--info {
    background: #e8eef5;
    color: var(--site-navy);
}

.site-form .land-form-error {
    margin: -8px 0 14px;
    color: #8f2436;
    font-size: 14px;
}

/* The field people never see. Off-screen rather than hidden, because a bot skips
   a field it can tell is hidden. */
.land-form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* A real form submits through an input, which .site-form input would otherwise
   draw as a text field. */
.site-form input[type="submit"].site-btn {
    margin-top: 0;
    padding: 13px 22px;
    border-color: transparent;
    background-color: var(--site-fill);
    color: #fff;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    appearance: none;
}

.site-form input[type="submit"].site-btn:hover {
    background-color: #b83d4f;
}

.land-price__vat {
    margin: 16px 0 0;
    color: var(--site-body);
    font-size: 14px;
    text-align: center;
}