/* The public guided tour (/tour/).
 *
 * Self-contained on purpose. Tailwind here is compiled from a content glob, so a
 * class written only in this feature would silently not exist until somebody
 * re-ran `make css` — see tailwind/studio.config.js. Everything the tour needs is
 * therefore plain CSS in this file, the same arrangement as marketing-pages.css
 * and resources.css.
 *
 * The palette is pinned dark and does not follow the visitor's theme toggle: the
 * captures underneath are dark-theme captures of the product, and light chrome
 * wrapped around dark screenshots reads as a rendering bug rather than a choice.
 * Values are the --dash-* tokens from platform.css, written out.
 */

.tour,
.tour-fallback,
.tour-transcript {
    --t-bg: #0a0a0a;
    --t-rail: #080808;
    --t-surface: #141414;
    --t-surface-2: #1a1a1a;
    --t-border: #2a2a2a;
    --t-text: #f5f5f5;
    --t-text-2: #a1a1aa;
    --t-text-3: #71717a;
    --t-accent: #ef4444;
    --t-rail-w: 268px;
    color: var(--t-text);
}

/* Every display rule below is a class, and a class beats the user agent's
   [hidden] rule — without this the shell would still cover the page with
   JavaScript off, and buttons would not hide when the engine hides them. */
[hidden] { display: none !important; }

/* ============================================================ shell */

/* One screen tall, in the normal flow — not a fixed layer over the page. The
   transcript below it is the only real text this page has; hiding it behind a
   covering overlay left a rendered page of about a hundred words, which is how
   an eleven-thousand-word walkthrough gets indexed as a thin one. Scrolling
   past the tour to read it is also just how a page works. */
.tour {
    position: relative;
    height: 100dvh;
    display: grid;
    grid-template-columns: var(--t-rail-w) 1fr;
    background: var(--t-bg);
}

.tour-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ============================================================ rail */

.tour-rail {
    display: flex;
    flex-direction: column;
    background: var(--t-rail);
    border-right: 1px solid var(--t-border);
    padding: 20px 16px 16px;
    overflow-y: auto;
}

.tour-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--t-text);
    margin-bottom: 22px;
}

.tour-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, .13);
    border: 1px solid rgba(239, 68, 68, .3);
    color: var(--t-accent);
    flex: 0 0 auto;
}

.tour-brand-mark svg { width: 18px; height: 18px; }

.tour-brand-name {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.2px;
}

.tour-rail-lede {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t-text-3);
    margin-bottom: 10px;
}

.tour-chapters { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }

.tour-ch {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 9px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--t-text-2);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    transition: background .18s, color .18s;
}

.tour-ch:hover { background: rgba(255, 255, 255, .04); color: var(--t-text); }

.tour-ch.is-current {
    background: rgba(239, 68, 68, .1);
    color: var(--t-text);
    box-shadow: inset 2px 0 0 var(--t-accent);
}

.tour-ch.is-done { color: var(--t-text-3); }

.tour-ch-title { display: block; font-weight: 600; }

.tour-ch-meta {
    display: block;
    font-size: 11.5px;
    color: var(--t-text-3);
    margin-top: 2px;
}

.tour-ch.is-current .tour-ch-meta { color: var(--t-accent); }

.tour-rail-foot { padding-top: 16px; border-top: 1px solid var(--t-border); margin-top: 16px; }

.tour-rail-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--t-text-3);
    text-decoration: none;
}

.tour-rail-link:hover { color: var(--t-text-2); text-decoration: underline; }

/* ============================================================ buttons */

.tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: var(--t-surface);
    color: var(--t-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}

