* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --black: #0a0a0a;
  --white: #fff;
  --off: #f7f8fa;
  --green: #16a34a;
  --green-light: #22c55e;
  --green-pale: #dcfce7;
  --green-glow: rgba(34, 197, 94, 0.15);
  --red: #dc2626;
  --red-pale: #fee2e2;
  --blue: #2563eb;
  --blue-pale: #dbeafe;
  --yellow: #d97706;
  --yellow-pale: #fef3c7;
  --gray: #6b7280;
  --border: #e5e7eb;
  --dark-surface: #111827;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  background: #fff;
  color: var(--black);
}
#stage {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ── SCENE ── */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 48px 64px;
  overflow: hidden;
  transition: opacity 0.6s ease;
}
.scene.active {
  opacity: 1;
  pointer-events: all;
}
.scene.light {
  background: #fff;
  color: var(--black);
}
.scene.dark {
  background: #fff;
  color: var(--black);
}
.scene.green-bg {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  color: #fff !important;
}
.scene.gray-bg {
  background: var(--off);
  color: var(--black);
}

/* ── BRAND BAR ── */
.bbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.scene.light .bbar {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
}
.scene.dark .bbar {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-color: var(--border);
}
.scene.green-bg .bbar {
  background: rgba(5, 46, 22, 0.9);
  backdrop-filter: blur(8px);
}
.scene.gray-bg .bbar {
  background: rgba(247, 248, 250, 0.97);
  backdrop-filter: blur(8px);
  border-color: var(--border);
}
.blogo {
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.3px;
}
.blogo .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-light);
}
.scene.light .blogo,
.scene.gray-bg .blogo {
  color: var(--black);
}
.bright {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── PROGRESS ── */
#pbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  width: 0%;
  z-index: 300;
  transition: width 0.3s;
}

/* ── CONTROLS ── */
#ctrl {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 300;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  padding: 7px 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
#ctrl button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--black);
  transition: background 0.15s;
}
#ctrl button:hover {
  background: var(--off);
}
#scnt {
  font-size: 11px;
  color: var(--gray);
  min-width: 44px;
  text-align: center;
  font-weight: 600;
}
#slabel {
  font-size: 10px;
  color: var(--gray);
  max-width: 160px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── ANIMATIONS ── */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes slideRight {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@keyframes pulse-green {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

/* ── EYEBROW ── */
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0;
  animation: fadeIn 0.4s 0.1s forwards;
}
.eyebrow.green {
  color: var(--green-light);
}
.eyebrow.gray {
  color: var(--gray);
}

/* ── BIG Q STYLE ── */
.big-q {
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -1px;
  text-align: center;
  line-height: 1.2;
  max-width: 780px;
}
.big-q .hl {
  color: var(--green-light);
}
.big-q .red {
  color: #f87171;
}

/* ── ANSWER PILL ── */
.ans-wrap {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.ans-pill {
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: default;
  opacity: 0;
  border: 2px solid transparent;
  transition: transform 0.15s;
}
.ans-pill:hover {
  transform: scale(1.04);
}
.ans-pill.no {
  background: var(--red-pale);
  color: var(--red);
  border-color: #fca5a5;
  animation: fadeUp 0.4s forwards;
}
.ans-pill.maybe {
  background: var(--yellow-pale);
  color: var(--yellow);
  border-color: #fde68a;
  animation: fadeUp 0.4s forwards;
}
.ans-pill.yes {
  background: var(--green-pale);
  color: var(--green);
  border-color: #86efac;
  animation: fadeUp 0.4s forwards;
}

/* ── STAT ROW ── */
.stat-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 860px;
  width: 100%;
}
.stat-box {
  flex: 1;
  min-width: 160px;
  max-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  opacity: 0;
  animation: fadeUp 0.4s forwards;
}
.stat-box .snum {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--black);
}
.stat-box .snum em {
  color: var(--green-light);
  font-style: normal;
  font-size: 24px;
}
.stat-box .slbl {
  font-size: 11px;
  color: var(--gray);
  margin-top: 4px;
  line-height: 1.4;
}
.scene.light .stat-box,
.scene.gray-bg .stat-box {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.scene.light .stat-box .snum,
.scene.gray-bg .stat-box .snum {
  color: var(--black);
}
.scene.light .stat-box .slbl,
.scene.gray-bg .stat-box .slbl {
  color: var(--gray);
}

/* ── FLOW ── */
.flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 900px;
}
.fn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
  animation: fadeUp 0.45s forwards;
}
.fdash {
  flex: 1;
  border-top: 2.5px dashed #d1d5db;
  margin-top: 32px;
  opacity: 0;
  animation: fadeIn 0.4s forwards;
}
.scene.light .fdash,
.scene.gray-bg .fdash {
  border-color: #ccc;
}
.fn-ico {
  font-size: 48px;
  line-height: 1;
}
.fn-lbl {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  max-width: 110px;
}
.fn-sub {
  font-size: 10px;
  color: var(--gray);
  text-align: center;
  max-width: 110px;
  line-height: 1.4;
}
.scene.light .fn-sub,
.scene.gray-bg .fn-sub {
  color: var(--gray);
}
.scan-chip {
  background: var(--green-pale);
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid #86efac;
  margin-top: 4px;
  opacity: 0;
  animation: popIn 0.3s forwards;
}

