[data-landing-demo]{margin-top:40px;max-width:100%;min-width:0;text-align:start}
[data-landing-demo] .demo-frame{animation:none;transform:none}
[data-landing-demo] .demo-content{min-width:0}
[data-landing-demo] .demo-table-wrap{max-width:100%;overflow-x:auto}
[data-landing-demo] .demo-table{min-width:480px}
[data-landing-demo] .demo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
[data-landing-demo] .demo-controls .btn{min-height:44px;min-width:44px;white-space:normal}
[data-landing-demo] .demo-table-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:768px){[data-landing-demo] .demo-content{padding:16px}[data-landing-demo] .demo-page-title{font-size:18px}}
@media(prefers-reduced-motion:reduce){[data-landing-demo] *{animation:none;transition:none}}

/* Restore the frozen hero signal and keep pointer hover from snapping the demo frame. */
[data-saas-public][data-flow="landing"] .hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: var(--landing-reference-117);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes landingDemoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (min-width: 769px) {
  [data-saas-public][data-flow="landing"] [data-landing-demo] .demo-frame,
  [data-saas-public][data-flow="landing"] [data-landing-demo] .demo-frame:hover {
    animation: landingDemoFloat 8s ease-in-out infinite;
    animation-play-state: running;
    transform: none;
    transition: none;
  }
}
[data-saas-public][data-flow="landing"] [data-landing-demo] span.demo-btn-sm,
[data-saas-public][data-flow="landing"] [data-landing-demo] span.demo-btn-sm:hover {
  background: var(--gold-grad);
  border: none;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  [data-saas-public][data-flow="landing"] .hero-badge .dot,
  [data-saas-public][data-flow="landing"] [data-landing-demo] .demo-frame,
  [data-saas-public][data-flow="landing"] [data-landing-demo] .demo-frame:hover {
    animation: none;
    transform: none;
  }
}