.tour-btn:hover { background: var(--t-surface-2); border-color: #3a3a3a; }
.tour-btn-primary { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.tour-btn-primary:hover { background: #dc2626; border-color: #dc2626; }
.tour-btn-block { display: flex; width: 100%; }
.tour-btn-lg { padding: 14px 30px; font-size: 15.5px; }

/* ============================================================ stage */

.tour-stage {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--t-bg);
    min-height: 0;
}

.tour-shots { position: absolute; inset: 0; }

/* Off on a desktop, where the stage is close to the shot's own shape and there
   is nothing to fill. */
.tour-backdrop { display: none; }

/* One layer per shot, built once; stepping only swaps opacity and transform, so
   nothing is ever decoded mid-move. */
.tour-shot {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform-origin: 0 0;
    will-change: transform, opacity;
    transition: opacity .28s ease;
}

.tour-shot.is-live { opacity: 1; }
.tour-shot img { display: block; width: 100%; height: 100%; }

/* A shot that has not been captured yet still has to be reviewable. */
.tour-shot-missing {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background:
        repeating-linear-gradient(45deg, #101010 0 14px, #141414 14px 28px);
    border: 1px dashed #333;
    color: var(--t-text-3);
    font-size: 13px;
    text-align: center;
    padding: 24px;
}

.tour-shot.is-missing .tour-shot-missing { display: flex; }
.tour-shot.is-missing img { visibility: hidden; }

/* ============================================================ ring + nudge */

/* The scrim is the ring's own box-shadow: one element, so the hole and the dim
   can never drift apart during a move. */
.tour-ring {
    position: absolute;
    border: 2px solid rgba(239, 68, 68, .95);
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(6, 6, 6, .36), 0 0 22px rgba(239, 68, 68, .38);
    /* No pulse and no pointer: this marks the thing being described, and anything
       that throbs under a cursor is read as a button. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, left .55s cubic-bezier(.4, 0, .2, 1),
                top .55s cubic-bezier(.4, 0, .2, 1), width .55s cubic-bezier(.4, 0, .2, 1),
                height .55s cubic-bezier(.4, 0, .2, 1);
}

.tour-ring.is-on { opacity: 1; }

/* ============================================================ scenes */

/* Live overlays sit in the shot's own coordinate space; tour-scenes.js positions
   its children in percentages so one transform moves picture and props together. */
/* The layer itself never takes a click — only the props inside it opt in. A
   transparent box the size of the whole shot would otherwise swallow the ring
   and the Show-me button underneath it. */
.tour-scene {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================ cards */

.tour-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--t-bg);
    padding: 40px;
    z-index: 5;
}

.tour-card-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    top: -300px;
    left: -180px;
    background: radial-gradient(circle, rgba(239, 68, 68, .16) 0%, rgba(239, 68, 68, 0) 62%);
    pointer-events: none;
}

.tour-card-mark {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(239, 68, 68, .3);
    color: var(--t-accent);
    margin-bottom: 26px;
}

.tour-card-mark svg { width: 36px; height: 36px; }

.tour-card-h {
    position: relative;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 700;
    letter-spacing: -1.4px;
    line-height: 1.06;
}

.tour-card-p {
    position: relative;
    font-size: clamp(15px, 1.5vw, 20px);
    color: var(--t-text-2);
    margin: 16px 0 30px;
    max-width: 620px;
    line-height: 1.5;
}

/* Offered on the opening card to somebody who has been here before. */
.tour-resume {
    margin-top: 4px;
    padding: 9px 16px;
    min-height: 40px;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    background: var(--t-surface);
    color: var(--t-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tour-resume:hover { background: var(--t-surface-2); color: var(--t-text); }

.tour-card-note {
    position: relative;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--t-text-3);
}

/* ============================================================ caption bar */

.tour-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 28px 20px;
    background: var(--t-bg);
    border-top: 1px solid var(--t-border);
}

.tour-caption { min-width: 0; }

.tour-caption-num {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t-accent);
    background: rgba(239, 68, 68, .11);
    border: 1px solid rgba(239, 68, 68, .26);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.tour-caption-h {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.15;
}

.tour-caption-p {
    font-size: 14.5px;
    color: var(--t-text-2);
    margin-top: 5px;
    max-width: 74ch;
    line-height: 1.45;
}

.tour-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.tour-ctl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    color: var(--t-text-2);
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.tour-ctl:hover:not(:disabled) { background: var(--t-surface-2); color: var(--t-text); }
.tour-ctl:disabled { opacity: .35; cursor: default; }
.tour-ctl svg { width: 18px; height: 18px; }
.tour-ctl-wide { width: auto; padding: 0 15px; }
.tour-ctl-label { font-size: 13px; font-weight: 600; }

/* One icon at a time; aria-pressed is the single source of which. */
.tour-ctl .tour-ico-off { display: none; }
.tour-ctl[aria-pressed="true"] .tour-ico-on { display: none; }
.tour-ctl[aria-pressed="true"] .tour-ico-off { display: block; }
.tour-ctl[aria-pressed="true"] { color: var(--t-text-3); }

.tour-progress { flex: 0 0 auto; height: 3px; background: var(--t-border); }

.tour-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--t-accent);
    box-shadow: 0 0 12px rgba(239, 68, 68, .7);
    transition: width .35s ease;
}

