/*
 * Product walkthrough — full-window chrome around a captured portal screen.
 *
 * The screen is the page here, not a panel inside one: a fixed top bar, the
 * screen filling everything between, and a fixed bottom bar. Nothing in this
 * file styles the screen itself — that is a real portal page in an iframe,
 * carrying its own stylesheet. Keep the two apart so a portal theme change can
 * never be "fixed" from here.
 */

/* The site's own navbar and footer would compete with a full-window screen,
   so this page hides them and owns the viewport. */
body:has(.wt) {
    overflow: hidden;
}

/* Direct children only. The site's navbar and footer are both children of
   body; the walkthrough's own bottom bar is also a <footer>, so an unscoped
   `footer` rule here hides the walkthrough's navigation along with the site's. */
body:has(.wt) > .navbar,
body:has(.wt) > footer {
    display: none;
}

.wt {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #0f1c26;
    z-index: 900;
}

/* --- Bars ---------------------------------------------------------------- */

.wt-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--brand-dark);
    color: var(--white);
    min-width: 0;
}

.wt-bar-top {
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.wt-bar-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.wt-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.wt-exit:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

/* Says what this is before anyone can mistake it for a live account. */
.wt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-accent);
    color: #04212c;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Which of the two products is on screen.
 *
 * This is the badge that carries the meaning, so it takes the accent and the
 * generic "product preview" wording moves into the note beside it. The two
 * tracks are told apart by colour as well as by words: a visitor who has
 * clicked between them should be able to see at a glance which one they are
 * in without re-reading the label. */
.wt-badge-track {
    background: var(--brand-accent);
    color: #04212c;
}

.wt[data-track="partner"] .wt-badge-track {
    background: var(--brand-primary);
    color: var(--white);
}

.wt-badge-note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Step tabs ----------------------------------------------------------- */

.wt-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.07);
    padding: 0.25rem;
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.wt-tabs::-webkit-scrollbar {
    display: none;
}

.wt-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}

.wt-tab:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.09);
}

.wt-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wt-tab.is-current {
    background: var(--white);
    color: var(--brand-dark);
    font-weight: 600;
}

.wt-tab.is-current .wt-tab-num {
    background: var(--brand-primary);
    color: var(--white);
}

.wt-cta {
    background: var(--brand-accent);
    color: #04212c;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.wt-cta:hover {
    background: var(--white);
}

/* --- The screen ---------------------------------------------------------- */

.wt-stage {
    position: relative;
    background: var(--white);
    min-height: 0;
    /* The grid row is 1fr; without this the iframe would push the row taller
       than the viewport and the bottom bar would fall off the screen. */
}

.wt-screen-wrap {
    width: 100%;
    height: 100%;
}

.wt-screen {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--white);
}

.wt-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    background: var(--white);
    color: var(--text-light);
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
}

.wt-loading.is-done {
    opacity: 0;
    pointer-events: none;
}

.wt-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: wt-spin 0.7s linear infinite;
}

@keyframes wt-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Bottom bar ---------------------------------------------------------- */

.wt-bar-bottom {
    justify-content: space-between;
    gap: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.wt-caption-wrap {
    text-align: center;
    min-width: 0;
    flex: 1 1 auto;
}

.wt-step-short {
    display: none;
}

.wt-step-of {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent);
    font-weight: 700;
}

.wt-caption {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
    max-width: 60ch;
    margin-inline: auto;
}

/* A real file the product made, offered beside the screen that made it. */
.wt-artifact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    padding: 0.32rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-accent);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wt-artifact:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-accent);
}

/* The phone form of the same link: a band under the screen, where the AI
   step's cue already lives. Hidden wherever the bottom-bar pill has room. */
.wt-artifact-band {
    display: none;
}

