/* RA Landing Demo Polish
 * Extracted from landing_extra.css to keep landing-specific demo overrides isolated.
 * Landing-only scope; Suite surfaces are intentionally untouched.
 */

.hero-title {
  word-break: keep-all;
  text-wrap: balance;
}

/* SV-1: Hide scrollbar on horizontal chip scroller — touch-friendly */
.demo-context-quick {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.demo-context-quick::-webkit-scrollbar {
  display: none;
}


.release-refresh-toast {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  bottom: auto;
  z-index: var(--z-toast, 1500);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(34, 211, 238, 0.3);
  backdrop-filter: blur(12px);
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  animation: ra-toast-in 0.3s cubic-bezier(0.23,1,0.32,1);
  max-width: min(420px, calc(100vw - 24px));
}
.release-refresh-toast button {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
}
.release-refresh-toast button:hover {
  background: rgba(34, 211, 238, 0.2);
}
.release-refresh-toast .release-refresh-dismiss {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: rgba(226, 232, 240, 0.78);
  font-size: 1.25rem;
  line-height: 1;
}
@keyframes ra-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.demo-inline-error {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.demo-inline-error small {
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  color:#fecaca;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.26);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.02em;
}
.demo-feedback {
  display:flex;
  justify-content:flex-end;
  margin:8px 12px 12px;
  color:rgba(226,232,240,.72);
  font-size:.72rem;
  font-weight:900;
}
.demo-feedback > div {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.demo-feedback button {
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(34,211,238,.22);
  color:#dff7ff;
  background:rgba(15,23,42,.72);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.demo-feedback button:hover,
.demo-feedback button.is-selected {
  transform:translateY(-1px);
  border-color:rgba(34,211,238,.58);
  background:rgba(34,211,238,.12);
}
.demo-feedback[data-feedback-state="sent"] span {
  color:#86efac;
}
.demo-replay-badge {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px 0;
}
.demo-replay-badge span,
.demo-export-replay {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.28);
  background:linear-gradient(135deg,rgba(5,46,22,.72),rgba(6,78,59,.48));
  color:#d1fae5;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(5,150,105,.12);
}
.demo-export-replay {
  margin-left:8px;
  vertical-align:middle;
}
[data-theme="light"] .demo-replay-badge span,
[data-theme="light"] .demo-export-replay {
  border-color:rgba(5,150,105,.22);
  background:linear-gradient(135deg,rgba(236,253,245,.96),rgba(209,250,229,.88));
  color:#065f46;
  box-shadow:0 10px 24px rgba(16,185,129,.08);
}
@media(max-width:640px){
  .demo-decision-grid .demo-table-scroll {
    max-height:none;
    overflow:visible;
    margin:0 8px 10px;
  }
  .demo-decision-grid .demo-sheets-table,
  .demo-decision-grid .demo-sheets-table--dof {
    min-width:0;
    border-collapse:separate;
    border-spacing:0 8px;
  }
  .demo-decision-grid .demo-sheets-table thead {
    display:none;
  }
  .demo-decision-grid .demo-sheets-table tbody,
  .demo-decision-grid .demo-sheets-table tr,
  .demo-decision-grid .demo-sheets-table td {
    display:block;
    width:100%;
  }
  .demo-decision-grid .demo-sheets-table tr {
    border:1px solid rgba(148,163,184,.16);
    border-radius:14px;
    overflow:hidden;
    background:rgba(8,16,30,.7);
  }
  .demo-decision-grid .demo-sheets-table td {
    display:grid;
    grid-template-columns:minmax(92px,34%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:9px 10px;
    border-bottom:1px solid rgba(148,163,184,.08);
    white-space:normal;
  }
  .demo-decision-grid .demo-sheets-table td::before {
    content:attr(data-label);
    color:#67e8f9;
    font-size:.66rem;
    font-weight:950;
    line-height:1.25;
  }
  .demo-decision-grid .demo-sheets-table .demo-row-locked td {
    display:block;
  }
  .demo-decision-grid .demo-sheets-table .demo-row-locked td::before {
    content:"";
  }
  .demo-feedback {
    justify-content:flex-start;
  }
  .demo-feedback > div {
    justify-content:flex-start;
  }
}

/* Demo density reset: keep the real backend workbench, but make the first scan quieter. */
#demo.demo-stage .section-header {
  grid-template-columns:minmax(0,1fr) minmax(360px,420px);
  gap:18px;
  margin-bottom:12px;
}

@media(max-width:900px){
  .hero-title {
    font-size: clamp(2.2rem, 6.4vw, 4.1rem);
  }
}

@media(max-width:640px){
  .hero-actions {
    gap: 8px;
  }
}

@media(max-width:480px){
  .footer-logo-image {
    height: 36px;
    max-width: min(48vw, 140px);
  }
}
#demo.demo-stage .section-title {
  font-size:clamp(2.45rem,3.65vw,4.15rem);
}
#demo.demo-stage .section-sub {
  max-width:900px;
  font-size:clamp(.96rem,1.08vw,1.12rem);
}
#demo .demo-header-products {
  gap:10px;
}
#demo .demo-header-products span {
  min-height:62px;
  padding:12px 14px 12px 58px;
  border-radius:16px;
}
#demo .demo-header-products span::before {
  left:14px;
  width:31px;
  height:31px;
  border-radius:11px;
}
#demo .demo-header-products strong {
  font-size:1.02rem;
}
#demo .demo-header-products small {
  font-size:.78rem;
}
#demo .demo-scenario-groups {
  display:grid;
  gap:6px;
  width:100%!important;
  margin:10px auto 12px;
}
#demo .demo-scenario-group {
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,210px) minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:0;
  width:100%;
  overflow:hidden;
  padding:7px 8px;
  border:1px solid rgba(34,211,238,.14);
  border-radius:15px;
  background:
    linear-gradient(90deg, rgba(8,47,73,.26), rgba(15,23,42,.62) 28%, rgba(2,6,23,.56));
}
#demo .demo-scenario-group--guided {
  border-color:rgba(167,139,250,.14);
  background:
    linear-gradient(90deg, rgba(88,28,135,.2), rgba(15,23,42,.58) 30%, rgba(2,6,23,.54));
}
#demo .demo-scenario-group::after {
  display:none;
}
#demo .demo-scenario-group__head {
  position:relative;
  inset:auto;
  z-index:2;
  display:flex;
  align-items:center;
  max-width:none;
  min-width:0;
}
#demo .demo-scenario-group__head > div,
#demo .demo-scenario-group__head h3,
#demo .demo-scenario-group__head p,
#demo .demo-scenario-group__head small {
  display:none!important;
}
#demo .demo-scenario-group__eyebrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  max-width:100%;
  width:100%;
  margin:0;
  padding:0 10px;
  border:1px solid rgba(34,211,238,.18);
  border-radius:999px;
  color:#67e8f9;
  background:rgba(34,211,238,.1);
  font-size:.64rem;
  font-weight:950;
  letter-spacing:.03em;
  line-height:1.12;
  text-align:center;
  white-space:normal;
}
#demo .demo-scenario-group--guided .demo-scenario-group__eyebrow {
  border-color:rgba(196,181,253,.18);
  color:#c4b5fd;
  background:rgba(139,92,246,.11);
}
#demo .demo-scenario-grid,
#demo .demo-scenario-grid--guided {
  display:flex;
  gap:8px;
  width:max-content;
  min-width:100%;
  max-width:none;
  overflow:visible;
  will-change:transform;
  animation:demo-compact-rail 40s ease-in-out infinite!important;
  transform:none;
}
#demo .demo-scenario-grid--guided {
  animation-duration:34s!important;
}
#demo .demo-scenario-group:hover .demo-scenario-grid,
#demo .demo-scenario-group:focus-within .demo-scenario-grid {
  animation-play-state:paused!important;
}
#demo .demo-scenario-grid .demo-scenario-card {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:7px;
  row-gap:6px;
  flex:0 0 clamp(194px,16vw,240px);
  width:clamp(194px,16vw,240px);
  min-width:0;
  min-height:58px;
  height:auto;
  max-width:none;
  overflow:hidden;
  padding:8px 10px;
  border-radius:13px;
  text-align:left;
  white-space:normal;
}
#demo .demo-scenario-grid .demo-sample-pill--active.demo-scenario-card {
  padding-right:32px;
}
#demo .demo-scenario-grid .demo-sample-pill--active.demo-scenario-card::after {
  inset:9px 9px auto auto;
  width:12px;
  height:12px;
}
#demo .demo-scenario-grid .demo-scenario-badge,
#demo .demo-scenario-grid .demo-scenario-sector {
  min-height:0;
  max-width:100%;
  padding:3px 6px;
  font-size:.56rem;
  line-height:1;
  white-space:nowrap;
}
#demo .demo-scenario-grid .demo-scenario-sector {
  overflow:hidden;
  text-overflow:ellipsis;
}
#demo .demo-scenario-grid .demo-scenario-title {
  display:-webkit-box;
  grid-column:1/-1;
  overflow:hidden;
  font-size:clamp(.78rem,.84vw,.9rem);
  line-height:1.13;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
