/*
 * =====================================================
 * CONFIVATE INTERACTIVE COMPONENT PRIMITIVES
 * =====================================================
 *
 * Reusable presentation layer for intelligent,
 * guided participant experiences.
 *
 * Business logic and participant data remain
 * server-authoritative.
 * =====================================================
 */


/* -----------------------------------------------------
   Shared component language
   ----------------------------------------------------- */


.component-kicker {
    margin:
        0 0
        var(--space-3);

    color:
        var(--color-teal-700);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.component-title {
    margin:
        0;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-xl);

    font-weight:
        var(--weight-bold);

    line-height:
        var(--leading-heading);
}


.component-copy {
    margin:
        var(--space-3)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);
}


.ui-card {
    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-sm);
}


/* -----------------------------------------------------
   Experience preview layout
   ----------------------------------------------------- */


.experience-preview {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(18rem, 0.85fr);

    gap:
        var(--space-6);

    max-width:
        var(--shell-width);

    margin-inline:
        auto;
}


.experience-preview__intro,
.experience-preview__journey {
    grid-column:
        1 / -1;
}


.experience-preview__intro {
    max-width:
        48rem;
}


.experience-preview__intro h1 {
    max-width:
        13ch;

    margin:
        0;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-4xl);

    letter-spacing:
        -0.035em;

    line-height:
        var(--leading-tight);
}


.experience-preview__intro p {
    max-width:
        42rem;

    margin:
        var(--space-5)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-lg);
}


.experience-stack {
    display:
        grid;

    gap:
        var(--space-6);

    align-content:
        start;
}


/* -----------------------------------------------------
   Journey rail
   ----------------------------------------------------- */


.journey-rail {
    padding:
        var(--space-6);

    overflow:
        hidden;
}


.journey-rail__header {
    display:
        flex;

    align-items:
        start;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    margin-bottom:
        var(--space-8);
}


.journey-rail__status {
    padding:
        var(--space-2)
        var(--space-3);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-teal-100);

    color:
        var(--color-teal-700);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-bold);

    white-space:
        nowrap;
}


.journey-rail__steps {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}


.journey-step {
    position:
        relative;

    min-width:
        0;

    padding-right:
        var(--space-3);
}


.journey-step:not(:last-child)::after {
    position:
        absolute;

    top:
        0.65rem;

    left:
        1.55rem;

    right:
        0;

    height:
        2px;

    background:
        var(--color-border);

    content:
        "";
}


.journey-step[data-state="complete"]::after {
    background:
        var(--color-teal-500);
}


.journey-step__marker {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    width:
        1.4rem;

    height:
        1.4rem;

    place-items:
        center;

    border:
        2px solid
        var(--color-border-strong);

    border-radius:
        50%;

    background:
        var(--color-surface);
}


.journey-step[data-state="complete"]
.journey-step__marker {
    border-color:
        var(--color-teal-600);

    background:
        var(--color-teal-600);
}


.journey-step[data-state="current"]
.journey-step__marker {
    border-color:
        var(--color-violet-600);

    box-shadow:
        0 0 0 5px
        var(--color-violet-100);
}


.journey-step__label {
    display:
        block;

    margin-top:
        var(--space-3);

    color:
        var(--color-text-strong);

    font-size:
        var(--text-sm);

    font-weight:
        var(--weight-semibold);
}


.journey-step__description {
    display:
        block;

    max-width:
        12rem;

    margin-top:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);
}


/* -----------------------------------------------------
   Progress ring
   ----------------------------------------------------- */


.progress-ring-card {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-5);

    padding:
        var(--space-6);
}


.progress-ring {
    --progress-value: 25;

    position:
        relative;

    display:
        grid;

    width:
        7rem;

    height:
        7rem;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        conic-gradient(
            var(--color-teal-600)
            calc(var(--progress-value) * 1%),
            var(--color-neutral-100)
            0
        );
}


.progress-ring::after {
    position:
        absolute;

    width:
        5.2rem;

    height:
        5.2rem;

    border-radius:
        50%;

    background:
        var(--color-surface);

    content:
        "";
}


.progress-ring__value {
    position:
        relative;

    z-index:
        1;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-xl);

    font-weight:
        var(--weight-bold);
}


/* -----------------------------------------------------
   Confidence snapshot
   ----------------------------------------------------- */


.confidence-snapshot {
    padding:
        var(--space-6);

    background:
        linear-gradient(
            145deg,
            var(--color-surface),
            var(--color-violet-50)
        );
}


.confidence-snapshot__state {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    margin-top:
        var(--space-5);

    padding:
        var(--space-2)
        var(--space-3);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-neutral-100);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    font-weight:
        var(--weight-semibold);
}