@media (max-width: 760px) {
    .wt-artifact {
        display: none;
    }

    .wt-artifact-band {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        background: var(--brand-accent);
        color: #04212c;
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        /* The stage scrolls on phones and the band's natural place is past
           its fold — pinned to the stage's bottom edge it is visible from the
           first frame, whatever the scroll position. */
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
}

.wt-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: var(--white);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wt-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.wt-nav-next {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.wt-nav-next:hover {
    background: var(--brand-medium);
    border-color: var(--brand-medium);
}

/* --- Click-guard toast --------------------------------------------------- */

.wt-toast {
    position: absolute;
    left: 50%;
    bottom: 5.5rem;
    transform: translate(-50%, 200%);
    background: #04212c;
    color: var(--white);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    z-index: 20;
    max-width: min(34rem, calc(100vw - 2rem));
    /* Hidden by opacity rather than by being pushed off-screen: the toast sits
       above the bottom bar, so any translate large enough to clear the viewport
       depends on its own height and left it peeking out at rest.
       Only transform and opacity animate — transitioning `all` would also cover
       visibility, which makes the toast unreadable to anything measuring it
       mid-flight. */
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.75rem);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.wt-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.wt-toast-cta {
    background: var(--brand-accent);
    color: #04212c;
    border: 0;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
}

.wt-toast-cta:hover {
    background: var(--white);
}

/* --- Narrow screens ------------------------------------------------------ */

/* Tablets have room for the step names; they just cannot sit on the same row
   as the badge and the call to action. Giving the tabs their own full-width
   row keeps them labelled instead of reducing them to bare numbers. */
@media (max-width: 1100px) {
    .wt-badge-note {
        display: none;
    }

    .wt-bar-top {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .wt-tabs {
        order: 3;
        width: 100%;
    }

    .wt-tab {
        padding: 0.4rem 0.7rem;
    }
}

@media (max-width: 760px) {
    .wt-tab {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    .wt-caption {
        display: none;
    }

    .wt-bar-bottom {
        gap: 0.6rem;
    }

    .wt-nav-btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.78rem;
        /* Buttons carry step titles, and "The psychometric report" is wide
           enough to shove the step counter under its neighbour. Long titles
           trail off; the arrow and the tap target stay. */
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* The step line sat between the two buttons and wrapped to four lines on a
       phone. It keeps one line and gives way before the buttons do. */
    .wt-caption-wrap {
        flex: 0 1 auto;
        min-width: 0;
    }

    .wt-step-of {
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        white-space: nowrap;
        margin: 0;
    }

    .wt-step-full {
        display: none;
    }

    .wt-step-short {
        display: inline;
    }

    /* Tighter chrome: the bars were taking 190px of an 812px phone screen
       before the product got any of it. */
    .wt-bar {
        padding: 0.5rem 0.7rem;
        gap: 0.6rem;
    }

    .wt-badge {
        font-size: 0.62rem;
        padding: 0.25rem 0.5rem;
    }

    .wt-cta {
        padding: 0.45rem 0.7rem;
        font-size: 0.76rem;
    }

    .wt-exit {
        width: 1.75rem;
        height: 1.75rem;
    }

    .wt-tabs {
        /* Scrolls rather than wrapping; snap so a step never sits half shown. */
        justify-content: flex-start;
        scroll-snap-type: x proximity;
    }

    .wt-tab {
        scroll-snap-align: start;
    }
}

/* --- Authored concept steps ---------------------------------------------
   A concept step is our own page rather than a captured portal screen, so it
   sits on the site's palette and scrolls inside the stage — the stage is a
   fixed grid row, so the scrolling has to happen in here, not on the body. */

.wt-stage.is-concept {
    background: #f7f9fb;
    overflow: hidden;
}

.wt-concept-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cx {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
}

.cx-head {
    max-width: 46rem;
    margin-bottom: 2.5rem;
}

.cx-eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-medium);
    font-weight: 700;
}

.cx-head h2 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.2;
    color: var(--brand-dark);
}

.cx-lede {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* The pipeline */

.cx-flow {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    counter-reset: none;
}

.cx-node {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.1rem;
}

/* The connector that makes it read as a sequence rather than four cards. */
.cx-node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.05rem;
    right: -0.75rem;
    width: 0.75rem;
    height: 2px;
    background: var(--border);
}

.cx-node-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.cx-node h3 {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
    color: var(--brand-dark);
    line-height: 1.3;
}

.cx-node p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Sources vs prohibitions */

.cx-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.cx-panel {
    border-radius: 12px;
    padding: 1.4rem 1.4rem 1.5rem;
    border: 1px solid var(--border);
    background: var(--white);
}

.cx-panel h3 {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    color: var(--brand-dark);
}

.cx-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.8rem;
}