.tour-loading {
    position: absolute;
    inset: 0;
    background: var(--t-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.tour-loading.is-on { opacity: 1; }

/* ============================================================ story mode */

/* Declared before the media query that turns them on, or this rule would win at
   every width and the pips would never show. */
.tour-pips { display: none; }

/* Phones get the same script cropped to the region under discussion — a desktop
   dashboard scaled to 390px wide is unreadable, and pinch-to-zoom is not a
   guided experience. */
@media (max-width: 820px) {
    .tour {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .tour-rail {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-right: 0;
        border-bottom: 1px solid var(--t-border);
        padding: 10px 14px;
        overflow: visible;
    }

    .tour-brand { margin-bottom: 0; }
    .tour-brand-name { font-size: 13.5px; }
    .tour-rail-lede,
    .tour-chapters { display: none; }

    /* The trial button does not fit next to the brand and the transcript link on
       a 390px bar, and it is already the closing card's one action and the foot
       of the transcript. The transcript has no second home, so that is the one
       that stays. */
    .tour-rail-foot .tour-btn-primary { display: none; }

    /* What is left of the rail's footer becomes the right-hand end of the top
       bar rather than disappearing with the chapter list. */
    .tour-rail-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        border-top: 0;
        flex: 0 0 auto;
    }

    .tour-rail-link {
        margin-top: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 4px;
        white-space: nowrap;
    }

    .tour-stage { border-radius: 0; }

    .tour-backdrop {
        display: block;
        position: absolute;
        inset: -8%;                 /* over-sized so the blur has no soft edge */
        background-position: center;
        background-size: cover;
        filter: blur(26px) saturate(.75) brightness(.5);
        opacity: .5;
        transform: translateZ(0);   /* keep the blur off the main thread */
        pointer-events: none;
    }

    .tour-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 18px 20px;
    }

    .tour-caption-p { font-size: 14px; }
    .tour-controls { justify-content: space-between; }
    .tour-ctl { width: 52px; height: 48px; }
    .tour-ctl-wide { flex: 1 1 auto; }

    /* Pips replace the chapter rail: position at a glance, no scrolling. */
    .tour-pips {
        display: flex;
        gap: 3px;
        padding: 8px 18px 0;
        background: var(--t-bg);
    }

    .tour-pips > i {
        flex: 1 1 0;
        height: 3px;
        border-radius: 2px;
        background: var(--t-border);
    }

    .tour-pips > i.is-done { background: rgba(239, 68, 68, .45); }
    .tour-pips > i.is-current { background: var(--t-accent); }
}


/* ============================================================ fallback */

.tour-fallback { padding: 80px 24px 40px; text-align: center; background: var(--t-bg); }
.tour-fallback-inner { max-width: 640px; margin: 0 auto; }

.tour-fallback-h {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
}

.tour-fallback-p { color: var(--t-text-2); margin: 14px 0 26px; line-height: 1.55; }

/* ============================================================ transcript */

.tour-transcript { background: var(--t-bg); padding: 64px 24px 96px; }
.tour-transcript-inner { max-width: 760px; margin: 0 auto; }

/* The static intro is for visitors without JavaScript; with the engine running
   the tour itself says all of it. The transcript stays. */
.tour-live .tour-fallback { display: none; }

/* Each heading is a way back into the tour at that exact step. */
.tour-live .tour-tc-step-h { cursor: pointer; }
.tour-live .tour-tc-step-h:hover { color: var(--t-accent); }

.tour-transcript-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: var(--t-surface);
    color: var(--t-text-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.tour-transcript-back:hover { background: var(--t-surface-2); color: var(--t-text); }
.tour-transcript-back svg { width: 16px; height: 16px; }

.tour-transcript-h {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.8px;
}

.tour-transcript-lede { color: var(--t-text-2); margin: 12px 0 40px; line-height: 1.6; }
.tour-tc { margin-bottom: 44px; }

.tour-tc-h {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 21px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--t-border);
}

.tour-tc-blurb { color: var(--t-text-3); font-size: 14px; margin: 10px 0 22px; }
.tour-tc-step { margin-bottom: 26px; }
.tour-tc-step-h { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.tour-tc-body { color: var(--t-text-2); font-size: 14.5px; line-height: 1.55; }

.tour-tc-narration {
    color: var(--t-text-3);
    font-size: 14.5px;
    line-height: 1.65;
    margin-top: 8px;
    padding-left: 14px;
    border-left: 2px solid var(--t-border);
}

.tour-transcript-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }

/* ============================================================ reduced motion */

/* Movement is the whole grammar here, so honouring the preference means cutting
   between framings rather than removing them. */
@media (prefers-reduced-motion: reduce) {
    .tour-shot,
    .tour-ring,
    .tour-scene,
    .tour-progress > i { transition: none !important; }
}