/* The frame has a single transform owner: CSS float. Demo updates never become scroll anchors. */
[data-landing-demo] { overflow-anchor: none; }
[data-landing-demo] .demo-frame { will-change: transform; }
[data-landing-demo] .demo-table tbody tr { height: 46px; }
[data-landing-demo] .demo-table tbody td { white-space: nowrap; }
[data-landing-demo] .demo-pill { height: 24px; min-height: 24px; white-space: nowrap; overflow: hidden; }
[data-landing-demo] .demo-kpi-value {
  display: block; min-height: 1.2em; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
[data-landing-demo] .demo-kpi-sub { min-height: 2.8em; }
@media (prefers-reduced-motion: reduce) { [data-landing-demo] .demo-frame { will-change: auto; } }

/* Keep all source status chips visible on narrow screens instead of clipping the row. */
@media (width <= 480px) {
  [data-landing-demo] .demo-topbar-right { min-width:0; max-width:100%; flex-wrap:wrap; }
}

/* Demo menu and typography follow the current cabinet, including owner corrections. */
[data-landing-demo] .demo-side-label { display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.14em; }
[data-landing-demo] .demo-side-label::after { content:''; flex:1; height:1px; background:var(--border); }
[data-landing-demo] .demo-side-title small { font-size:11px; }
[data-landing-demo] .demo-kpi-label,[data-landing-demo] .demo-kpi-sub,[data-landing-demo] .demo-table th { font-weight:700; }
[data-landing-demo] #demo-kpi-errors-sub { color:var(--green); }
[data-landing-demo] .demo-period-tabs button { min-height:32px; }
[data-landing-demo] .demo-pill.created { animation:demoCreatedPulse 2.4s ease-in-out infinite; }
@keyframes demoCreatedPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { [data-landing-demo] .demo-pill.created { animation:none; } }

@media (width <= 768px) {
  [data-landing-demo] .demo-period-tabs button { min-height:44px; min-width:44px; }
}

/* Demo mirrors the current cabinet layout without duplicating animated records. */
[data-landing-demo] .demo-table tbody tr:hover td { background:transparent; }
@media(max-width:768px){
 [data-landing-demo] .demo-table-wrap { overflow:visible; }
 [data-landing-demo] .demo-table,[data-landing-demo] .demo-table tbody { display:block; width:100%; min-width:0; }
 [data-landing-demo] .demo-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 [data-landing-demo] .demo-table tbody tr { display:grid; height:auto; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'identity status' 'product product' 'market amount'; gap:10px 12px; padding:16px; }
 [data-landing-demo] .demo-table tbody td { display:block; min-width:0; padding:0; border:0; white-space:normal; overflow-wrap:anywhere; }
 [data-landing-demo] .demo-table td:nth-child(1) { grid-area:identity; }
 [data-landing-demo] .demo-table td:nth-child(2) { grid-area:market; align-self:end; }
 [data-landing-demo] .demo-table td:nth-child(3) { grid-area:product; }
 [data-landing-demo] .demo-table td:nth-child(4) { grid-area:amount; justify-self:end; }
 [data-landing-demo] .demo-table td:nth-child(5) { grid-area:status; justify-self:end; }
 [data-landing-demo] .demo-pill { min-width:0; height:auto; white-space:normal; text-align:center; overflow:visible; }
 [data-landing-demo] .demo-order-product-cell { max-width:100%; max-height:none; white-space:normal; overflow-wrap:anywhere; text-overflow:clip; -webkit-line-clamp:3; }
 [data-landing-demo] .demo-ledger-list { padding:12px; }
 [data-landing-demo] .demo-ledger-row { display:block; padding:4px 0; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--r); }
 [data-landing-demo] .demo-ledger-row:last-child { margin-bottom:0; }
 [data-landing-demo] .demo-ledger-row > span { display:flex; width:100%; min-width:0; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); overflow:visible; white-space:normal; overflow-wrap:anywhere; }
 [data-landing-demo] .demo-ledger-row > span:last-child { border-bottom:0; }
 [data-landing-demo] .demo-ledger-row > span::before { flex:0 0 auto; max-width:45%; margin-right:auto; }
 [data-landing-demo] .demo-ledger-date::before { content:'Дата и время'; }
 [data-landing-demo] .demo-ledger-type::before { content:'Тип'; }
 [data-landing-demo] .demo-ledger-desc::before { content:'Описание'; }
 [data-landing-demo] .demo-ledger-amount::before { content:'Сумма'; }
}
@media(max-width:430px){
 [data-landing-demo] .demo-table tbody tr { padding:14px 12px; gap:9px 10px; }
 [data-landing-demo] .demo-ledger-list { padding:8px; }
 [data-landing-demo] .demo-ledger-row > span { padding:10px 12px; gap:8px; }
}
@media(max-width:320px){
 [data-landing-demo] .demo-table tbody tr { grid-template-columns:minmax(0,1fr); grid-template-areas:'identity' 'status' 'product' 'market' 'amount'; padding:10px 8px; gap:8px; }
 [data-landing-demo] .demo-table td:nth-child(4),[data-landing-demo] .demo-table td:nth-child(5) { justify-self:start; }
 [data-landing-demo] .demo-ledger-row > span { padding:8px 10px; }
}

[data-landing-demo] [data-demo-all]:disabled { cursor:default; pointer-events:none; }

.demo-notification-link { flex:1; min-width:0; max-width:340px; margin:0 16px; color:var(--text-2); font-size:9px; }
.demo-notification-link > span { display:block; padding:9px 10px; margin-top:5px; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (width <= 768px) { .demo-page-head { flex-wrap:wrap; } .demo-notification-link { order:3; flex-basis:100%; max-width:none; margin:10px 0 0; } }

/* Marketplace icon preserved from PR114. */
[data-flow="landing"] .demo-platform.yandex { padding:0; border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; }
.demo-platform.yandex img { width:24px; height:24px; object-fit:contain; display:block; }