.cx-panel li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.cx-panel li strong {
    color: var(--brand-dark);
    font-weight: 600;
}

.cx-panel li::before {
    position: absolute;
    left: 0;
    top: -0.05rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.cx-panel-yes {
    border-top: 3px solid var(--brand-accent);
}

.cx-panel-yes li::before {
    content: "✓";
    color: #2b8a5a;
}

.cx-panel-no {
    border-top: 3px solid var(--brand-pink);
}

.cx-panel-no li::before {
    content: "✕";
    color: var(--brand-pink);
}

.cx-foot {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-light);
    max-width: 52rem;
}

@media (max-width: 900px) {
    .cx-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .cx-node:nth-child(2)::after {
        display: none;
    }

    .cx-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .cx-flow {
        grid-template-columns: 1fr;
    }

    .cx-node::after {
        display: none !important;
    }

    .cx {
        padding: 1.75rem 1.1rem 2.5rem;
    }
}

/* --- The architecture diagram -------------------------------------------
   Inline SVG rather than an image: it scales to any width, stays crisp, and
   the text inside it is real text a screen reader can announce. */

.cx-diagram {
    margin: 0 0 2.5rem;
    padding: 1.5rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, #f2f7fb 0%, #eaf2f8 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.cx-diagram svg {
    display: block;
    max-width: 46rem;
    height: auto;
    margin: 0 auto;
}

.cx-diagram figcaption {
    margin: 1.1rem auto 0;
    max-width: 46rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-light);
    text-align: center;
}

/* Type inside the diagram. Sized in SVG user units, so it scales with the
   drawing rather than with the page. */
.cx-d-lead {
    fill: #fff;
    font-family: var(--font-heading), sans-serif;
    font-size: 19px;
    font-weight: 600;
}

.cx-d-title {
    fill: #0b2b3a;
    font-family: var(--font-heading), sans-serif;
    font-size: 17px;
    font-weight: 600;
}

.cx-d-sub {
    fill: #5b6b78;
    font-family: var(--font-body), sans-serif;
    font-size: 13.5px;
}

.cx-d-note {
    fill: #7b8b98;
    font-family: var(--font-body), sans-serif;
    font-size: 12.5px;
    font-style: italic;
}

/* --- Counsellor explanation rail ----------------------------------------
   Sits beside the chat on the AI step, so the explanation and the thing it
   explains are on screen together. It replaced a separate tour step, which
   asked people to read the architecture before seeing an answer. */

.wt-stage.has-rail {
    display: grid;
    grid-template-columns: 1fr minmax(20rem, 26rem);
}

.wt-stage.has-rail .wt-screen,
.wt-loading {
    grid-column: 1;
    grid-row: 1;
}

.wt-rail {
    grid-column: 2;
    grid-row: 1;
    background: #0b2b3a;
    color: rgba(255, 255, 255, 0.82);
    padding: 1.75rem 1.5rem 2rem;
    overflow-y: auto;
    /* The stage is a fixed grid row, so the scrolling has to live in here. */
    min-height: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.wt-rail-kicker {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-accent);
    font-weight: 700;
}

.wt-rail-lede h2 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--white);
}

