/* Landing "How it works" (Partials/PartialScrollytelling + js/scrollytelling.js). Global, since the step list
   is CMS html; loaded by the partial after cms.css, whose .block-body.how rules it overrides.
   .is-js = script running (list hidden), .is-ready = frames drawing. */

/* SECTION */
.cms-page.landing .block-body.how.scrollytelling {
    --scrollytelling-length: 400vh;   /* how far the section scrolls, stage included */
    --scrollytelling-progress: 0;   /* rail fill, set by the script */
    --scrollytelling-aspect: 1440 / 980;   /* manifest aspect, set by the script */
    padding: 0;
    background: var(--scrollytelling-bg, #F9F9F9);   /* fallback must equal the manifest background */
}

/* TRACK + STAGE: the landing scrolls inside the 100vh .cms-page.landing under the fixed header (76px) and
   the footer bar (50px, both mobile.css). The stage covers all of it, so nothing scrolls behind the bars,
   and keeps its content between them. */
.cms-page.landing .scrollytelling .scrollytelling-track {
    position: relative;
    height: var(--scrollytelling-length);
}

.cms-page.landing .scrollytelling .scrollytelling-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 76px 0 50px;
    overflow: hidden;
    background: var(--scrollytelling-bg, #F9F9F9);   /* opaque: no ancestor colour can show through */
}

.cms-page.landing .scrollytelling .scrollytelling-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 16px;
}

/* phones: the copy column dissolves, so the canvas sits between title and card */
.cms-page.landing .scrollytelling .scrollytelling-copy {
    display: contents;
}

/* phones: full bleed (the frames have their own margin) */
.cms-page.landing .scrollytelling .scrollytelling-visual {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 120px;
    margin: 0 -16px;
    order: 1;
}

/* frame aspect; if the height runs out first, the script contain-fits the frame and the stage colour shows around it */
.cms-page.landing .scrollytelling .scrollytelling-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: var(--scrollytelling-aspect);
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* the forest fades in once the first frame is drawn */
.cms-page.landing .scrollytelling.is-ready .scrollytelling-canvas {
    opacity: 1;
}

/* TITLE + RAIL */
.cms-page.landing .scrollytelling .scrollytelling-title {
    color: #000;
    font-family: "Zilla Slab", serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 110%;
    margin: 0 0 12px;
    padding: 0;
}

/* rail + cards side by side; the rail stretches to the card height */
.cms-page.landing .scrollytelling .scrollytelling-steps {
    display: flex;
    align-items: stretch;
    gap: 16px;
    order: 2;
    min-height: 0;
}

/* numbered steps on a vertical line that fills downwards with the scroll progress */
.cms-page.landing .scrollytelling .scrollytelling-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 28px;
    padding: 8px 0;
}

.cms-page.landing .scrollytelling .scrollytelling-rail::before,
.cms-page.landing .scrollytelling .scrollytelling-rail::after {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 13px;
    width: 2px;
    background: #D1D5DB;
}

.cms-page.landing .scrollytelling .scrollytelling-rail::after {
    background: #007A7C;
    transform-origin: top;
    transform: scaleY(var(--scrollytelling-progress));
    transition: transform 0.15s linear;
}

