/* ========================================================================
   tw-demo-clone.css
   Standalone slice of the TradeWatch product film (scenes 1–3) for the
   landing-page autoplay section. Source: tradewatch.html inline styles.
   - All scroll-pin / film-track / .tw-act4-intro rules dropped.
   - Mobile blocks pared down to essentials.
   - Wrapper styles (.kl-twdemo*) layer the navy hero treatment around
     the cream stage.
   ======================================================================== */

/* ---------- TradeWatch design tokens (scoped to the demo wrapper) ---------- */
.kl-twdemo {
    --tw-navy: #0a2f52;
    --tw-navy-deep: #061f38;
    --tw-cream: #eeebe3;
    --tw-ink: rgba(10, 47, 82, 0.90);
    --tw-ink-strong: rgba(10, 47, 82, 0.95);
    --tw-ink-body:   rgba(10, 47, 82, 0.82);
    --tw-ink-mid:    rgba(10, 47, 82, 0.62);
    --tw-ink-dim:    rgba(10, 47, 82, 0.52);
    --tw-rule:       rgba(10, 47, 82, 0.12);
    --tw-red:        #db4a2b;

    --tw-glass-window-bg: rgba(255, 255, 255, 0.45);
    --tw-glass-panel-bg:  rgba(255, 255, 255, 0.86);
    --tw-glass-panel-bg-2: rgba(255, 255, 255, 0.94);
    --tw-glass-border:    rgba(255, 255, 255, 0.75);
    --tw-glass-divider:   rgba(10, 47, 82, 0.10);
    --tw-glass-blur:      30px;
    --tw-glass-shadow:    0 40px 90px -28px rgba(10, 47, 82, 0.32);
    --tw-glass-card-shadow: 0 18px 40px -22px rgba(10, 47, 82, 0.25);

    --tw-conf-high:    #1f7b54;
    --tw-conf-high-bg: rgba(31, 123, 84, 0.12);
    --tw-conf-med:     #b07512;
    --tw-conf-med-bg:  rgba(176, 117, 18, 0.12);
    --tw-slate:        #94a3b8;

    --tw-rail-bg:      rgba(255, 255, 255, 0.36);
    --tw-rail-divider: rgba(10, 47, 82, 0.08);

    --tw-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --tw-mono:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Section wrapper on landing page ---------- */
.kl-twdemo {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: transparent;   /* lets the fixed grid canvas show through */
    padding: clamp(40px, 4vw, 80px) clamp(16px, 3vw, 40px) clamp(28px, 3vw, 48px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;   /* isolates the grain's overlay blend — matches .kl-scope/.kl-drona */
}

/* Faint paper-grain on navy — matches the Drona section */
.kl-twdemo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.92  0 0 0 0 0.82  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.kl-twdemo__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1357px;   /* 1180 × 1.15 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.2vw, 30px);
}

.kl-twdemo__eyebrow {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kl-red, #db4a2b);
    text-align: center;
}

.kl-twdemo__title {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.22;
    color: #ffffff;
    text-align: center;
    max-width: none;
    letter-spacing: -0.005em;
    white-space: normal;
}

.kl-twdemo__title em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
}

/* ---------- Stage frame (fixed-size, no scroll pin) ---------- */
.kl-twdemo__stage {
    position: relative;
    width: 100%;
    max-width: 1210px;   /* ~11% smaller than the original 1357px cap */
    aspect-ratio: 16 / 10;
    background: var(--tw-cream);
    backdrop-filter: blur(var(--tw-glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--tw-glass-blur)) saturate(1.4);
    border: 1px solid var(--tw-glass-border);
    border-radius: 22px;
    box-shadow:
        0 40px 90px -28px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(238, 235, 227, 0.10);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    margin: 0 auto;      /* belt-and-braces horizontal centring */
}

/* ---------- Chrome bar ---------- */
.kl-twdemo .tw-stage-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem clamp(1.2rem, 2vw, 1.75rem);
    border-bottom: 1px solid var(--tw-glass-divider);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22));
    position: relative;
}
.kl-twdemo .tw-stage-chrome-left  { display: flex; align-items: baseline; gap: 0.6rem; }
.kl-twdemo .tw-stage-chrome-right { display: flex; align-items: center;  gap: 0.7rem; }
.kl-twdemo .tw-stage-chrome-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--tw-red);
    box-shadow: 0 0 0 3px rgba(219, 74, 43, 0.22), 0 0 12px rgba(219, 74, 43, 0.55);
    animation: kl-twdemo-pulse 2.4s ease-in-out infinite;
    position: relative; top: -1px;
    flex-shrink: 0;
}
@keyframes kl-twdemo-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(219,74,43,0.22), 0 0 12px rgba(219,74,43,0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(219,74,43,0.08), 0 0 18px rgba(219,74,43,0.30); }
}
.kl-twdemo .tw-stage-chrome-eyebrow {
    font-family: var(--tw-mono);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    white-space: nowrap;
}
.kl-twdemo .tw-stage-chrome-scene {
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--tw-navy);
    letter-spacing: 0.005em;
    white-space: nowrap;
}