.wt-rail-lede p {
    margin: 0 0 0.75rem;
    font-size: 0.86rem;
    line-height: 1.65;
}

.wt-rail-lede strong {
    color: var(--brand-accent);
    font-weight: 600;
}

.wt-rail-steps {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.wt-rail-steps li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.wt-rail-n {
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.wt-rail-steps h3 {
    margin: 0.1rem 0 0.25rem;
    font-size: 0.92rem;
    color: var(--white);
}

.wt-rail-steps p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.wt-rail-compare {
    display: grid;
    gap: 0.6rem;
    margin: 1.5rem 0;
}

.wt-rail-col {
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.wt-rail-col.is-ours {
    background: rgba(0, 180, 216, 0.11);
    border-color: rgba(0, 180, 216, 0.35);
}

.wt-rail-col-h {
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}

.wt-rail-col.is-ours .wt-rail-col-h {
    color: var(--brand-accent);
}

.wt-rail-col p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
}

.wt-rail-cta {
    width: 100%;
    background: var(--brand-accent);
    color: #04212c;
    border: 0;
    border-radius: 9px;
    padding: 0.7rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.wt-rail-cta:hover {
    background: var(--white);
}

/* Below this width the rail would squeeze the portal screen into a column
   too narrow to read, so the two stack and the stage scrolls as one. */
/* Below this the rail would squeeze the portal screen into a column too narrow
   to read, so the two stack and the stage scrolls as one column.

   Deliberately NOT a grid here. The stage is a fixed-height grid row, so grid
   rows get sized to fit that height — an `auto` row for the rail collapsed to
   whatever was left (measured: 237px for ~1200px of content), and the rail's
   text ran out of its box and under the bottom bar. Block flow lets each part
   take its natural height and hands the scrolling to the stage. */
/* On a wide screen the product is shown at its own size and needs no caption.
   Declared before the media query: at equal specificity the later rule wins,
   and with this below it the caption stayed hidden on every screen size. */
.wt-shot-note {
    display: none;
}

/* --- Narrow screens: show the desktop product, scaled ---------------------

   The portal is a desktop web application. Squeezing it into a 375px frame
   made it reflow into its own cramped mobile layout — controls stacked on top
   of each other, and the message box's placeholder clipped mid-sentence. It
   read as a broken product rather than a preview of a real one.

   So on narrow screens the screen is RENDERED AT DESKTOP WIDTH and scaled to
   fit, the way a product tour shows a laptop. Proportions, spacing and every
   label stay exactly as a real user sees them; only the size changes. Clicks
   still map correctly through the transform, so the click-guard keeps working.

   The wrapper reserves the scaled height, because a transform does not affect
   layout — without it the rail would slide up underneath the screen. */
@media (max-width: 1180px) {

    /* Both selectors, because a media query adds no specificity — plain
       `.wt-stage` loses to `.wt-stage.has-rail` from the desktop rules. */
    .wt-stage,
    .wt-stage.has-rail {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The scale is set by walkthrough.js, not calc(): CSS cannot divide a
       length by a length to get the unitless number transform: scale() needs,
       and trying produced an invalid value that collapsed the frame to
       nothing. JS also handles rotation and resize honestly. */
    .wt-screen-wrap {
        width: 100%;
        /* clip, NOT hidden — and the difference is a real bug, not a nicety.
           `transform` does not change layout, so the iframe below is still
           1280 x ~1270 as far as the box model is concerned while showing at
           0.6 of that. `overflow: hidden` therefore makes this box a scroll
           container holding ~500px it will not display — and anything inside
           the captured page that takes focus or scrolls itself into view
           scrolls the ancestors too, across the frame boundary, silently
           dragging the screen up inside its own window. That is exactly what
           the partner course finder did: select2 focuses its search field on
           init, this box scrolled 216px, and the visitor got a screen with its
           header and filters cut off the top and a band of white at the
           bottom. `clip` is not a scroll container at all, so it cannot
           happen — on any step, from any trigger.

           walkthrough.js pins scrollTop as well, for browsers that predate
           `overflow: clip`. */
        overflow: hidden;
        overflow: clip;
        /* Height is set alongside --wt-scale; this is the pre-script fallback
           so the frame is never zero-height. */
        height: 26rem;
    }

    .wt-screen {
        width: var(--wt-shot-w, 1280px);
        height: var(--wt-shot-h, 1420px);
        transform: scale(var(--wt-scale, 1));
        transform-origin: top left;
    }

    .wt-stage.has-rail .wt-loading {
        position: absolute;
    }

    .wt-rail {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        overflow: visible;
        height: auto;
    }

    /* Says why the product looks small, so it reads as deliberate. */
    .wt-stage.has-rail .wt-shot-note {
        display: none;
    }

    .wt-shot-note {
        display: block;
        /* It is a <p>; its default margin let the white stage show through as
           a band between the caption and the explanation below. */
        margin: 0;
        padding: 0.6rem 1rem;
        background: #0b2b3a;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.72rem;
        line-height: 1.5;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
}


.wt-rail-note {
    margin: 1.25rem 0 1.5rem;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--brand-accent);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 8px 8px 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.wt-rail-note strong {
    color: var(--white);
    font-weight: 600;
}

/* --- "See how it works" cue ---------------------------------------------
   Narrow screens only. There the conversation takes the whole screen and the
   explanation sits below it, so something has to say it is there — otherwise
   the best argument on the page is hidden under a fold nobody suspects. */

.wt-rail-jump {
    display: none;
}

@media (max-width: 1180px) {
    .wt-rail-jump {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        background: var(--brand-accent);
        color: #04212c;
        border: 0;
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        /* A band of its own between the screen and the explanation, so it can
           never sit on top of the chat's message box. */
        position: relative;
        z-index: 2;
    }

    .wt-rail-jump svg {
        animation: wt-nudge 1.8s ease-in-out infinite;
    }

}

@keyframes wt-nudge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wt-rail-jump svg {
        animation: none;
    }
}

/* --- The screen as a window (wide screens only) ---------------------------
 *
 * The tour used to fill the whole viewport with the captured screen bleeding
 * edge to edge. That reads as "you are now inside the product" when the truth
 * is "here is a picture of the product" — visitors could not tell which, and
 * the only way out was a small ✕ in the corner.
 *
 * So on screens with room to spare, the product sits in a window on a dark
 * backdrop, and the tour's own furniture — tabs, caption, prev/next — stays
 * outside it in the bars. The window holds only the product; everything
 * around it is plainly us talking about it.
 *
 * Deliberately NOT applied below 1181px: on a phone a title bar is ~50px
 * stolen from an already tight viewport, and there is no page behind to see.
 * That is also the exact breakpoint below which walkthrough.js takes over
 * sizing, so this never touches the scaling maths.
 */
.wt-screen-bar {
    display: none;
}

@media (min-width: 1181px) {
    .wt-stage {
        background: #0d1b24;
        padding: 1.5rem;
    }

    .wt-stage.has-rail {
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .wt-screen-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1360px;
        margin: 0 auto;
        background: var(--white);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    }

    .wt-screen-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: none;
        padding: 0.55rem 0.9rem;
        background: #F4F7FA;
        border-bottom: 1px solid var(--border);
    }

    .wt-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #D8DDE1;
        flex: none;
    }

    /* Centred against the bar, not against the dots, so it reads as a title. */
    .wt-screen-bar-label {
        margin: 0 auto;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-light);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The iframe takes what the title bar leaves. */
    .wt-screen {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    /* The loading panel has to sit on the window, not on the backdrop. */
    .wt-loading {
        inset: 1.5rem;
        border-radius: 12px;
    }

    /* Beside the window on the AI steps: a companion panel, not a wall. */
    .wt-rail {
        border-left: 0;
        border-radius: 12px;
    }
}