#demo .demo-scenario-grid .demo-scenario-summary,
#demo .demo-scenario-grid .demo-scenario-proof,
#demo .demo-scenario-grid .demo-scenario-lanes {
  display:none!important;
}
#demo .demo-command-surface--decision {
  margin-top:0;
  padding:12px;
  border-radius:20px;
}
#demo .demo-command-console {
  width:min(1040px,100%);
  margin:0 auto;
  padding:14px;
  border-color:rgba(245,158,11,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(34,211,238,.08),
    0 20px 54px rgba(2,6,23,.32),
    0 0 46px rgba(245,158,11,.1);
}
#demo .demo-command-input-wrap {
  grid-template-columns:52px minmax(0,1fr);
  padding:15px 16px;
  border-radius:19px;
}
#demo .demo-command-input-wrap > span:not(.demo-command-input-icon) {
  color:#f8fafc;
  font-size:1rem;
  letter-spacing:0;
  text-transform:none;
}
#demo .demo-command-input-wrap small {
  color:rgba(226,232,240,.78);
  font-size:.82rem;
}
#demo .demo-command-input-wrap input {
  min-height:62px;
  padding:0 18px;
  text-align:left;
  font-size:clamp(1.05rem,1.6vw,1.24rem);
}
#demo .demo-orchestrator-bar {
  width:min(1040px,100%);
  margin:10px auto 0;
  padding:9px;
  border-radius:16px;
}
#demo .demo-orchestrator-copy strong {
  font-size:.95rem;
}
#demo .demo-orchestrator-actions {
  gap:8px;
}
#demo .demo-orchestrator-btn {
  min-height:40px;
  padding:0 15px;
}
#demo .demo-history {
  width:min(1040px,100%);
  padding:9px 10px;
}
#demo .demo-history-head {
  margin-bottom:7px;
}
#demo .demo-history-list {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#demo .demo-history-list button {
  min-height:58px;
  padding:8px 9px 8px 32px;
}
#demo .demo-history-scope {
  display:none;
}
#demo .demo-decision-grid {
  margin-top:12px;
}
@keyframes demo-compact-rail {
  0%, 100% { transform:translate3d(0,0,0); }
  48%, 56% { transform:translate3d(-10%,0,0); }
}
@media(max-width:1180px){
  #demo.demo-stage .section-header {
    grid-template-columns:1fr;
  }
  #demo .demo-header-products {
    max-width:720px;
  }
  #demo .demo-history-list {
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  #demo .demo-scenario-group {
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
  }
  #demo .demo-scenario-group__head {
    justify-content:flex-start;
  }
  #demo .demo-scenario-grid,
  #demo .demo-scenario-grid--guided {
    display:flex!important;
    grid-template-columns:none!important;
    flex-wrap:nowrap!important;
    width:100%;
    min-width:0;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    animation:none!important;
    scrollbar-width:none;
  }
  #demo .demo-scenario-grid::-webkit-scrollbar {
    display:none;
  }
  #demo .demo-scenario-grid .demo-scenario-card {
    flex:0 0 72%;
    width:72%;
    scroll-snap-align:start;
  }
  #demo .demo-command-input-wrap {
    grid-template-columns:42px minmax(0,1fr);
    padding:12px;
  }
  #demo .demo-command-input-icon {
    width:40px;
    height:40px;
    border-radius:14px;
  }
  #demo .demo-command-input-wrap input {
    min-height:56px;
    font-size:1rem;
  }
}
@media(prefers-reduced-motion:reduce){
  #demo .demo-scenario-grid,
  #demo .demo-scenario-grid--guided {
    animation:none!important;
  }
}

