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

    .hero-stage {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 300px 1fr;
        align-items: start;
        max-width: 1160px;
        margin: var(--margin-large) auto 0;
        animation: heroFade 1200ms ease 380ms both;
    }

    .hero-wing {
        display: grid;
        row-gap: var(--gap-small);
        margin-top: 120px;
    }

    .hero-wing-models {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "title ."
            "body connectors"
            "summary .";
    }

    .hero-wing-engine {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            ". title"
            "connectors body";
    }

    .hero-wing-title {
        grid-area: title;
        font-size: 10.5px;
        color: var(--ink-soft-color);
    }


    /*===================================================
    // CONNECTORS
    /==================================================*/

    .connector-set {
        grid-area: connectors;
        position: relative;
        min-width: 48px;
    }

    .connector {
        --line-color: rgba(0, 13, 35, 0.2);

        position: absolute;
        left: var(--padding-small);
        right: var(--padding-small);
        height: 1px;
        background-image: linear-gradient(90deg, var(--line-color) 50%, transparent 50%);
        background-size: 7px 1px;
        animation: connectorFlow 900ms linear infinite;
    }

    .connector:nth-child(1) { top: 25%; }
    .connector:nth-child(2) { top: 75%; }

    .connector[data-direction="reverse"] {
        animation-direction: reverse;
    }

    .connector.is-active {
        --line-color: rgba(27, 156, 252, 0.55);
    }

    /* End caps */
    .connector::before,
    .connector::after {
        content: '';
        position: absolute;
        top: -3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        border: 1.5px solid rgba(0, 13, 35, 0.22);
        background: #fff;
    }

    .connector::before { left: -7px; }
    .connector::after { right: -7px; }

    @keyframes connectorFlow {
        to { background-position: 7px 0; }
    }

    /* Runner spans the line so translateX(0%→100%) carries the dot end to end */
    .connector-runner {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .connector-dot {
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        margin: -3.5px 0 0 -4px;
        border-radius: 50%;
        background: var(--primary-color);
        box-shadow: 0 0 0 4px var(--primary-color-15), 0 0 18px 2px var(--primary-color);
    }

    .connector-dot::before {
        content: '';
        position: absolute;
        top: 3px;
        right: 4px;
        width: 56px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, var(--primary-color));
    }

    .connector[data-direction="reverse"] .connector-dot::before {
        right: auto;
        left: 4px;
        background: linear-gradient(270deg, transparent, var(--primary-color));
    }


    /*===================================================
    // MENTAL MODELS
    /==================================================*/

    .model-grid {
        grid-area: body;
        display: grid;
        grid-template-columns: repeat(3, 92px);
        gap: var(--gap-xsmall);
    }

    .model-tile {
        position: relative;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: var(--padding-small) var(--padding-xsmall) var(--padding-xsmall);
        overflow: hidden;
        border-radius: var(--radius);
        border: 1px solid var(--hairline-color);
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 13, 35, 0.04), 0 10px 24px -14px rgba(0, 13, 35, 0.12);
        transition:
            transform 600ms var(--ease-out),
            box-shadow 600ms var(--ease-out),
            border-color 600ms ease;
    }

    .model-tile-icon {
        font-size: 20px;
        color: var(--dark-light-color);
    }


    .model-tile-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.3;
        word-break: break-all;
        color: var(--ink-color);
    }

    .model-tile-check {
        position: absolute;
        top: 9px;
        right: 9px;
        width: 16px;
        height: 16px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color:  var(--primary-color);
        transform: scale(0);
        transition: transform 500ms var(--ease-out) 450ms;
    }

    .model-tile-check .fa {
        font-size: 13px;
    }

    /* Scan sweep */
    .model-tile::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 25%, rgba(37, 204, 247, 0.08) 50%, transparent 75%);
        transform: translateX(-120%);
    }

    .model-tile.is-scanning::after {
        animation: tileScan 950ms var(--ease-in-out) both;
    }

    .model-tile.is-scanning .model-tile-check {
        transform: scale(1);
    }

    @keyframes tileScan {
        to { transform: translateX(120%); }
    }

    .model-tile.is-referenced {
        transform: translateY(-3px);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px var(--primary-color-15), 0 16px 30px -12px var(--primary-color-50);
    }

    .model-summary {
        grid-area: summary;
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xsmall);
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-muted-color);
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 500ms ease, transform 600ms var(--ease-out);
    }

    .model-summary .fa {
        font-size: 10px;
        color: var(--primary-color);
    }

    .model-summary.is-visible {
        opacity: 1;
        transform: none;
    }


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

   

    .is-complete .phone-glow::after {
        opacity: 1;
    }

    .phone-ring {
        width: 26px;
        height: 26px;
        transform: rotate(-90deg);
    }


    /*=== Comprehension Rings (phone + engine) ===*/

    .ring-track {
        fill: none;
        stroke: #e9edf2;
    }

    .ring-value {
        fill: none;
        stroke: url(#engine-gradient);
        stroke-linecap: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        opacity: 0;
        transition: stroke-dashoffset 1400ms var(--ease-out), opacity 500ms ease;
    }

    .phone-ring .ring-track,
    .phone-ring .ring-value {
        stroke-width: 4;
    }

    .has-progress .ring-value {
        opacity: 1;
    }

    .ring-value-complete {
        stroke: url(#engine-gradient-complete);
    }

    .has-progress .ring-value-complete {
        opacity: 0;
    }

    .is-complete .ring-value-complete {
        opacity: 1;
    }


    /*=== Chat ===*/

    .phone-chat {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        padding: 0 var(--padding-small);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px);
        mask-image: linear-gradient(180deg, transparent 0, #000 64px);
    }

    .phone-chat-track {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xsmall);
        padding: var(--padding-small) 0;
        transition: transform 750ms var(--ease-out), opacity 600ms ease;
    }

    .is-resetting .phone-chat-track {
        opacity: 0;
    }

    .chat-entry {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 500ms ease, transform 700ms var(--ease-out);
    }

    .chat-entry.is-visible {
        opacity: 1;
        transform: none;
    }

    .chat-tutor {
        padding-right: var(--padding-xsmall);
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: -0.005em;
        color: var(--ink-color);
        margin: var(--margin-xsmall) 0;
    }

    .chat-word {
        opacity: 0;
        filter: blur(4px);
        transition: opacity 450ms ease, filter 450ms ease;
        transition-delay: calc(var(--i) * 26ms);
    }

    .is-visible .chat-word {
        opacity: 1;
        filter: none;
    }

    .chat-prompt {
        font-size: 12px;
        color: var(--ink-muted-color);
    }

    .chat-thinking {
        display: flex;
        gap: var(--gap-xxsmall);
        padding: var(--padding-xxsmall) 0;
    }

    .chat-thinking span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ink-soft-color);
        animation: thinkingDot 1100ms ease-in-out infinite;
    }

    .chat-thinking span:nth-child(2) { animation-delay: 150ms; }
    .chat-thinking span:nth-child(3) { animation-delay: 300ms; }

    @keyframes thinkingDot {
        0%, 60%, 100% { opacity: 0.3; transform: none; }
        30% { opacity: 1; transform: translateY(-3px); }
    }

    .chat-learner {
        align-self: flex-end;
        max-width: 84%;
        padding: var(--padding-xsmall) var(--padding-small);
        border-radius: 16px 16px 0px 16px;
        background: var(--primary-color);
        font-size: 12.5px;
        line-height: 1.45;
        color: #fff;
        transform: translateY(10px) scale(0.92);
        transform-origin: 100% 100%;
        margin: var(--margin-small) 0;
    }


    /*=== Generated Visual ===*/

    .chat-visual {
        padding: var(--padding-small);
        border-radius: var(--radius-medium);
        border: 1px solid var(--hairline-color);
        background: #fff;
        box-shadow: 0 10px 24px -16px rgba(0, 13, 35, 0.12);
    }

    .chat-visual-title {
        display: block;
        margin-bottom: var(--margin-xsmall);
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--dark-dark-color);
    }

    /* Icon steps sit on a track that draws across once the card appears */
    .chat-visual-flow {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 0 var(--padding-xsmall);
    }

    .chat-visual-track {
        position: absolute;
        top: 21px;
        left: 36px;
        right: 36px;
        height: 2px;
        border-radius: var(--radius-small);
        background: #e9edf2;
    }

    .chat-visual-track::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--primary-color);
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform 1000ms var(--ease-in-out) 300ms;
    }

    .is-visible .chat-visual-track::after {
        transform: none;
    }

    .chat-visual-node {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 500ms ease, transform 600ms var(--ease-out);
        transition-delay: calc(var(--i) * 380ms + 250ms);
    }

    .is-visible .chat-visual-node {
        opacity: 1;
        transform: none;
    }

    .chat-visual-icon {
        position: relative;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1.5px solid var(--primary-color);
        background: #fff;
        font-size: 17px;
        color: var(--primary-color);
    }

    .chat-visual-node:last-child .chat-visual-icon {
        background: var(--primary-color);
        color: #fff;
    }

    /* Finish badge pops on the last step */
    .chat-visual-node:last-child .chat-visual-icon::after {
        content: '\f00c';
        position: absolute;
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1.5px solid #fff;
        background: #12b886;
        font-family: 'FontAwesome Light';
        font-size: 8px;
        color: #fff;
        transform: scale(0);
        transition: transform 400ms var(--ease-out) 1300ms;
    }

    .is-visible .chat-visual-node:last-child .chat-visual-icon::after {
        transform: none;
    }

    .chat-visual-label {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--dark-dark-color);
    }

    .chat-visual-caption {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap-xxsmall);
        margin-top: var(--margin-xsmall);
        font-size: 10px;
        color: var(--ink-soft-color);
    }

    .chat-visual-caption .fa {
        font-size: 9px;
        color: var(--primary-color);
    }

    .chat-visual-icon .fa{
        font-size: 17px;
    }


    /*=== Chips ===*/

    .chat-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-xxsmall);
    }

    .chat-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xxsmall);
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        border-radius: 999px;
        background: #eef0f4;
        font-size: 9px;
        font-weight: 500;
        color: #4a5365;
        opacity: 0;
        transform: translateY(4px);
        transition:
            opacity 400ms ease,
            transform 400ms var(--ease-out),
            background-color 300ms ease,
            color 300ms ease;
        transition-delay: calc(var(--i) * 80ms);
    }

    .is-visible .chat-chip {
        opacity: 1;
        transform: none;
    }

    .chat-chips .chat-chip.is-pressed {
        transform: scale(0.93);
        transition-delay: 0s;
    }

    .chat-chips .chat-chip.is-selected {
        background: var(--dark-light-color);
        color: #fff;
        transition-delay: 0s;
    }

    .chat-chip.is-selected::after {
        content: '\f00c';
        font-family: 'FontAwesome Light';
        font-size: 9px;
    }

    .chat-chips.is-decided .chat-chip:not(.is-selected) {
        opacity: 0.4;
        transition-delay: 0s;
    }


    /*=== Summary ===*/

    .chat-summary {
        display: grid;
        grid-template-columns: 15px 1fr;
        align-items: center;
        column-gap: 8px;
        padding: var(--padding-small);
        border-radius: 18px;
        border: 1px solid var(--hairline-color);
        background: #fff;
    }

    .chat-summary-icon {
    }

    .chat-summary-icon .fa {
        font-size: 15px;
        color:var(--primary-color)
    }

    .chat-summary-title {
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--dark-dark-color);
    }

    .chat-summary-text {
        grid-column: 1 / -1;
        margin-top: var(--margin-small);
        padding-top: var(--padding-small);
        border-top: 1px solid var(--hairline-color);
        font-size: 12px;
        line-height: 1.5;
        color: var(--ink-muted-color);
    }


    /*=== Input ===*/

    .phone-input {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        gap: var(--gap-xsmall);
        padding: var(--padding-xsmall) var(--padding-small);
        background: #fff;
    }

    .phone-input-field {
        flex: 1 1 auto;
        min-height: 34px;
        padding: var(--padding-xsmall) var(--padding-small);
        border-radius: var(--radius);
        background: #f1f3f6;
        font-size: 12.5px;
        line-height: 18px;
        color: var(--ink-color);
    }

    .phone-input-placeholder {
        color: #9aa3b1;
    }

    .phone-input-caret {
        display: none;
        width: 1.5px;
        height: 15px;
        margin-left: 1px;
        vertical-align: -3px;
        background: var(--primary-color);
        animation: caretBlink 1s steps(1) infinite;
    }

    .phone-input.is-typing .phone-input-placeholder {
        display: none;
    }

    .phone-input.is-typing .phone-input-caret {
        display: inline-block;
    }

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

    .phone-send {
        flex: 0 0 32px;
        height: 32px;
        margin-bottom: 1px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #d6dbe2;
        color: #fff;
        transition: background-color 300ms ease, transform 250ms var(--ease-out);
    }

    .phone-send .fa {
        font-size: 13px;
    }

    .phone-input.is-typing .phone-send {
        background: var(--primary-color);
    }

    .phone-send.is-pressed {
        transform: scale(0.86);
    }


    /*===================================================
    // COMPREHENSION ENGINE
    /==================================================*/

    .engine-panel {
        grid-area: body;
        width: 272px;
        padding: var(--padding-medium) var(--padding-small) var(--padding-xsmall);
        border-radius: var(--radius);
        border: 1px solid var(--hairline-color);
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: saturate(160%) blur(20px);
        -webkit-backdrop-filter: saturate(160%) blur(20px);
        box-shadow: 0 1px 2px rgba(0, 13, 35, 0.04), 0 28px 56px -28px rgba(0, 13, 35, 0.12);
    }

    .engine-ring {
        position: relative;
        width: 96px;
        height: 96px;
        margin: 0 auto var(--margin-small);
    }

    .engine-ring svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform: rotate(-90deg);
    }

    .engine-ring .ring-track,
    .engine-ring .ring-value {
        stroke-width: 9;
    }

    .engine-ring-label {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--gap-xxsmall);
    }

    .engine-ring-number {
        font-size: 24px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;
        color: var(--dark-dark-color);
        transition: color 800ms ease;
        font-family: var(--body-font-monospace);
    }

    .engine-ring-number small {
        margin-left: 1px;
        font-size: 10px;
        font-weight: 700;
        color: var(--ink-soft-color);
    }

    .is-complete .engine-ring-number {
        color: var(--accent-dark-color);
    }

    .engine-ring-caption {
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ink-soft-color);
    }


    /*=== Concepts ===*/

    .engine-concepts {
        list-style: none;
        border-top: 1px solid var(--hairline-color);
    }

    .engine-concept {
        display: grid;
        grid-template-columns: 22px 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: var(--gap-small);
        row-gap: var(--gap-xxsmall);
        padding: var(--padding-small) 0;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 500ms ease, transform 600ms var(--ease-out);
    }

    .engine-concept + .engine-concept {
        border-top: 1px solid var(--hairline-color);
    }

    .is-ready .engine-concept {
        opacity: 1;
        transform: none;
        transition-delay: calc(var(--i) * 110ms);
    }

    .engine-concept-status {
        grid-row: span 2;
        position: relative;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1.5px dashed #c3cad5;
        color: #fff;
        transition: all 500ms var(--ease-out);
    }

    .engine-concept-status .fa {
        font-size: 9px;
        transform: scale(0);
        transition: transform 500ms var(--ease-out) 100ms;
    }

    .engine-concept-title {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--dark-dark-color);
    }

    .engine-concept-state {
        font-size: 11px;
        color: var(--ink-soft-color);
    }

    .engine-concept-state > span {
        display: none;
    }

    .engine-concept[data-state="pending"] [data-state-label="pending"],
    .engine-concept[data-state="gap"] [data-state-label="gap"],
    .engine-concept[data-state="understood"] [data-state-label="understood"] {
        display: inline;
    }

    /* Gap: solid ring with a breathing core */
    .engine-concept[data-state="gap"] .engine-concept-status {
        border: 1.5px solid var(--primary-color);
    }

    .engine-concept[data-state="gap"] .engine-concept-status::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary-color);
        animation: gapPulse 1400ms ease-in-out infinite;
    }

    .engine-concept[data-state="gap"] .engine-concept-state {
        color: var(--primary-dark-color);
    }

    @keyframes gapPulse {
        50% { transform: scale(1.5); opacity: 0.5; }
    }

    .engine-concept[data-state="understood"] .engine-concept-status {
        border: 1.5px solid transparent;
        background: var(--primary-color);
    }

    .engine-concept[data-state="understood"] .engine-concept-status .fa {
        transform: scale(1);
    }


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

    @media screen and (max-width: 1180px) {

        .hero-stage {
            grid-template-columns: 1fr 280px 1fr;
        }

        .model-grid {
            grid-template-columns: repeat(3, 80px);
            gap: var(--gap-xsmall);
        }

        .model-tile {
            height: 80px;
            padding: var(--padding-xsmall);
        }

        .engine-panel {
            width: 236px;
            padding: var(--padding-small) var(--padding-small) var(--padding-xsmall);
        }

        .engine-ring {
            width: 116px;
            height: 116px;
        }

    }

    /* Below tablet the three regions stack around the phone */
    @media screen and (max-width: 960px) {

        .hero {
            --hero-floor: 560px;
        }

        .hero-stage {
            grid-template-columns: 1fr;
            justify-items: center;
            row-gap: var(--gap-medium);
            margin-top: var(--margin-large);
        }

        .hero-wing {
            margin-top: 0;
        }

        .hero-wing-models,
        .hero-wing-engine {
            grid-template-columns: auto;
            grid-template-areas:
                "title"
                "body"
                "summary";
            justify-items: center;
        }

        .connector-set {
            display: none;
        }

        .model-grid {
            grid-template-columns: repeat(6, 52px);
        }

        .model-tile {
            height: 52px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 14px;
        }

        .model-tile-title {
            display: none;
        }

        .model-tile-check {
            top: 5px;
            right: 5px;
            width: 13px;
            height: 13px;
        }

        .engine-panel {
            width: clamp(280px, 100%, 420px);
        }

    }

    @media screen and (max-width: 420px) {

        .model-grid {
            grid-template-columns: repeat(6, 44px);
            gap: var(--gap-xxsmall);
        }

        .model-tile {
            height: 44px;
        }

    }