/* ── MISMATCH TABLE ── */
.mm-wrap {
  display: flex;
  gap: 18px;
  max-width: 880px;
  width: 100%;
}
.mm-col {
  flex: 1;
  border-radius: 16px;
  padding: 18px 16px;
  opacity: 0;
  animation: fadeUp 0.5s forwards;
}
.mm-col.sys {
  background: #fff;
  border: 1.5px solid var(--border);
}
.mm-col.phy {
  background: #fffbeb;
  border: 1.5px dashed #f59e0b;
}
.mm-col h4 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.mm-col.sys h4 {
  color: var(--blue);
}
.mm-col.phy h4 {
  color: var(--yellow);
}
.mm-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 5px;
}
.mm-row.bad {
  background: var(--red-pale);
  text-decoration: line-through;
  opacity: 0.7;
}
.mm-row.good {
  background: var(--green-pale);
}
.mm-row.unknown {
  background: var(--yellow-pale);
}
.mm-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.mm-tag.ok {
  background: #dcfce7;
  color: var(--green);
  border: 1px solid #86efac;
}
.mm-tag.bad {
  background: var(--red-pale);
  color: var(--red);
  border: 1px solid #fca5a5;
}
.mm-tag.unk {
  background: var(--yellow-pale);
  color: var(--yellow);
  border: 1px solid #fde68a;
}
.vs-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 32px;
  opacity: 0;
  animation: zoomIn 0.4s 0.9s forwards;
}