.footer-inherit-link {
  color: inherit;
}
@media(max-width:760px){
  #demo .demo-scenario-grid--guided {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
    overflow:visible;
  }
  #demo .demo-scenario-grid--guided .demo-scenario-card {
    width:auto;
    min-height:52px;
    flex:auto;
  }
  #demo .demo-scenario-grid--guided .demo-scenario-sector {
    display:none;
  }
}
@media(max-width:760px){
  #demo .demo-history-list {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #demo .demo-history-list::-webkit-scrollbar {
    display:none;
  }
  #demo .demo-history-list button {
    flex:0 0 min(84vw, 280px);
    width:min(84vw, 280px);
    scroll-snap-align:start;
  }
}

#demo .demo-scenario-groups[hidden] {
  display:none!important;
}
[data-theme="light"] #demo .demo-command-input-wrap {
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,245,249,.94));
  border-color:rgba(217,119,6,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 16px 38px rgba(15,23,42,.08);
}
[data-theme="light"] #demo .demo-command-input-wrap > span:not(.demo-command-input-icon) {
  color:#0f172a;
}
[data-theme="light"] #demo .demo-command-input-wrap small {
  color:rgba(51,65,85,.78);
}
[data-theme="light"] #demo .demo-command-input-icon {
  background:rgba(14,165,233,.08);
  border-color:rgba(14,165,233,.28);
}
[data-theme="light"] #demo .demo-command-input-wrap input {
  background:rgba(255,255,255,.96);
  color:#0f172a;
  border-color:rgba(217,119,6,.24);
}