.confidence-snapshot__state::before {
    width:
        0.5rem;

    height:
        0.5rem;

    border-radius:
        50%;

    background:
        var(--color-violet-600);

    content:
        "";
}


/* -----------------------------------------------------
   Insight card
   ----------------------------------------------------- */


.insight-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        var(--space-6);
}


.insight-card::before {
    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        4px;

    background:
        linear-gradient(
            var(--color-teal-500),
            var(--color-violet-600)
        );

    content:
        "";
}


/* -----------------------------------------------------
   Next best action
   ----------------------------------------------------- */


.next-best-action {
    padding:
        var(--space-6);

    border-color:
        rgba(8, 115, 111, 0.28);

    background:
        linear-gradient(
            145deg,
            var(--color-teal-50),
            var(--color-surface)
        );
}


.next-best-action__meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);

    margin-top:
        var(--space-5);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);
}


.next-best-action__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        3rem;

    margin-top:
        var(--space-5);

    padding:
        var(--space-3)
        var(--space-5);

    border:
        0;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-primary);

    color:
        var(--color-white);

    font-weight:
        var(--weight-semibold);

    text-decoration:
        none;

    transition:
        background
        var(--transition-fast),
        transform
        var(--transition-fast);
}


.next-best-action__button:hover {
    background:
        var(--color-primary-hover);

    color:
        var(--color-white);
}


/* -----------------------------------------------------
   Intelligent guide
   ----------------------------------------------------- */


.intelligent-guide {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    gap:
        var(--space-4);

    padding:
        var(--space-5);

    background:
        var(--color-ink-950);

    color:
        var(--color-white);
}


.intelligent-guide__mark {
    display:
        grid;

    width:
        2.5rem;

    height:
        2.5rem;

    place-items:
        center;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            var(--color-teal-500),
            var(--color-violet-600)
        );

    font-weight:
        var(--weight-bold);
}


.intelligent-guide .component-kicker {
    color:
        #9ce3de;
}


.intelligent-guide .component-title {
    color:
        var(--color-white);
}


.intelligent-guide .component-copy {
    color:
        #cbd6e4;
}


/* -----------------------------------------------------
   Signal bar
   ----------------------------------------------------- */


.signal-card {
    padding:
        var(--space-6);
}


.signal-bar {
    margin-top:
        var(--space-5);
}


.signal-bar__track {
    overflow:
        hidden;

    height:
        0.65rem;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-neutral-100);
}


.signal-bar__fill {
    width:
        var(--signal-value, 50%);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-teal-500),
            var(--color-violet-600)
        );
}


.signal-bar__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        var(--space-3);

    margin-top:
        var(--space-3);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);
}


/* -----------------------------------------------------
   Locked roadmap tile
   ----------------------------------------------------- */


.locked-roadmap-tile {
    position:
        relative;

    padding:
        var(--space-6);

    border-style:
        dashed;

    background:
        var(--color-neutral-25);
}


.locked-roadmap-tile__lock {
    display:
        inline-grid;

    width:
        2.5rem;

    height:
        2.5rem;

    place-items:
        center;

    margin-bottom:
        var(--space-5);

    border-radius:
        var(--radius-md);

    background:
        var(--color-neutral-100);

    color:
        var(--color-text-muted);
}


/* -----------------------------------------------------
   Responsive components
   ----------------------------------------------------- */


@media (max-width: 47.999rem) {

    .experience-preview {
        grid-template-columns:
            1fr;
    }


    .journey-rail__header {
        flex-direction:
            column;
    }


    .journey-rail__steps {
        grid-template-columns:
            1fr;

        gap:
            var(--space-5);
    }


    .journey-step {
        display:
            grid;

        grid-template-columns:
            auto minmax(0, 1fr);

        column-gap:
            var(--space-3);

        padding:
            0;
    }


    .journey-step:not(:last-child)::after {
        left:
            0.65rem;

        top:
            1.4rem;

        bottom:
            calc(-1 * var(--space-5));

        width:
            2px;

        height:
            auto;
    }


    .journey-step__label,
    .journey-step__description {
        grid-column:
            2;

        margin-top:
            0;
    }


    .journey-step__description {
        margin-top:
            var(--space-1);
    }


    .progress-ring-card {
        grid-template-columns:
            1fr;

        justify-items:
            start;
    }

}


/* =====================================================
   INTERACTION STATES
   ===================================================== */


/* -----------------------------------------------------
   Journey preview selection
   ----------------------------------------------------- */