.cms-page.landing .scrollytelling .scrollytelling-rail-step {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    background: #FFF;
    color: #6B7280;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.cms-page.landing .scrollytelling .scrollytelling-rail-step.is-done,
.cms-page.landing .scrollytelling .scrollytelling-rail-step.is-active {
    border-color: #007A7C;
    background: #007A7C;
    color: #FFF;
}

.cms-page.landing .scrollytelling .scrollytelling-rail-step.is-active {
    box-shadow: 0 0 0 4px rgba(56, 197, 180, 0.35);
}

/* CHAPTERS: one static card box, the step contents share its grid cell and cross-fade */
.cms-page.landing .scrollytelling .scrollytelling-chapters {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px 16px;
    border-radius: 24px 24px 0 24px;
    background: #FFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 3px 0px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* leaving: quick fade, entering: slightly delayed, so the texts never overlap at half strength */
.cms-page.landing .scrollytelling .scrollytelling-chapter {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease-out, transform 0.35s ease-out;
    pointer-events: none;
}

.cms-page.landing .scrollytelling .scrollytelling-chapter.is-past {
    transform: translateY(-16px);
}

.cms-page.landing .scrollytelling .scrollytelling-chapter.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease-in 0.08s, transform 0.35s ease-out 0.08s;
}

.cms-page.landing .scrollytelling .scrollytelling-chapter .scrollytelling-eyebrow {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 10px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    display: inline-block;
    color: white;
    padding: 6px 8px;
    border-radius: 6px;
    background: #9C71D5;
    margin: 0 0 10px;
}

/* icon left of the heading */
.cms-page.landing .scrollytelling .scrollytelling-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cms-page.landing .scrollytelling .scrollytelling-icon {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background-color: #007A7C;
    /* -webkit- longhands for Safari < 15.4 */
    -webkit-mask-image: url(/img/landing/landing-search.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(/img/landing/landing-search.svg);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

.cms-page.landing .scrollytelling .scrollytelling-icon.tick-box-icon {
    -webkit-mask-image: url(/img/landing/landing-check-alt.svg);
    mask-image: url(/img/landing/landing-check-alt.svg);
}

.cms-page.landing .scrollytelling .scrollytelling-icon.users-icon {
    -webkit-mask-image: url(/img/landing/landing-users.svg);
    mask-image: url(/img/landing/landing-users.svg);
}

.cms-page.landing .scrollytelling .scrollytelling-icon.functional-icon {
    -webkit-mask-image: url(/img/landing/landing-functional.svg);
    mask-image: url(/img/landing/landing-functional.svg);
}

.cms-page.landing .scrollytelling .scrollytelling-chapter h3 {
    min-width: 0;
    -webkit-hyphens: auto;
    hyphens: auto;
    color: #000;
    font-family: "Zilla Slab", serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 110%;
    margin: 0;
    padding: 0;
}

/* li explicitly: cms.css paints .block-body.how li white */
.cms-page.landing .scrollytelling .scrollytelling-chapter p,
.cms-page.landing .scrollytelling .scrollytelling-chapter ul,
.cms-page.landing .scrollytelling .scrollytelling-chapter li {
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    padding: 0;
}

.cms-page.landing .scrollytelling .scrollytelling-chapter ul {
    list-style: none;
}

.cms-page.landing .scrollytelling .scrollytelling-chapter li {
    position: relative;
    padding: 0 0 0 18px;
}

.cms-page.landing .scrollytelling .scrollytelling-chapter li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.65em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #007A7C;
}

/* SOURCE LIST: the CMS markup, the section without js (cms.css paints it white) */
.cms-page.landing .scrollytelling.is-js .scrollytelling-source {
    display: none;
}

.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source {
    padding-top: 51px;
    padding-bottom: 50px;
}

.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source .subtitle-cta-no-border,
.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source li,
.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source li h2,
.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source li .li-subtext,
.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source ol {
    color: #000;
}

.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source li h2 {
    background-image: none;
    padding-left: 0;
}

.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source li .li-subtext {
    padding-left: 0;
}

.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source ol li .leaf-container .line {
    border-right-color: #007A7C;
}

.cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source ol li .leaf-container .leaf {
    background-color: #007A7C;
    background-image: none;
    -webkit-mask-image: url(/img/landing/landing-full-leaf.svg);
    -webkit-mask-size: 16px 16px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(/img/landing/landing-full-leaf.svg);
    mask-size: 16px 16px;
    mask-position: center;
    mask-repeat: no-repeat;
}

/* cms.css disables every transition on phones with !important */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .cms-page.landing .scrollytelling .scrollytelling-chapter {
        transition: opacity 0.25s ease-out, transform 0.35s ease-out !important;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter.is-visible {
        transition: opacity 0.35s ease-in 0.08s, transform 0.35s ease-out 0.08s !important;
    }

    .cms-page.landing .scrollytelling .scrollytelling-canvas {
        transition: opacity 0.3s ease-out !important;
    }

    .cms-page.landing .scrollytelling .scrollytelling-rail-step {
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-page.landing .scrollytelling .scrollytelling-chapter,
    .cms-page.landing .scrollytelling .scrollytelling-rail-step,
    .cms-page.landing .scrollytelling .scrollytelling-canvas {
        transition: none;
    }
}

/* side by side: desktop, and phones in landscape (a stacked stage does not fit a 300px viewport) */
@media (min-width: 768px), (orientation: landscape) {
    .cms-page.landing .block-body.how.scrollytelling {
        --scrollytelling-length: 490vh;
    }

    .cms-page.landing .scrollytelling .scrollytelling-inner {
        display: grid;
        grid-template-columns: minmax(340px, 8fr) minmax(0, 16fr);
        column-gap: 32px;
        align-items: center;
        padding: 32px 10px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
    }

    .cms-page.landing .scrollytelling .scrollytelling-visual {
        order: 0;
        height: 100%;
        min-height: 0;
        margin: 0;
    }

    .cms-page.landing .scrollytelling .scrollytelling-steps {
        gap: 24px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-heading {
        gap: 14px;
        margin-bottom: 12px;
    }
}

/* desktop type: fluid, so narrow tablets and small laptops get a smaller scale */
@media (min-width: 768px) {
    .cms-page.landing .scrollytelling .scrollytelling-title {
        font-size: clamp(30px, 2.8vw, 40px);
        margin-bottom: 24px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter .scrollytelling-eyebrow {
        font-size: 14px;
        padding: 8px;
        margin-bottom: 16px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapters {
        padding: 28px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-icon {
        width: 32px;
        height: 32px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter h3 {
        font-size: clamp(24px, 2.4vw, 34px);
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter p,
    .cms-page.landing .scrollytelling .scrollytelling-chapter ul,
    .cms-page.landing .scrollytelling .scrollytelling-chapter li {
        font-size: clamp(14px, 1.1vw, 16px);
        line-height: 160%;
    }

    .cms-page.landing .scrollytelling:not(.is-js) .scrollytelling-source {
        padding-top: 64px;
    }
}

/* short viewports (phones in landscape): tighter spacing so title, card and forest fit the stage */
@media (max-height: 500px) {
    .cms-page.landing .block-body.how.scrollytelling {
        --scrollytelling-length: 400vh;
    }

    .cms-page.landing .scrollytelling .scrollytelling-inner {
        grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
        column-gap: 16px;
        padding: 8px 16px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-steps {
        gap: 12px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapters {
        padding: 10px 12px 12px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter .scrollytelling-eyebrow {
        margin-bottom: 6px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-heading {
        margin-bottom: 4px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter h3 {
        font-size: 18px;
    }

    .cms-page.landing .scrollytelling .scrollytelling-chapter p,
    .cms-page.landing .scrollytelling .scrollytelling-chapter ul,
    .cms-page.landing .scrollytelling .scrollytelling-chapter li {
        font-size: 12px;
        line-height: 140%;
    }
}