/*===================================================
    // STAGE
    /==================================================*/

    [data-hero="integrate"] {
        --term-font: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    }

    /* Terminal sits left of centre; the phone overlaps its right edge */
    .integrate-stage {
        --term-w: 820px;
        --term-h: 580px;
        --term-shift: 110px;
        --phone-scale: 0.92;

        position: relative;
        max-width: 1160px;
        height: 700px;
        margin: var(--margin-large) auto 0;
        animation: heroFade 1200ms ease 380ms both;
    }

    .integrate-device {
        position: absolute;
        top: 60px;
        left: calc(50% + var(--term-w) / 2 - var(--term-shift) - 120px);
        z-index: 2;
        transform: scale(var(--phone-scale));
    }

    .term-screen,
    .integrate-steps,
    .integrate-toast {
        transition: opacity 500ms ease;
    }

    .is-resetting .term-screen,
    .is-resetting .integrate-steps,
    .is-resetting .integrate-toast {
        opacity: 0;
    }


    /*===================================================
    // TERMINAL
    /==================================================*/

    .integrate-terminal {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        width: var(--term-w);
        height: var(--term-h);
        margin-left: calc(var(--term-w) / -2 - var(--term-shift));
        display: flex;
        flex-direction: column;
        padding: 0 10px 10px;
        border-radius: 18px;
        background: #00091a;
        box-shadow:
            0 60px 110px -40px rgba(0, 13, 35, 0.15),
            0 30px 60px -30px rgba(0, 13, 35, 0.05);
    }

    .term-bar {
        position: relative;
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        padding: 0 var(--padding-xsmall);
    }

    .term-lights {
        display: flex;
        gap: var(--gap-xsmall);
    }

    .term-lights i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #3a404c;
    }

    .term-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.45);
    }

    /* Lines are appended at the bottom and the screen scrolls, like a real shell */
    .term-screen {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding: var(--padding-small) 20px;
        border-radius: 8px;
        background: #000;
        font-family: var(--term-font);
        font-size: 12.5px;
        line-height: 1.75;
        color: #aeb9c7;
        scroll-behavior: smooth;
    }


    /*=== Lines ===*/

    .term-line {
        display: none;
        white-space: nowrap;
    }

    .term-line.is-shown {
        display: flex;
        align-items: baseline;
    }

    .term-text {
        white-space: pre;
    }

    .term-prompt {
        flex: 0 0 auto;
        margin-right: 1ch;
        font-weight: 700;
        color: var(--secondary-color);
    }

    .term-prompt.is-continued {
        font-weight: 400;
        color: #4a5566;
    }

    .term-comment {
        margin-top: 12px;
        color: #5d6b7e;
    }

    .term-block:first-child .term-comment {
        margin-top: 0;
    }

    .term-command {
        color: #d5dde7;
    }


    /*=== Typing ===*/

    /* Monospace glyphs are 1ch wide, so widening by whole ch reveals one character per step */
    .term-command .term-text {
        overflow: hidden;
    }

    .term-command.is-shown .term-text {
        animation: termType calc(var(--chars) * var(--type-time, 20ms)) steps(var(--chars), end) both;
    }

    @keyframes termType {
        from { max-width: 0; }
        to { max-width: calc(var(--chars) * 1ch + 2px); }
    }

    .term-caret {
        display: none;
        flex: 0 0 auto;
        align-self: center;
        width: 0.6em;
        height: 1.2em;
        margin-left: 1px;
        background: var(--secondary-color);
    }

    .is-typing .term-caret,
    .term-idle.is-shown .term-caret {
        display: block;
    }

    .term-idle.is-shown .term-caret {
        animation: termBlink 1000ms steps(1) infinite;
    }

    @keyframes termBlink {
        50% { opacity: 0; }
    }


    /*=== Syntax ===*/

    .term-program {
        font-weight: 700;
        color: var(--secondary-color);
    }

    .term-flag {
        color: #8d96a8;
    }

    .term-variable {
        color: var(--secondary-light-color);
    }

    .term-key {
        color: var(--primary-light-color);
    }

    .term-string {
        color: #e6edf5;
    }

    .term-literal {
        color: var(--accent-light-color);
    }


    /*===================================================
    // PHONE APP
    /==================================================*/

    .integrate-app {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .integrate-goal {
        stroke-dashoffset: 50;
    }

    .integrate-goal-rewards {
        stroke-dashoffset: 40;
    }


    /*=== Web Activity ===*/

    .integrate-step-web .pathway-step-text {
        transition: color 400ms ease;
    }

    .integrate-step-web.is-active .pathway-step-text {
        font-weight: 600;
        color: var(--primary-color);
    }

    .pathway-step.is-locked {
        transition: opacity 500ms ease;
    }

    .integrate-ring {
        transform: rotate(-90deg);
    }

    .integrate-ring-track,
    .integrate-ring-fill {
        fill: none;
        stroke-width: 2.5;
    }

    .integrate-ring-track {
        stroke: #e9edf2;
    }

    .integrate-ring-fill {
        stroke: var(--primary-color);
        stroke-linecap: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        transition: stroke-dashoffset 1200ms var(--ease-out);
    }

    .integrate-icon-done,
    .integrate-icon-open,
    .integrate-step-web.is-complete .integrate-ring,
    .pathway-step:not(.is-locked) .integrate-icon-lock {
        opacity: 0;
        transform: scale(0.6);
    }

    .integrate-step-web.is-complete .integrate-icon-done,
    .pathway-step:not(.is-locked) .integrate-icon-open {
        opacity: 1;
        transform: none;
    }

    .integrate-icon-lock {
        color: var(--ink-soft-color);
    }


    /*=== Toast ===*/

    .integrate-toast {
        position: absolute;
        left: var(--padding-small);
        right: var(--padding-small);
        bottom: var(--padding-small);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px var(--padding-small);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 24px -8px rgba(0, 13, 35, 0.18);
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 400ms ease, transform 600ms var(--ease-out);
    }

    .integrate-toast.is-visible {
        opacity: 1;
        transform: none;
    }

    .integrate-toast .fa {
        font-size: 20px;
        color: var(--accent-color);
    }

    .integrate-toast-copy {
        display: flex;
        flex-direction: column;
        font-size: 10.5px;
        color: var(--ink-soft-color);
    }

    .integrate-toast-copy strong {
        font-size: 11.5px;
        color: var(--dark-dark-color);
    }


    /*===================================================
    // DOCS
    /==================================================*/

    .integrate-docs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--gap-xsmall) var(--gap-small);
        margin-top: var(--margin-medium);
        font-size: 13px;
    }

    .integrate-docs-title {
        font-weight: 600;
        color: var(--dark-dark-color);
    }

    .integrate-endpoint {
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        border-radius: 8px;
        border: 1px solid var(--hairline-color);
        background: var(--surface-color);
        font-family: var(--term-font);
        font-size: 12px;
        color: var(--dark-light-color);
    }

    .integrate-endpoint b {
        font-weight: 700;
        color: var(--primary-dark-color);
    }

    .integrate-docs-link {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xxsmall);
        font-weight: 600;
        color: var(--primary-dark-color);
        transition: color 300ms ease;
    }

    .integrate-docs-link .fa {
        font-size: 11px;
    }

    .integrate-docs-link:hover {
        color: var(--primary-color);
    }


    /*===================================================
    // RESPONSIVE
    /==================================================*/

    /* The phone may run past the container edge; the hero clips it */
    @media screen and (max-width: 1180px) {

        .integrate-stage {
            --term-w: 720px;
            --term-h: 540px;
            --term-shift: 90px;
            --phone-scale: 0.8;

            height: 640px;
        }

        .term-screen {
            font-size: 12px;
        }

    }

    /* Small screens keep the terminal on its own */
    @media screen and (max-width: 960px) {

        .integrate-stage {
            height: auto;
        }

        .integrate-terminal {
            position: relative;
            left: auto;
            width: 100%;
            height: 460px;
            margin-left: 0;
        }

        .integrate-device {
            display: none;
        }

        .term-screen {
            padding: var(--padding-small);
            font-size: 11px;
        }

    }