/* P1 language visibility: both TR and EN must stay visible. */
.nav-segment [data-lang-btn="en"] {
  display:inline-flex;
}
.nav-segment [data-lang-btn] {
  min-width:42px;
}

/* P1 demo table polish: keep the real render, make overflow discoverable. */
#demo .demo-decision-grid .table-scroll-hint {
  display:flex;
  justify-content:flex-end;
  padding:0 14px 5px;
  pointer-events:none;
}
#demo .demo-decision-grid .table-scroll-hint span {
  position:relative;
  min-height:24px;
  padding:5px 10px 5px 28px;
  border:1px solid rgba(34,211,238,.16);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(8,16,30,.84),rgba(15,23,42,.64));
  color:rgba(226,232,240,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(2,6,23,.18);
}
#demo .demo-decision-grid .table-scroll-hint span::before {
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:10px;
  height:10px;
  border-top:2px solid rgba(34,211,238,.9);
  border-right:2px solid rgba(34,211,238,.9);
  transform:translateY(-50%) rotate(45deg);
  animation:demo-scroll-nudge 1.6s ease-in-out infinite;
}
@keyframes demo-scroll-nudge {
  0%,100%{transform:translateY(-50%) translateX(0) rotate(45deg);opacity:.55}
  50%{transform:translateY(-50%) translateX(4px) rotate(45deg);opacity:1}
}
#demo .demo-decision-grid .demo-table-scroll {
  position:relative;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(34,211,238,.78) rgba(15,23,42,.62);
}
#demo .demo-decision-grid .demo-table-scroll::-webkit-scrollbar {
  width:8px;
  height:8px;
}
#demo .demo-decision-grid .demo-table-scroll::-webkit-scrollbar-track {
  background:rgba(15,23,42,.58);
  border-radius:999px;
}
#demo .demo-decision-grid .demo-table-scroll::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:linear-gradient(90deg,rgba(34,211,238,.92),rgba(16,185,129,.78),rgba(245,158,11,.74));
  border:2px solid rgba(15,23,42,.58);
}
#demo .demo-decision-grid .demo-table-scroll::after {
  content:"";
  position:sticky;
  right:0;
  top:0;
  float:right;
  width:34px;
  height:1px;
  min-height:100%;
  margin-left:-34px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(2,6,23,.62));
}
[data-theme="light"] #demo .demo-decision-grid .table-scroll-hint span {
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,245,249,.9));
  border-color:rgba(14,165,233,.24);
  color:#334155;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
[data-theme="light"] #demo .demo-decision-grid .demo-table-scroll {
  scrollbar-color:rgba(14,165,233,.72) rgba(226,232,240,.8);
}
[data-theme="light"] #demo .demo-decision-grid .demo-table-scroll::-webkit-scrollbar-track {
  background:rgba(226,232,240,.8);
}
[data-theme="light"] #demo .demo-decision-grid .demo-table-scroll::-webkit-scrollbar-thumb {
  border-color:rgba(226,232,240,.8);
}
[data-theme="light"] #demo .demo-decision-grid .demo-table-scroll::after {
  background:linear-gradient(90deg,transparent,rgba(248,250,252,.9));
}
[data-theme="light"] #demo .demo-decision-grid .demo-sheets-table th {
  background:linear-gradient(180deg,#0f172a,#172033);
  color:#f8fafc;
}
[data-theme="light"] #demo .demo-decision-grid .result-table-badge,
[data-theme="light"] #demo .demo-decision-grid .result-table-info {
  color:#0f172a;
}