/* ── WAREHOUSE STAGES ── */
.wh-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 820px;
}
.wh-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  opacity: 0;
  animation: fadeLeft 0.4s forwards;
  transition: background 0.2s;
}
.wh-item:hover {
  background: var(--off);
}
.scene.light .wh-item,
.scene.gray-bg .wh-item {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.wh-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-light);
  flex-shrink: 0;
}
.wh-ico {
  font-size: 24px;
  flex-shrink: 0;
}
.wh-body {
  flex: 1;
}
.wh-body h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--black);
}
.wh-body p {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.4;
}
.scene.light .wh-body p,
.scene.gray-bg .wh-body p {
  color: var(--gray);
}
.wh-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── PERSONA CARDS ── */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 860px;
  width: 100%;
}
.p-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 18px;
  opacity: 0;
  animation: fadeUp 0.4s forwards;
}
.scene.light .p-card,
.scene.gray-bg .p-card {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.p-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.p-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.p-name {
  font-size: 14px;
  font-weight: 800;
}
.p-role {
  font-size: 10px;
  color: var(--gray);
}
.p-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.p-list li {
  font-size: 11px;
  color: #444;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  line-height: 1.5;
}
.p-list li::before {
  content: "→";
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.scene.light .p-list li,
.scene.gray-bg .p-list li {
  color: #444;
}

/* ── FEAT CARDS ── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 900px;
  width: 100%;
}
.f-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  opacity: 0;
  animation: fadeUp 0.4s forwards;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition:
    background 0.2s,
    transform 0.2s;
}
.f-card:hover {
  background: var(--off);
  transform: translateY(-2px);
}
.f-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, linear-gradient(90deg, #22c55e, #86efac));
}
.f-card .fnum {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--black);
}
.f-card .fnum em {
  font-style: normal;
  color: var(--green-light);
  font-size: 20px;
}
.f-card h3 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--black);
}
.f-card p {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.5;
}
.f-card .for-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gray);
}

/* ── CLOUD TOOLTIP ── */
.cloud {
  position: absolute;
  background: #1f2937;
  color: #fff;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 200px;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition:
    opacity 0.25s,
    transform 0.25s;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
}
.cloud::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: #1f2937;
}
.has-cloud {
  cursor: help;
  position: relative;
}
.has-cloud:hover .cloud {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── COMPARE TABLE ── */
.cmp {
  width: 100%;
  max-width: 820px;
  border-collapse: collapse;
  opacity: 0;
  animation: fadeUp 0.5s 0.3s forwards;
}
.cmp th {
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
}
.scene.light .cmp th,
.scene.gray-bg .cmp th {
  border-color: var(--border);
  color: var(--gray);
}
.cmp td {
  padding: 10px 14px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.scene.light .cmp td,
.scene.gray-bg .cmp td {
  border-color: var(--border);
}
.cmp tr:hover td {
  background: var(--off);
}
.scene.light .cmp tr:hover td,
.scene.gray-bg .cmp tr:hover td {
  background: var(--off);
}
.cmp .c-area {
  font-weight: 700;
  font-size: 12px;
}
.cmp .c-bad {
  color: #f87171;
  font-weight: 500;
}
.cmp .c-good {
  color: var(--green-light);
  font-weight: 600;
}
.cmp tr {
  opacity: 0;
  animation: fadeLeft 0.4s forwards;
}

/* ── SPACING FIXES ── */
.title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.8px;
  text-align: center;
  line-height: 1.15;
  color: var(--black);
  margin-bottom: 6px;
  opacity: 0;
  animation: fadeDown 0.5s 0.2s forwards;
}
.subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray);
  text-align: center;
  max-width: 620px;
  line-height: 1.65;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeDown 0.5s 0.35s forwards;
}
.scene.green-bg .title {
  color: #fff;
}
.scene.green-bg .subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* ── MISMATCH SLIDE ── */
@keyframes travelBox {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateX(var(--tx));
    opacity: 0;
  }
}
@keyframes excessPop {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes wrongFlash {
  0%,
  100% {
    background: var(--red-pale);
    border-color: #fca5a5;
  }
  50% {
    background: #fee;
    border-color: var(--red);
  }
}
.mm-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 940px;
  position: relative;
}
.mm-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
}
.mm-icon {
  font-size: 46px;
  line-height: 1;
}
.mm-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}
.mm-sub {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.4;
  max-width: 110px;
}
.mm-conn {
  flex: 1;
  margin-top: 30px;
  height: 2px;
  position: relative;
  opacity: 0;
  animation: fadeIn 0.4s forwards;
}
.mm-conn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: currentColor;
  clip-path: inset(0);
  opacity: 0.25;
}
.mm-conn.dashed {
  border-top: 2.5px dashed #d1d5db;
}
.mm-conn.red-dash {
  border-top: 2.5px dashed #fca5a5;
}
.box-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid;
  white-space: nowrap;
}
.box-tag.abc1 {
  background: #f5f3ff;
  border-color: #7c3aed;
  color: #7c3aed;
}
.box-tag.abc2 {
  background: #dcfce7;
  border-color: #16a34a;
  color: #16a34a;
}
.box-tag.abc3 {
  background: #dbeafe;
  border-color: #2563eb;
  color: #2563eb;
}
.box-tag.wrong {
  background: var(--red-pale);
  border-color: var(--red);
  color: var(--red);
  animation: wrongFlash 1s 2.5s ease 3;
}
.box-tag.excess {
  background: var(--red-pale);
  border-color: var(--red);
  color: var(--red);
  opacity: 0;
  animation: excessPop 0.4s forwards;
}