/* ---------- Scene meter (pagination dots, non-interactive) ---------- */
.kl-twdemo .tw-scene-meter-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.kl-twdemo .tw-scene-meter-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(10, 47, 82, 0.20);
    transition: width 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
    pointer-events: none;
}
.kl-twdemo .tw-scene-meter-dot.is-active {
    width: 28px;
    border-radius: 999px;
    background: var(--tw-red);
    box-shadow: 0 0 0 3px rgba(219, 74, 43, 0.16);
}

/* ---------- App shell (rail + canvas, chat dropped) ---------- */
.kl-twdemo .tw-stage-inner {
    position: relative;
    min-height: 0;
    height: 100%;
}
.kl-twdemo .tw-stage-main {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.kl-twdemo .tw-app-shell {
    position: relative;
    display: grid;
    grid-template-columns: 178px 1fr;
    height: 100%;
    min-height: 0;
}

/* ---------- Left rail ---------- */
.kl-twdemo .tw-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0.75rem 0.85rem 1rem;
    background: var(--tw-rail-bg);
    border-right: 1px solid var(--tw-rail-divider);
    overflow: hidden;
    min-width: 0;
}
.kl-twdemo .tw-rail-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(10, 47, 82, 0.08);
}
.kl-twdemo .tw-rail-brand-mark {
    width: 24px; height: 24px;
    border-radius: 7px;
    background: radial-gradient(circle at 30% 28%, #ff8b6c, var(--tw-red));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--tw-mono);
    font-size: 0.66rem;
    font-weight: 800;
    box-shadow: 0 4px 9px -3px rgba(219,74,43,0.45);
    flex-shrink: 0;
}
.kl-twdemo .tw-rail-brand-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kl-twdemo .tw-rail-brand-name {
    font-family: var(--tw-display);
    font-weight: 500;
    font-size: 0.98rem;
    color: var(--tw-navy);
    line-height: 1;
    letter-spacing: -0.005em;
}
.kl-twdemo .tw-rail-brand-sub {
    font-family: var(--tw-mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
}
.kl-twdemo .tw-rail-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    background: var(--tw-red);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: var(--tw-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: default;
    box-shadow: 0 6px 14px -5px rgba(219,74,43,0.42);
}
.kl-twdemo .tw-rail-cta::before {
    content: '+';
    font-family: var(--tw-mono);
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 800;
}
.kl-twdemo .tw-rail-section { display: flex; flex-direction: column; gap: 0.08rem; }
.kl-twdemo .tw-rail-section-label {
    font-family: var(--tw-mono);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    opacity: 0.7;
    padding: 0.25rem 0.55rem 0.35rem;
}
.kl-twdemo .tw-rail-item {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    color: var(--tw-ink-body);
}
.kl-twdemo .tw-rail-item-icon {
    width: 14px; height: 14px;
    color: currentColor;
    opacity: 0.55;
    display: flex; align-items: center; justify-content: center;
}
.kl-twdemo .tw-rail-item-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.kl-twdemo .tw-rail-item-label {
    font-family: var(--tw-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kl-twdemo .tw-rail-item-count {
    font-family: var(--tw-mono);
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--tw-ink-mid);
    letter-spacing: 0.08em;
    opacity: 0.7;
}
.kl-twdemo .tw-rail-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    border-top: 1px solid rgba(10, 47, 82, 0.08);
    padding: 0.7rem 0.55rem 0.1rem;
}
.kl-twdemo .tw-rail-footer-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--tw-navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--tw-mono);
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}
.kl-twdemo .tw-rail-footer-name {
    font-family: var(--tw-mono);
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--tw-navy);
    line-height: 1.2;
    min-width: 0;
    flex: 1;
}
.kl-twdemo .tw-rail-footer-name span {
    display: block;
    font-size: 0.52rem;
    color: var(--tw-ink-mid);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: 0.1rem;
}

/* ---------- Canvas ---------- */
.kl-twdemo .tw-canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.kl-twdemo .tw-canvas-tab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem clamp(1rem, 1.8vw, 1.4rem);
    border-bottom: 1px solid rgba(10, 47, 82, 0.07);
    font-family: var(--tw-mono);
    font-size: 0.62rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
}
.kl-twdemo .tw-canvas-tab strong { color: var(--tw-navy); font-weight: 700; }
.kl-twdemo .tw-canvas-tab-sep   { opacity: 0.35; margin: 0 0.1rem; }
.kl-twdemo .tw-canvas-body {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: clamp(1.1rem, 1.9vw, 1.7rem);
    overflow: hidden;
}