/* P2 landing CTA feedback: keep real actions, add visible busy affordance. */
#demo .demo-orchestrator-btn,
.hero-live-console__actions .btn-primary,
.hero-live-console__actions .btn-secondary,
#demo .demo-card-cta {
  position:relative;
}
#demo .demo-orchestrator-btn.is-busy,
.hero-live-console__actions .btn-primary.is-busy,
.hero-live-console__actions .btn-secondary.is-busy,
#demo .demo-card-cta.is-busy {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.demo-busy-spinner {
  width:15px;
  height:15px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:currentColor;
  animation:demoBusySpin .7s linear infinite;
  flex:0 0 auto;
}
.demo-busy-label {
  display:inline-block;
}
@keyframes demoBusySpin {
  to { transform:rotate(360deg); }
}
[data-theme="light"] .demo-busy-spinner {
  border-color:rgba(15,23,42,.14);
  border-top-color:currentColor;
}
@media(max-width:640px){
  #demo .section-title {
    font-size:clamp(2rem,10vw,2.75rem);
    line-height:1.04;
    max-width:10ch;
    text-wrap:balance;
  }
  #demo .section-sub {
    max-width:32ch;
    font-size:.94rem;
    line-height:1.45;
  }
  #demo .demo-command-input-wrap {
    grid-template-columns:40px minmax(0,1fr);
    gap:10px 14px;
  }
  #demo .demo-command-input-wrap>span:not(.demo-command-input-icon) {
    font-size:1rem;
    line-height:1.25;
  }
  #demo .demo-command-input-wrap small {
    font-size:.78rem;
    line-height:1.35;
  }
  #demo .demo-decision-grid .table-scroll-hint {
    justify-content:flex-start;
    padding:0 8px 8px;
  }
  #demo .demo-decision-grid .table-scroll-hint span {
    min-height:26px;
    padding:6px 11px 6px 30px;
    font-size:.68rem;
  }
  #demo .demo-decision-grid .demo-table-scroll::after {
    display:block;
    width:22px;
    margin-left:-22px;
  }
}

/* Final scenario balance: full-width grids, no clipped cards; motion comes from a cheap light sweep. */
#demo .demo-scenario-groups {
  width:100%!important;
  max-width:none!important;
}
#demo .demo-scenario-group {
  width:100%;
}
#demo .demo-scenario-group::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(34,211,238,.08) 42%, rgba(245,158,11,.06) 50%, transparent 62%);
  transform:translateX(-100%);
  animation:demo-scenario-light 9s ease-in-out infinite;
}
#demo .demo-scenario-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  width:100%;
  min-width:0;
  gap:12px;
  animation:none!important;
  transform:none!important;
}
#demo .demo-scenario-grid--guided {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
#demo .demo-scenario-grid .demo-scenario-card {
  width:auto;
  min-width:0;
  max-width:none;
  flex:auto;
  padding:13px 12px;
}
#demo .demo-scenario-grid .demo-scenario-title {
  font-size:clamp(.88rem,.9vw,1.04rem);
}
#demo .demo-scenario-grid .demo-scenario-badge,
#demo .demo-scenario-grid .demo-scenario-sector {
  font-size:.62rem;
}
@keyframes demo-scenario-light {
  0%,64%,100% { transform:translateX(-100%); opacity:0; }
  15%,42% { opacity:1; }
  58% { transform:translateX(100%); opacity:0; }
}
@media(max-width:1180px){
  #demo .demo-scenario-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #demo .demo-scenario-grid--guided {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:720px){
  #demo .demo-scenario-grid,
  #demo .demo-scenario-grid--guided {
    display:flex;
    width:100%;
    min-width:0;
    justify-content:flex-start;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #demo .demo-scenario-grid::-webkit-scrollbar {
    display:none;
  }
  #demo .demo-scenario-grid .demo-scenario-card {
    flex:0 0 82%;
    width:82%;
    scroll-snap-align:start;
  }
}
@media(prefers-reduced-motion:reduce){
  #demo .demo-scenario-group::after {
    animation:none;
  }
}