/* ── MOBILE RESPONSIVE: SLIDE 8 ONWARD ── */
@media (max-width: 900px) {
  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) {
    justify-content: flex-start;
    padding: 88px 20px 92px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .bbar {
    padding: 12px 16px;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .title {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: 1.15;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .subtitle {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 16px !important;
  }

  :is(#s8, #s8b) .flow,
  #s10 .flow,
  #s11 .flow {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 100%;
  }

  :is(#s8, #s8b) .fn,
  #s10 .fn,
  #s11 .fn {
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 12px;
  }

  #s8 .fdash,
  #s10 .fdash,
  #s11 .fdash {
    width: 2px;
    height: 22px;
    margin: 0 auto;
    border-top: 0 !important;
    border-left: 2px dashed #d1d5db;
  }

  #s8b .mm-stage {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 100%;
  }

  #s8b .mm-node {
    width: 100% !important;
    max-width: none !important;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 12px;
  }

  #s8b .mm-conn {
    width: 2px;
    min-height: 26px;
    margin: 0 auto;
    height: 26px;
  }

  #s8b .mm-conn::after {
    display: none;
  }

  #s8b .mm-conn.dashed,
  #s8b .mm-conn.red-dash {
    border-top: 0;
    border-left: 2.5px dashed currentColor;
  }

  #s9 > div[style*="display: flex;"][style*="max-width: 880px"] {
    flex-direction: column !important;
    gap: 14px !important;
  }

  #s9 > div[style*="display: flex;"][style*="max-width: 880px"] > div {
    min-width: 0;
    width: 100%;
  }

  #s10 .flow > div:last-child {
    width: 100%;
  }

  #s12 .wh-list {
    gap: 12px;
    max-width: 100%;
  }

  #s12 .wh-item {
    align-items: flex-start;
    padding: 14px;
  }

  #s12 .wh-badge {
    margin-top: 4px;
  }

  #s13 .feat-grid,
  #s14 .persona-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  #s15 .cmp,
  #s15 .cmp thead,
  #s15 .cmp tbody,
  #s15 .cmp tr,
  #s15 .cmp th,
  #s15 .cmp td {
    display: block;
    width: 100%;
  }

  #s15 .cmp thead {
    display: none;
  }

  #s15 .cmp {
    border: 0;
    max-width: 100%;
  }

  #s15 .cmp tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  #s15 .cmp td {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }

  #s15 .cmp td:last-child {
    border-bottom: 0;
  }

  #s15 .cmp td.c-area {
    background: var(--off);
    font-size: 12px;
  }

  #s16 .stat-row {
    gap: 12px;
  }

  #s16 .stat-box {
    min-width: calc(50% - 6px);
    max-width: none;
  }

  #ctrl {
    bottom: 10px;
    padding: 6px 12px;
    max-width: calc(100vw - 20px);
  }

  #slabel {
    max-width: 110px;
  }
}

@media (max-width: 640px) {
  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) {
    padding: 82px 14px 86px;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .bbar {
    padding: 10px 12px;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .blogo {
    font-size: 13px;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .bright {
    font-size: 9px;
    letter-spacing: 0.8px;
  }

  :is(#s8, #s8b, #s9, #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17) .eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-align: center;
  }

  #s8 .fn,
  #s8b .mm-node,
  #s10 .fn,
  #s11 .fn,
  #s12 .wh-item,
  #s13 .f-card,
  #s14 .p-card,
  #s15 .cmp tr {
    border-radius: 14px;
  }

  #s9 > div[style*="display: flex;"][style*="max-width: 880px"] > div,
  #s16 .stat-box {
    width: 100%;
    min-width: 100%;
  }

  #s12 .wh-item {
    flex-wrap: wrap;
    gap: 10px;
  }

  #s12 .wh-body {
    width: calc(100% - 56px);
  }

  #s12 .wh-badge {
    margin-left: 46px;
  }

  #s13 .fnum,
  #s16 .snum {
    font-size: 26px;
  }

  #s16 [style*="font-size: clamp(72px, 16vw, 150px)"] {
    font-size: clamp(58px, 22vw, 96px) !important;
    letter-spacing: -3px !important;
  }

  #ctrl {
    gap: 6px;
  }

  #ctrl button {
    font-size: 14px;
    padding: 2px 6px;
  }

  #scnt {
    min-width: 38px;
    font-size: 10px;
  }

  #slabel {
    display: none;
  }
}