/* ---------- Scene base + crossfade ---------- */
.kl-twdemo .tw-canvas-body .tw-scene {
    position: absolute;
    inset: clamp(1.1rem, 1.9vw, 1.7rem);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.6vw, 1.4rem);
}
.kl-twdemo .tw-canvas-body .tw-scene.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.kl-twdemo .tw-scene-cap {
    margin-top: auto;
    font-family: var(--tw-mono);
    font-size: 0.74rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.10em;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-top: 0.5rem;
}
.kl-twdemo .tw-scene-cap::before {
    content: '';
    width: 14px; height: 1px;
    background: var(--tw-red);
}

/* ---------- Scene 1 · Morning Brief ---------- */
.kl-twdemo .tw-brief {
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 1.5vw, 1.3rem);
    flex: 1;
}
.kl-twdemo .tw-brief-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.kl-twdemo .tw-brief-date {
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--tw-navy);
    line-height: 1;
    letter-spacing: -0.005em;
}
.kl-twdemo .tw-brief-date-sub {
    display: block;
    font-family: var(--tw-mono);
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    margin-top: 0.55rem;
}
.kl-twdemo .tw-brief-alert {
    padding: 0.6rem 1.05rem;
    background: var(--tw-glass-panel-bg-2);
    border: 1px solid rgba(219, 74, 43, 0.38);
    border-radius: 999px;
    font-family: var(--tw-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tw-red);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    opacity: 0;
    transition: opacity 0.5s ease 0.7s;
    animation: kl-twdemo-alert 1.8s ease-in-out infinite;
}
.kl-twdemo .tw-brief-alert::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tw-red);
    box-shadow: 0 0 8px rgba(219,74,43,0.6);
}
@keyframes kl-twdemo-alert {
    0%, 100% { box-shadow: 0 0 0 0 rgba(219,74,43,0.0); }
    50%      { box-shadow: 0 0 0 10px rgba(219,74,43,0.08); }
}
.kl-twdemo .tw-brief-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.kl-twdemo .tw-brief-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    font-family: var(--tw-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    cursor: default;
    white-space: nowrap;
}
.kl-twdemo .tw-brief-chip--primary {
    background: var(--tw-red);
    color: #fff;
    border-color: var(--tw-red);
    box-shadow: 0 8px 18px -8px rgba(219, 74, 43, 0.55);
}
.kl-twdemo .tw-brief-chip--ghost {
    background: transparent;
    color: var(--tw-ink-mid);
    border-color: rgba(10, 47, 82, 0.18);
    opacity: 0.85;
}
.kl-twdemo .tw-brief-row {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.6rem);
    padding: clamp(1.1rem, 1.8vw, 1.4rem) clamp(1.2rem, 2vw, 1.6rem);
    background: var(--tw-glass-panel-bg);
    border: 1px solid rgba(10, 47, 82, 0.08);
    border-radius: 14px;
    box-shadow: var(--tw-glass-card-shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.kl-twdemo .tw-scene.is-active .tw-brief.is-activated .tw-brief-row { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-scene.is-active .tw-brief.is-activated .tw-brief-row:nth-of-type(1) { transition-delay: 0.20s; }
.kl-twdemo .tw-scene.is-active .tw-brief.is-activated .tw-brief-row:nth-of-type(2) { transition-delay: 0.36s; }
.kl-twdemo .tw-scene.is-active .tw-brief.is-activated .tw-brief-row:nth-of-type(3) { transition-delay: 0.52s; }
.kl-twdemo .tw-scene.is-active .tw-brief.is-activated .tw-brief-alert { opacity: 1; }
.kl-twdemo .tw-brief-ship { display: flex; flex-direction: column; gap: 0.3rem; }
.kl-twdemo .tw-brief-ship-id {
    font-family: var(--tw-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tw-navy);
    font-weight: 700;
}
.kl-twdemo .tw-brief-ship-route {
    font-family: var(--tw-mono);
    font-size: 0.68rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.06em;
}
.kl-twdemo .tw-brief-note {
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--tw-ink-strong);
    line-height: 1.4;
}
.kl-twdemo .tw-brief-note em { color: var(--tw-navy); }
.kl-twdemo .tw-brief-status {
    font-family: var(--tw-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid currentColor;
}
.kl-twdemo .tw-brief-status[data-state="ready"]    { color: var(--tw-conf-high); background: var(--tw-conf-high-bg); }
.kl-twdemo .tw-brief-status[data-state="awaiting"] { color: var(--tw-conf-med);  background: var(--tw-conf-med-bg);  }
.kl-twdemo .tw-brief-status[data-state="sealed"]   { color: var(--tw-ink-mid);   background: rgba(10, 47, 82, 0.06); }

/* ---------- Scene 2 · ERP medallion ---------- */
.kl-twdemo .tw-erp {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.kl-twdemo .tw-erp-medallion {
    position: relative;
    z-index: 3;
    width: clamp(140px, 14vw, 180px);
    height: clamp(140px, 14vw, 180px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0.85) 60%);
    border: 1px solid var(--tw-glass-border);
    box-shadow:
        0 24px 50px -14px rgba(10,47,82,0.30),
        0 0 0 8px rgba(219, 74, 43, 0.06),
        0 0 0 16px rgba(219, 74, 43, 0.03),
        0 1px 0 rgba(255,255,255,0.95) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.kl-twdemo .tw-erp-medallion-mark {
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    color: var(--tw-red);
    line-height: 1;
}
.kl-twdemo .tw-erp-medallion-label {
    font-family: var(--tw-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
}
.kl-twdemo .tw-erp-chips { display: contents; }
.kl-twdemo .tw-erp-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1rem 0.55rem 0.55rem;
    background: var(--tw-glass-panel-bg-2);
    border: 1px solid rgba(10, 47, 82, 0.10);
    border-radius: 999px;
    box-shadow: 0 16px 32px -18px rgba(10,47,82,0.30);
    font-family: var(--tw-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tw-navy);
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 2;
}
.kl-twdemo .tw-scene.is-active .tw-erp-chip { opacity: 1; transform: scale(1); }
.kl-twdemo .tw-erp-chip[data-system="gmail"] { top: 8%;    left: 8%;   transition-delay: 0.06s; }
.kl-twdemo .tw-erp-chip[data-system="tally"] { top: 8%;    right: 8%;  transition-delay: 0.18s; }
.kl-twdemo .tw-erp-chip[data-system="zoho"]  { top: 50%;   left: 4%;   transform: translateY(-50%) scale(0.92); transition-delay: 0.30s; }
.kl-twdemo .tw-erp-chip[data-system="sap"]   { top: 50%;   right: 4%;  transform: translateY(-50%) scale(0.92); transition-delay: 0.42s; }
.kl-twdemo .tw-erp-chip[data-system="excel"] { bottom: 6%; left: 50%;  transform: translateX(-50%) scale(0.92); transition-delay: 0.54s; }
.kl-twdemo .tw-scene.is-active .tw-erp-chip[data-system="zoho"]  { transform: translateY(-50%) scale(1); }
.kl-twdemo .tw-scene.is-active .tw-erp-chip[data-system="sap"]   { transform: translateY(-50%) scale(1); }
.kl-twdemo .tw-scene.is-active .tw-erp-chip[data-system="excel"] { transform: translateX(-50%) scale(1); }
.kl-twdemo .tw-erp-chip-logo {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px -2px rgba(10,47,82,0.18);
    overflow: hidden;
    flex-shrink: 0;
}
.kl-twdemo .tw-erp-chip-logo img {
    width: 18px; height: 18px;
    object-fit: contain;
    display: block;
}
.kl-twdemo .tw-erp-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.kl-twdemo .tw-erp-flow {
    fill: none;
    stroke: var(--tw-red);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 4 8;
    opacity: 0;
}
.kl-twdemo .tw-scene.is-active .tw-erp-flow { animation: kl-twdemo-erp-flow 2.6s ease-in-out infinite; }
.kl-twdemo .tw-erp-flow:nth-of-type(1) { animation-delay: 0.0s; }
.kl-twdemo .tw-erp-flow:nth-of-type(2) { animation-delay: 0.35s; }
.kl-twdemo .tw-erp-flow:nth-of-type(3) { animation-delay: 0.70s; }
.kl-twdemo .tw-erp-flow:nth-of-type(4) { animation-delay: 1.05s; }
.kl-twdemo .tw-erp-flow:nth-of-type(5) { animation-delay: 1.40s; }
@keyframes kl-twdemo-erp-flow {
    0%   { opacity: 0; stroke-dashoffset: 60; }
    30%  { opacity: 0.65; }
    70%  { opacity: 0.65; }
    100% { opacity: 0; stroke-dashoffset: 0; }
}

/* ---------- Scene 3 · Inbox ---------- */
.kl-twdemo .tw-inbox {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
    min-height: 0;
}
.kl-twdemo .tw-inbox-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(10, 47, 82, 0.08);
}
.kl-twdemo .tw-inbox-head-title {
    font-family: var(--tw-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    color: var(--tw-navy);
}
.kl-twdemo .tw-inbox-head-meta {
    font-family: var(--tw-mono);
    font-size: 0.58rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.kl-twdemo .tw-inbox-dropzone {
    padding: 0.55rem 0.85rem;
    border: 1px dashed rgba(10, 47, 82, 0.22);
    border-radius: 8px;
    font-family: var(--tw-mono);
    font-size: 0.62rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.08em;
    background: rgba(255,255,255,0.32);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.kl-twdemo .tw-inbox-dropzone::before {
    content: '↧';
    color: var(--tw-red);
    font-size: 0.95rem;
    line-height: 1;
}
.kl-twdemo .tw-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-height: 0;
}
.kl-twdemo .tw-inbox-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: var(--tw-glass-panel-bg-2);
    border: 1px solid rgba(10, 47, 82, 0.08);
    border-radius: 9px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.kl-twdemo .tw-scene.is-active .tw-inbox-row { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-scene.is-active .tw-inbox-row:nth-child(1) { transition-delay: 0.18s; }
.kl-twdemo .tw-scene.is-active .tw-inbox-row:nth-child(2) { transition-delay: 0.34s; }
.kl-twdemo .tw-scene.is-active .tw-inbox-row:nth-child(3) { transition-delay: 0.50s; }
.kl-twdemo .tw-scene.is-active .tw-inbox-row:nth-child(4) { transition-delay: 0.66s; }
.kl-twdemo .tw-scene.is-active .tw-inbox-row:nth-child(5) { transition-delay: 0.82s; }
.kl-twdemo .tw-inbox-row-icon {
    width: 22px; height: 22px;
    color: var(--tw-ink-mid);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kl-twdemo .tw-inbox-row-icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.kl-twdemo .tw-inbox-row-name {
    font-family: var(--tw-mono);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tw-navy);
    letter-spacing: 0.02em;
}
.kl-twdemo .tw-inbox-row-time {
    font-family: var(--tw-mono);
    font-size: 0.6rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.05em;
    justify-self: end;
}
.kl-twdemo .tw-inbox-tag {
    font-family: var(--tw-mono);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.22rem 0.42rem;
    border-radius: 5px;
    color: var(--tw-conf-high);
    background: var(--tw-conf-high-bg);
    border: 1px solid currentColor;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.35s ease, transform 0.35s ease;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.kl-twdemo .tw-inbox-row.is-tagged .tw-inbox-tag {
    opacity: 1;
    transform: scale(1);
}
.kl-twdemo .tw-inbox-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--tw-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    padding: 0.32rem 0.7rem;
    border-radius: 6px;
    background: rgba(31, 123, 84, 0.08);
    border: 1px solid rgba(31, 123, 84, 0.22);
    align-self: flex-end;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.kl-twdemo .tw-inbox-stat.is-in { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-inbox-stat::before {
    content: '✓';
    color: var(--tw-conf-high);
    font-weight: 700;
}
.kl-twdemo .tw-inbox-stat strong { color: var(--tw-navy); font-weight: 700; }

/* ---------- Scene 4 (source scene 6) · Reviewer signs · packets delivered ---------- */
.kl-twdemo .tw-pkg {
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 1.4vw, 1.2rem);
    flex: 1;
}
.kl-twdemo .tw-pkg-compile-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.85rem;
    font-family: var(--tw-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(10, 47, 82, 0.08);
    border-radius: 7px;
    width: fit-content;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.kl-twdemo .tw-pkg-compile-stat.is-in { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-pkg-compile-stat::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tw-conf-high);
    box-shadow: 0 0 8px rgba(31, 123, 84, 0.55);
}
.kl-twdemo .tw-pkg-compile-stat strong {
    color: var(--tw-navy);
    font-weight: 700;
    margin-right: 0.15rem;
}
.kl-twdemo .tw-pkg-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.85rem, 1.6vw, 1.4rem);
}
.kl-twdemo .tw-pkg-card {
    padding: clamp(1rem, 1.5vw, 1.4rem);
    background: var(--tw-glass-panel-bg-2);
    border: 1px solid rgba(10, 47, 82, 0.10);
    border-radius: 14px;
    box-shadow: var(--tw-glass-card-shadow);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.kl-twdemo .tw-scene.is-active .tw-pkg-card { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-scene.is-active .tw-pkg-card:nth-child(1) { transition-delay: 0.05s; }
.kl-twdemo .tw-scene.is-active .tw-pkg-card:nth-child(2) { transition-delay: 0.20s; }
.kl-twdemo .tw-pkg-tag {
    font-family: var(--tw-mono);
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--tw-red);
    font-weight: 700;
}
.kl-twdemo .tw-pkg-title {
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    color: var(--tw-navy);
    line-height: 1.2;
    margin: 0.45rem 0 0.45rem;
    letter-spacing: -0.005em;
}
.kl-twdemo .tw-pkg-route {
    font-family: var(--tw-mono);
    font-size: 0.68rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.06em;
    padding-bottom: 0.7rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed rgba(10, 47, 82, 0.14);
}
.kl-twdemo .tw-pkg-route strong { color: var(--tw-navy); font-weight: 700; }
.kl-twdemo .tw-pkg-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.kl-twdemo .tw-pkg-summary-cell {
    text-align: center;
    padding: 0.5rem 0.2rem;
    border: 1px solid rgba(10, 47, 82, 0.12);
    border-radius: 8px;
    font-family: var(--tw-mono);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    background: rgba(255,255,255,0.55);
}
.kl-twdemo .tw-pkg-summary-cell strong {
    display: block;
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: 0.15rem;
    color: var(--tw-navy);
    line-height: 1;
}
.kl-twdemo .tw-pkg-summary-cell.is-open    { border-color: rgba(31,123,84,0.40); color: var(--tw-conf-high); background: var(--tw-conf-high-bg); }
.kl-twdemo .tw-pkg-summary-cell.is-open strong    { color: var(--tw-conf-high); }
.kl-twdemo .tw-pkg-summary-cell.is-cond    { border-color: rgba(176,117,18,0.40); color: var(--tw-conf-med); background: var(--tw-conf-med-bg); }
.kl-twdemo .tw-pkg-summary-cell.is-cond strong    { color: var(--tw-conf-med); }
.kl-twdemo .tw-pkg-summary-cell.is-unclear { border-color: rgba(148,163,184,0.4); color: var(--tw-slate); }
.kl-twdemo .tw-pkg-summary-cell.is-unclear strong { color: var(--tw-slate); }
.kl-twdemo .tw-pkg-list {
    font-family: var(--tw-mono);
    font-size: 0.7rem;
    line-height: 1.8;
    color: var(--tw-ink-body);
    list-style: none;
    margin: 0;
    padding: 0;
}
.kl-twdemo .tw-pkg-list li { display: flex; align-items: center; gap: 0.6rem; }
.kl-twdemo .tw-pkg-list li::before {
    content: '';
    width: 12px; height: 1px;
    background: var(--tw-red);
    flex-shrink: 0;
}
.kl-twdemo .tw-pkg-signoff {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(0.85rem, 1.6vw, 1.3rem);
    padding: clamp(0.9rem, 1.5vw, 1.25rem);
    background: var(--tw-glass-panel-bg-2);
    border: 1px solid rgba(10, 47, 82, 0.10);
    border-radius: 14px;
    box-shadow: var(--tw-glass-card-shadow);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}
.kl-twdemo .tw-scene.is-active .tw-pkg-signoff { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-pkg-seal {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 1.5px solid var(--tw-red);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: var(--tw-display);
    font-style: italic;
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--tw-red);
    text-align: center;
    line-height: 1.1;
    opacity: 0;
    transform: scale(0.55) rotate(-20deg);
    transition: opacity 0.55s ease 0.65s, transform 0.55s ease 0.65s;
    flex-shrink: 0;
}
.kl-twdemo .tw-pkg-seal::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(219, 74, 43, 0.45);
    border-radius: 50%;
}
.kl-twdemo .tw-scene.is-active .tw-pkg-seal { opacity: 1; transform: scale(1) rotate(0deg); }
.kl-twdemo .tw-pkg-signoff-text {
    font-family: var(--tw-mono);
    font-size: 0.7rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.06em;
    line-height: 1.7;
    min-width: 0;
}
.kl-twdemo .tw-pkg-signoff-text strong {
    color: var(--tw-navy);
    font-weight: 700;
    font-size: 0.78rem;
    display: block;
    margin-bottom: 0.15rem;
}
.kl-twdemo .tw-pkg-hash {
    font-family: var(--tw-mono);
    font-size: 0.58rem;
    color: var(--tw-ink-mid);
    letter-spacing: 0.04em;
    word-break: break-all;
    display: block;
    margin-top: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: rgba(10, 47, 82, 0.04);
    border-radius: 4px;
    border-left: 2px solid var(--tw-red);
}
.kl-twdemo .tw-pkg-meta {
    text-align: right;
    font-family: var(--tw-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tw-ink-mid);
    line-height: 1.7;
}
.kl-twdemo .tw-pkg-meta strong {
    display: block;
    color: var(--tw-navy);
    font-weight: 700;
    font-size: 0.68rem;
}
.kl-twdemo .tw-pkg-envelopes {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 0.3rem;
}
.kl-twdemo .tw-pkg-envelope {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--tw-glass-panel-bg-2);
    border: 1px solid rgba(31, 123, 84, 0.30);
    border-radius: 999px;
    font-family: var(--tw-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tw-conf-high);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.kl-twdemo .tw-scene.is-active .tw-pkg-envelope { opacity: 1; transform: translateY(0); }
.kl-twdemo .tw-scene.is-active .tw-pkg-envelope:nth-of-type(1) { transition-delay: 0.95s; }
.kl-twdemo .tw-scene.is-active .tw-pkg-envelope:nth-of-type(2) { transition-delay: 1.10s; }
.kl-twdemo .tw-pkg-envelope-glyph {
    width: 16px; height: 16px;
    color: var(--tw-conf-high);
}
.kl-twdemo .tw-pkg-envelope-glyph svg { width: 100%; height: 100%; }

/* ---------- Laptop (>1100px wide, ≤880px tall: 13"–14" MacBooks) ----------
   The 16:10 stage maxes at 1357px, so the ERP chips get flung to the far
   corners and the brief reads oversized. Cluster the hub and tighten the
   brief so the demo sits elegantly in a short laptop viewport. */
@media (min-width: 1101px) and (max-height: 880px) {
    .kl-twdemo .tw-brief        { gap: clamp(0.55rem, 1.1vw, 0.85rem); }
    .kl-twdemo .tw-brief-date   { font-size: clamp(1.5rem, 2.4vw, 2rem); }
    .kl-twdemo .tw-brief-row    { padding: clamp(0.75rem, 1.3vw, 1rem) clamp(1rem, 1.6vw, 1.25rem); border-radius: 12px; }
    .kl-twdemo .tw-brief-note   { font-size: clamp(0.9rem, 1vw, 1rem); }

    .kl-twdemo .tw-erp                { min-height: 0; max-width: 640px; width: 100%; margin: 0 auto; }
    .kl-twdemo .tw-erp-medallion      { width: clamp(112px, 11vw, 140px); height: clamp(112px, 11vw, 140px); }
    .kl-twdemo .tw-erp-medallion-mark { font-size: clamp(2.1rem, 3vw, 2.8rem); }
    .kl-twdemo .tw-erp-chip           { font-size: 0.72rem; padding: 0.42rem 0.8rem 0.42rem 0.42rem; gap: 0.5rem; }
    .kl-twdemo .tw-erp-chip-logo      { width: 24px; height: 24px; }
    .kl-twdemo .tw-erp-chip-logo img  { width: 15px; height: 15px; }
}

/* ---------- Dynamic fit (desktop) ----------
   The stage keeps its 16/10 ratio, but its height is also capped to a slice
   of the viewport so the whole reel (eyebrow + title + stage) fits in one
   screen on short displays like 13" laptops. Width is the smaller of: the
   1210px cap, the available width, or the width that keeps the stage ≤82svh
   tall (82svh × 16/10). Because the stage is height-capped, the heaviest
   scenes (Morning Brief's three rows, the packet pair + sign-off) are also
   tightened here so they fit the canvas instead of clipping at the bottom.
   Scoped to ≥901px so the mobile scrollable-canvas path below is untouched. */
@media (min-width: 901px) {
    .kl-twdemo__stage {
        width: min(100%, 1210px, calc(82svh * 16 / 10));
    }

    /* Scene 1 · Morning Brief — three shipment rows + actions must clear the
       canvas; tighten the column gap and row padding. */
    .kl-twdemo .tw-brief      { gap: clamp(0.55rem, 1vw, 0.9rem); }
    .kl-twdemo .tw-brief-date { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
    .kl-twdemo .tw-brief-row  { padding: clamp(0.7rem, 1.2vw, 1rem) clamp(1rem, 1.7vw, 1.35rem); }

    /* Scene · Reviewer signs — two packet cards + sign-off row. The seal is the
       tallest element in the sign-off, so shrinking it lowers that row. */
    .kl-twdemo .tw-pkg         { gap: clamp(0.6rem, 1vw, 0.9rem); }
    .kl-twdemo .tw-pkg-card    { padding: clamp(0.8rem, 1.2vw, 1.05rem); }
    .kl-twdemo .tw-pkg-title   { margin: 0.3rem 0 0.35rem; }
    .kl-twdemo .tw-pkg-route   { padding-bottom: 0.5rem; margin-bottom: 0.55rem; }
    .kl-twdemo .tw-pkg-summary { margin-bottom: 0.55rem; }
    .kl-twdemo .tw-pkg-list    { line-height: 1.5; }
    .kl-twdemo .tw-pkg-signoff { padding: clamp(0.75rem, 1.2vw, 1rem); }
    .kl-twdemo .tw-pkg-seal    { width: 58px; height: 58px; font-size: 0.62rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    /* Drop aspect-ratio; use viewport-relative height so content isn't clipped */
    .kl-twdemo__stage {
        aspect-ratio: unset;
        height: clamp(580px, 72dvh, 760px);
        max-height: none;
    }
    /* Propagate height through the flex chain (same fix as tradewatch.html) */
    .kl-twdemo .tw-canvas { height: 100%; }
    /* Scrollable canvas body — overflow content accessible rather than clipped */
    .kl-twdemo .tw-canvas-body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .kl-twdemo .tw-canvas-body::-webkit-scrollbar { display: none; }
    /* Scene: release hard bottom clip, height driven by content */
    .kl-twdemo .tw-canvas-body .tw-scene {
        bottom: auto;
        min-height: calc(100% - 2.2rem);
    }
    .kl-twdemo .tw-app-shell { grid-template-columns: 1fr; }
    .kl-twdemo .tw-rail { display: none; }
    .kl-twdemo .tw-brief-row { grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; padding: 0.85rem 1rem; align-items: start; }
    .kl-twdemo .tw-brief-ship { grid-column: 1; }
    .kl-twdemo .tw-brief-status { grid-column: 2; align-self: start; }
    .kl-twdemo .tw-brief-note { grid-column: 1 / -1; font-size: 0.95rem; line-height: 1.42; }
    .kl-twdemo .tw-erp-svg { display: none !important; }
    .kl-twdemo .tw-erp-chips {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        padding: 0 0.5rem;
    }
    .kl-twdemo .tw-erp-chip[data-system] {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .kl-twdemo .tw-erp { flex-direction: column; gap: 1.2rem; min-height: 0; }
    .kl-twdemo .tw-erp-medallion { width: clamp(96px, 26vw, 140px); height: clamp(96px, 26vw, 140px); }
    .kl-twdemo .tw-pkg-pair { grid-template-columns: 1fr; }
    .kl-twdemo .tw-pkg-list { display: none; }
    .kl-twdemo .tw-pkg-hash { display: none; }
    /* Show only first brief-row; hide remaining 2 and the long note (same
       pattern as tw-pkg-list hidden above — keep one concrete example) */
    .kl-twdemo .tw-brief-row + .tw-brief-row { display: none; }
    .kl-twdemo .tw-brief-note { display: none; }
    .kl-twdemo .tw-pkg-compile-stat {
        display: block;
        font-size: 0.52rem;
        letter-spacing: 0.09em;
        padding: 0.35rem 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .kl-twdemo .tw-pkg-compile-stat::before { display: none; }
    .kl-twdemo__title { font-size: 1rem; line-height: 1.3; }
    .kl-twdemo .tw-pkg-signoff { display: none; }
    .kl-twdemo .tw-pkg-envelopes { display: none; }
    .kl-twdemo { padding-bottom: 4rem; }
}

@media (max-width: 600px) {
    /* Railing: stack dot+eyebrow on line 1, scene title on line 2, no wrapping */
    .kl-twdemo .tw-stage-chrome { align-items: flex-start; }
    .kl-twdemo .tw-stage-chrome-left { flex-wrap: wrap; row-gap: 0.18rem; }
    .kl-twdemo .tw-stage-chrome-scene {
        flex-basis: 100%;
        font-size: clamp(0.8rem, 3.4vw, 0.95rem);
        line-height: 1.2;
    }
    /* Inbox sub-header: restore separation between title and meta */
    .kl-twdemo .tw-inbox-head { gap: 0.6rem; flex-wrap: wrap; row-gap: 0.2rem; }
    .kl-twdemo .tw-inbox-head-title {
        font-size: clamp(0.84rem, 3.4vw, 1.0rem);
        min-width: 0;
    }
    .kl-twdemo .tw-inbox-head-meta {
        font-size: 0.5rem;
        letter-spacing: 0.12em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Doc-type chip: shrink to fit one line; ellipsis is a last-resort safety */
    .kl-twdemo .tw-inbox-tag {
        font-size: clamp(0.36rem, 1.7vw, 0.44rem);
        letter-spacing: 0.06em;
        padding: 0.18rem 0.32rem;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kl-twdemo .tw-inbox-row {
        grid-template-columns: 18px minmax(0, 1fr) auto minmax(0, auto);
        column-gap: 0.4rem;
    }
    .kl-twdemo .tw-inbox-row-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kl-twdemo .tw-stage-chrome-dot,
    .kl-twdemo .tw-brief-alert,
    .kl-twdemo .tw-erp-flow { animation: none !important; }
    .kl-twdemo .tw-canvas-body .tw-scene,
    .kl-twdemo .tw-brief-row,
    .kl-twdemo .tw-inbox-row,
    .kl-twdemo .tw-erp-chip { transition: none !important; }
}