.journey-step__button {
    display:
        block;

    width:
        100%;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.journey-step__button:focus-visible {
    border-radius:
        var(--radius-md);

    outline:
        3px solid transparent;

    box-shadow:
        var(--focus-ring);
}


.journey-step[data-preview-selected="true"]
.journey-step__label {
    color:
        var(--color-violet-700);
}


.journey-step[data-preview-selected="true"]
.journey-step__marker {
    box-shadow:
        0 0 0 5px
        var(--color-violet-100);
}


.journey-rail__detail {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        var(--space-6);

    margin-top:
        var(--space-8);

    padding:
        var(--space-5);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-neutral-25);
}


.journey-rail__detail strong {
    color:
        var(--color-text-strong);

    font-size:
        var(--text-lg);
}


.journey-rail__detail p:not(.component-kicker) {
    margin:
        var(--space-2)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);
}


.journey-rail__authority {
    max-width:
        15rem;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);

    text-align:
        right;
}


/* -----------------------------------------------------
   Confi guide controls
   ----------------------------------------------------- */


.intelligent-guide__body {
    min-width:
        0;
}


.intelligent-guide__heading {
    display:
        flex;

    align-items:
        start;

    justify-content:
        space-between;

    gap:
        var(--space-4);
}


.intelligent-guide__toggle {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    min-height:
        2.25rem;

    padding:
        var(--space-2)
        var(--space-3);

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        var(--radius-pill);

    background:
        rgba(255, 255, 255, 0.08);

    color:
        var(--color-white);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-semibold);

    cursor:
        pointer;
}


.intelligent-guide__toggle:hover {
    background:
        rgba(255, 255, 255, 0.14);
}


.intelligent-guide__authority {
    margin:
        var(--space-4)
        0 0;

    padding-top:
        var(--space-4);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);

    color:
        #9fb0c5;

    font-size:
        var(--text-xs);
}


[data-guide-content][hidden] {
    display:
        none;
}


@media (max-width: 47.999rem) {

    .journey-step__button {
        display:
            grid;

        grid-template-columns:
            auto minmax(0, 1fr);

        column-gap:
            var(--space-3);
    }


    .journey-step__content {
        grid-column:
            2;
    }


    .journey-rail__detail {
        align-items:
            start;

        flex-direction:
            column;
    }


    .journey-rail__authority {
        max-width:
            none;

        text-align:
            left;
    }


    .intelligent-guide__heading {
        flex-direction:
            column;
    }

}


/* =====================================================
   REAL CONFIVATE PRODUCT HOME
   ===================================================== */


.product-home {
    display:
        grid;

    gap:
        var(--space-20);
}


.product-hero {
    max-width:
        64rem;

    padding:
        var(--space-8)
        0
        var(--space-4);
}


.product-hero h1 {
    max-width:
        14ch;

    margin:
        0;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-4xl);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        -0.04em;

    line-height:
        var(--leading-tight);
}


.product-hero__lead {
    max-width:
        48rem;

    margin:
        var(--space-6)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-lg);
}


.product-hero__actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--space-4);

    margin-top:
        var(--space-8);
}


.product-hero__secondary {
    display:
        inline-flex;

    min-height:
        3rem;

    align-items:
        center;

    padding:
        var(--space-3)
        var(--space-5);

    color:
        var(--color-text-strong);

    font-weight:
        var(--weight-semibold);

    text-decoration:
        none;
}


.product-section {
    scroll-margin-top:
        calc(
            var(--header-height)
            + var(--space-6)
        );
}


.product-section__heading {
    max-width:
        48rem;

    margin-bottom:
        var(--space-8);
}


.product-section__title {
    margin:
        0;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-3xl);

    line-height:
        var(--leading-heading);
}


.participant-experience-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        var(--space-4);
}


.participant-experience-card {
    padding:
        var(--space-6);
}


.participant-experience-card__number {
    display:
        inline-flex;

    margin-bottom:
        var(--space-6);

    color:
        var(--color-violet-600);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.08em;
}


.participant-experience-card h3 {
    margin:
        0;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-lg);

    line-height:
        var(--leading-heading);
}


.participant-experience-card p {
    margin:
        var(--space-3)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);
}


.roadmap-preview {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-4);
}


.locked-roadmap-tile__status {
    margin:
        var(--space-5)
        0 0;

    padding-top:
        var(--space-4);

    border-top:
        1px solid
        var(--color-border);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-semibold);
}


@media (max-width: 63.999rem) {

    .participant-experience-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 47.999rem) {

    .product-home {
        gap:
            var(--space-12);
    }


    .product-hero {
        padding-top:
            var(--space-4);
    }


    .participant-experience-grid,
    .roadmap-preview {
        grid-template-columns:
            1fr;
    }

}