/* The product tour follows the app's persistent sidebar and nested module navigation. */
.product-stage {
  max-width: 1320px;
}

/* The module wall replaces long feature copy with recognizable product states. */
.system-showcase {
  padding-top: 120px;
  padding-bottom: 120px;
}
.showcase-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
  margin-bottom: 44px;
}
.showcase-heading h2 {
  margin-top: 18px;
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 550;
}
.showcase-heading h2 span {
  color: #8994a9;
}
.showcase-heading > p {
  color: #a5b0c3;
  font-size: 15px;
  padding-bottom: 8px;
  white-space: nowrap;
}
.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.system-card {
  appearance: none;
  min-height: 245px;
  padding: 24px;
  border: 1px solid #2b3344;
  border-radius: 14px;
  background: radial-gradient(circle at 90% 10%, #6c8bd91a, transparent 42%), #10151f;
  color: #f4f7ff;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}
.system-card:hover {
  transform: translateY(-3px);
  border-color: #53678f;
  background: radial-gradient(circle at 90% 10%, #7698ec2b, transparent 48%), #131a26;
}
.system-card:focus-visible {
  outline-offset: 4px;
}
.system-label {
  color: #9fb8f5;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: auto;
}
.system-card > strong {
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 30px 0 8px;
  font-weight: 550;
}
.system-card > small {
  min-height: 34px;
  color: #93a0b6;
  font-size: 13px;
  line-height: 1.4;
}
.system-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
.system-pills span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #1a2231;
  color: #b8c3d7;
  font-size: 12px;
  line-height: 1;
}
.system-people {
  display: flex;
  margin: 30px 0 12px;
}
.system-people i {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-right: -7px;
  background: #263654;
  border: 2px solid #10151f;
  color: #dfe8ff;
  font-size: 12px;
  font-style: normal;
}
.system-bars {
  display: grid;
  gap: 7px;
  margin: 34px 0 14px;
}
.system-bars i {
  height: 8px;
  width: var(--value);
  border-radius: 10px;
  background: linear-gradient(90deg, #7d97dc, #b8c7ef);
}
.camera-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  height: 72px;
  margin: 25px 0 12px;
}
.camera-grid i {
  display: block;
  border: 1px solid #36425b;
  border-radius: 5px;
  background: linear-gradient(145deg, #273147, #141a25);
  position: relative;
}
.camera-grid i::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  left: 8px;
  top: 8px;
  background: #9bb2ee;
}
.camera-grid i:first-child {
  grid-row: span 2;
}

@media (max-width: 1000px) {
  .system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .system-showcase {
    padding-top: 76px;
    padding-bottom: 76px;
  }
  .showcase-heading {
    display: block;
    margin-bottom: 28px;
  }
  .showcase-heading h2 {
    font-size: 42px;
  }
  .showcase-heading > p {
    margin-top: 18px;
    white-space: normal;
  }
  .system-grid {
    grid-template-columns: 1fr;
  }
  .system-card {
    min-height: 220px;
  }
}
.tour-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 4px 24px;
}
.tour-intro p {
  color: #a3adbf;
  margin-top: 10px;
  font-size: 16px;
}
.tour-jump,
.module-explore,
.workflow-stories button,
.lottery-depth-grid button {
  font: inherit;
  background: none;
  color: #bed0ff;
  border: 0;
  border-bottom: 1px solid #657598;
  padding: 10px 0;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
}
.tour-jump {
  flex-shrink: 0;
}
.product-demo {
  --demo-border: #2a3040;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  border: 1px solid #3b4358;
  border-radius: 15px;
  background: #0e121b;
  box-shadow: 0 30px 90px #0005;
  min-height: 820px;
  overflow: hidden;
}
.demo-sidebar {
  border-right: 1px solid var(--demo-border);
  background: #0b0e15;
  padding: 23px 13px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.demo-brand {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-brand .wordmark {
  font-size: 30px;
}
.demo-brand > span:last-child {
  font-size: 12px;
  letter-spacing: 1px;
  color: #7e8ba5;
}
.demo-store {
  display: flex;
  gap: 9px;
  align-items: center;
  border: 1px solid #2b3243;
  border-radius: 7px;
  padding: 11px 9px;
  margin: 22px 0 13px;
  font-size: 12px;
}
.demo-store small,
.demo-profile small {
  display: block;
  font-size: 12px;
  color: #8491a8;
  margin-top: 4px;
}
.demo-store .store-avatar {
  width: 29px;
  height: 32px;
}
.demo-search input {
  width: 100%;
  border: 1px solid #2c3445;
  border-radius: 6px;
  background: #141a26;
  color: white;
  padding: 11px 10px;
  font: inherit;
  font-size: 13px;
}
.demo-search input::placeholder {
  color: #9ba7bc;
}
#demo-navigation {
  padding: 14px 0;
  max-height: 665px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #394259 transparent;
}
.module-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #a9b5ca;
}
.module-group summary::-webkit-details-marker {
  display: none;
}
.module-group summary svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.module-group summary:hover {
  background: #182133;
  color: #e8efff;
}
.module-group[open] summary {
  color: #d0ddfa;
}
.module-caret {
  margin-left: auto;
  font-size: 20px;
  transition: transform 0.2s;
}
.module-group[open] .module-caret {
  transform: rotate(90deg);
}
.module-pages {
  border-left: 1px solid #303c54;
  margin: 4px 0 8px 16px;
  padding-left: 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.module-pages button {
  font: inherit;
  border: 0;
  background: none;
  text-align: left;
  font-size: 12px;
  color: #94a3bd;
  border-radius: 5px;
  padding: 8px 9px;
  cursor: pointer;
}
.module-pages button:hover {
  color: #e3ecff;
  background: #182133;
}
.module-pages button[aria-current] {
  background: #24324f;
  color: #dce6ff;
}
.demo-profile {
  border-top: 1px solid #273046;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px 7px 0;
  margin-top: auto;
  font-size: 12px;
}
.demo-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.demo-topbar {
  border-bottom: 1px solid var(--demo-border);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 20px;
  min-height: 62px;
}
.demo-topbar > button {
  border: 0;
  background: none;
  color: #aebbd2;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 5px;
}
.demo-topbar > button:hover {
  color: white;
}
#demo-menu {
  font-size: 20px;
  line-height: 1;
}
#demo-breadcrumb {
  font-size: 12px;
  color: #a3b0c7;
  margin-right: auto;
}
.demo-badge {
  font-size: 12px;
  letter-spacing: 1px;
  color: #93a7d1;
  border: 1px solid #303e5d;
  border-radius: 4px;
  padding: 6px 7px;
  white-space: nowrap;
}
.demo-module-heading {
  padding: 29px 27px 22px;
}
.demo-kicker {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #96afef;
  text-transform: uppercase;
}
.demo-module-heading h3 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -1.1px;
  margin: 12px 0;
}
.demo-module-heading p {
  font-size: 14px;
  line-height: 1.65;
  color: #9daac1;
  max-width: 650px;
}
.demo-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 27px 17px;
  border-bottom: 1px solid var(--demo-border);
}
.demo-subtabs button {
  font: inherit;
  font-size: 12px;
  color: #a7b4ce;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 9px 11px;
  cursor: pointer;
}
.demo-subtabs button[aria-selected="true"] {
  background: #202d46;
  border-color: #3d5279;
  color: #dbe6ff;
}
.demo-subtabs button:hover {
  background: #202938;
}
#demo-screen {
  padding: 25px 27px;
  flex: 1;
  min-width: 0;
}
.demo-page-title {
  margin-bottom: 21px;
}
.demo-page-title h4 {
  font-size: 19px;
  letter-spacing: -0.4px;
  font-weight: 550;
  margin: 0 0 7px;
}
.demo-page-title p {
  font-size: 13px;
  line-height: 1.65;
  color: #8e9db6;
  max-width: 640px;
}
.workspace-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.workspace-stats > div {
  background: #141b28;
  border: 1px solid #2b3447;
  border-radius: 8px;
  padding: 17px;
  min-width: 0;
}
.workspace-stats span {
  font-size: 12px;
  color: #a7b5ce;
  display: block;
}
.workspace-stats strong {
  display: block;
  font-size: 27px;
  letter-spacing: -1px;
  font-weight: 550;
  margin: 10px 0;
}
.workspace-stats small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: #8899b6;
}
.workspace-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 15px;
}
.workspace-chart {
  border: 1px solid #29364b;
  border-radius: 9px;
  background: #121a28;
  padding: 19px;
}
.workspace-chart > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.workspace-chart b {
  font-weight: 500;
}
.workspace-chart > div > span {
  color: #8a9cba;
  font-size: 12px;
}
.workspace-chart svg {
  width: 100%;
  height: 140px;
  margin-top: 25px;
}
.workspace-activity {
  border: 1px solid #29364b;
  border-radius: 9px;
  padding: 19px;
  background: #121a28;
}
.workspace-activity > b {
  font-size: 13px;
  font-weight: 500;
}
.workspace-activity button {
  font: inherit;
  font-size: 12px;
  text-align: left;
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  border: 0;
  border-top: 1px solid #263248;
  background: none;
  color: #cfdaef;
  padding: 16px 0;
  cursor: pointer;
}
.workspace-activity button:first-of-type {
  margin-top: 14px;
}
.workspace-activity button > span {
  width: 29px;
  height: 29px;
  border-radius: 6px;
  background: #26334d;
  padding: 6px;
  flex-shrink: 0;
}
.workspace-activity svg {
  width: 17px;
  height: 17px;
}
.workspace-activity small {
  display: block;
  color: #7f91b0;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
}
.workspace-activity button:hover {
  color: white;
}
.demo-impact {
  border-top: 1px solid #303c54;
  padding: 18px 27px;
  background: #152039;
}
.demo-impact > span {
  font-size: 12px;
  letter-spacing: 1.4px;
  color: #94afe8;
}
.demo-impact p {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 7px;
  color: #d0ddf7;
}
.demo-status {
  padding: 13px 27px;
  font-size: 12px;
  line-height: 1.5;
  color: #8393af;
  background: #101724;
}
.sample-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #899bbb;
  display: block;
  margin-bottom: 12px;
}
.demo-records {
  overflow-x: auto;
  border: 1px solid #2a354a;
  border-radius: 8px;
  scrollbar-width: thin;
}
.demo-records table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.demo-records th {
  font-weight: 500;
  text-align: left;
  font-size: 12px;
  color: #93a5c4;
  padding: 14px;
  background: #182131;
  white-space: nowrap;
}
.demo-records td {
  padding: 17px 14px;
  border-top: 1px solid #283348;
  line-height: 1.5;
  color: #cbd7ec;
}
.record-status {
  font-size: 12px;
  color: #b4c9f1;
  background: #20304c;
  padding: 4px 7px;
  display: inline-block;
  border-radius: 4px;
  white-space: normal;
}
.demo-callout {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 2px solid #8ca9e6;
  background: #182236;
  color: #afc0df;
  line-height: 1.7;
  font-size: 13px;
}
.workspace-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.workspace-shortcuts button,
.pack-actions button,
.demo-primary {
  font: inherit;
  font-size: 12px;
  background: #253756;
  color: #dbe7ff;
  border: 1px solid #465e88;
  border-radius: 6px;
  padding: 10px 13px;
  cursor: pointer;
}
.workspace-shortcuts button:hover,
.pack-actions button:hover,
.demo-primary:hover {
  background: #374d73;
}
.workspace-shortcuts.large {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.workspace-shortcuts.large button {
  padding: 23px 15px;
}
.review-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.review-flow > div {
  border: 1px solid #2b3a53;
  background: #141f31;
  padding: 22px 16px;
  border-radius: 8px;
}
.review-flow > div > span {
  width: 26px;
  height: 26px;
  border: 1px solid #586e95;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #a9bfeb;
  font-size: 12px;
  margin-bottom: 22px;
}
.review-flow b {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}
.review-flow p {
  color: #91a3c1;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 10px;
}
.workflow-benefit {
  padding: 25px;
  margin-top: 20px;
  background: #19243a;
  border-radius: 8px;
}
.workflow-benefit > span {
  font-size: 12px;
  letter-spacing: 1.4px;
  color: #8ea8da;
}
.workflow-benefit h4 {
  margin: 16px 0 10px;
  font-size: 23px;
  letter-spacing: -0.5px;
}
.workflow-benefit p {
  font-size: 14px;
  color: #a7b8d6;
  line-height: 1.7;
}
.pack-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pack-tile {
  background: #162034;
  border: 1px solid #3b4a65;
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
}
.pack-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #a4b5d3;
}
.pack-label > b {
  background: #becdf3;
  color: #172440;
  padding: 4px 6px;
  border-radius: 4px;
}
.pack-tile h4 {
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.4px;
  margin: 19px 0 8px;
}
.pack-tile > small {
  font-size: 12px;
  color: #7d91b6;
}
.pack-count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px;
  margin-top: 21px;
}
.pack-count > strong {
  font-size: 29px;
  letter-spacing: -1px;
  font-weight: 500;
}
.pack-count > span {
  font-size: 12px;
  color: #c2d0e9;
}
.pack-progress {
  height: 5px;
  background: #2e3d57;
  border-radius: 3px;
  margin-top: 12px;
  overflow: hidden;
}
.pack-progress i {
  height: 100%;
  display: block;
  background: #a5bced;
  transition: width 0.2s;
}
.pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}
.pack-actions button {
  flex-grow: 1;
  font-size: 12px;
  padding: 9px;
}
.pack-actions button[data-action="undo"] {
  background: transparent;
  color: #acbad2;
  border-color: #41516e;
}
.pack-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.linked-display {
  margin-top: 22px;
}
.linked-display > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.linked-display b {
  font-size: 13px;
  font-weight: 500;
}
.linked-display span {
  font-size: 12px;
  color: #8197bf;
}
.customer-board {
  border: 1px solid #4d5778;
  border-radius: 10px;
  background: linear-gradient(120deg, #15234a, #102b39);
  padding: 21px;
  min-width: 0;
  color: #f1f5ff;
}
.board-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: #adbcde;
}
.customer-board h4 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.6px;
  margin: 22px 0;
}
.board-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.board-game {
  background: #dce6ff0a;
  border: 1px solid #ffffff25;
  border-radius: 7px;
  padding: 14px 10px;
  min-width: 0;
}
.board-game > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 12px;
  color: #a6bddf;
}
.board-game h5 {
  font-size: 14px;
  font-weight: 500;
  margin: 21px 0 14px;
}
.board-next {
  font-size: 12px;
  letter-spacing: 1px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  color: #b5cae6;
}
.board-next strong {
  font-size: 25px;
  color: white;
  font-weight: 500;
  letter-spacing: -1px;
}
.board-game > small {
  display: block;
  font-size: 12px;
  color: #a1b6d4;
  line-height: 1.5;
  margin-top: 7px;
}
.board-bottom {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 17px;
  margin-top: 18px;
  border-top: 1px solid #ffffff24;
  font-size: 12px;
  color: #b6c7e2;
}
.customer-board > p {
  font-size: 12px;
  color: #869cbd;
  text-align: right;
  margin-top: 13px;
}
.customer-board.spotlight .board-games {
  grid-template-columns: 1fr;
}
.customer-board.spotlight .board-game h5 {
  font-size: 29px;
}
.customer-board.spotlight .board-game {
  padding: 22px;
}
.display-editor {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
}
.display-settings label {
  display: block;
  font-size: 12px;
  color: #aebeda;
  margin-bottom: 18px;
}
.display-settings select,
.display-settings input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  min-width: 0;
  background: #1b2940;
  color: #e2ebff;
  border: 1px solid #495b7e;
  border-radius: 6px;
  padding: 9px;
  font: inherit;
  font-size: 12px;
  margin-top: 8px;
}
.display-settings input[type="checkbox"] {
  accent-color: #a1b8eb;
}
.display-settings p {
  font-size: 12px;
  color: #7f94b8;
  line-height: 1.7;
}
.clock-preview,
.playback-preview {
  text-align: center;
  border: 1px solid #334461;
  border-radius: 10px;
  background: #172239;
  padding: 40px 20px;
}
.clock-preview > .avatar {
  margin: auto;
  width: 43px;
  height: 43px;
}
.clock-preview h4,
.playback-preview h4 {
  font-size: 23px;
  letter-spacing: -0.7px;
  margin: 23px 0 13px;
}
.clock-preview p,
.playback-preview p {
  font-size: 14px;
  color: #a0b3d2;
  line-height: 1.7;
}
.clock-preview button {
  margin: 25px 0 15px;
}
.clock-preview small,
.playback-preview small {
  display: block;
  color: #8298bb;
  font-size: 12px;
}
.playback-preview > svg {
  width: 48px;
  height: 48px;
  color: #95b3e8;
}
.playback-timeline {
  display: flex;
  justify-content: space-between;
  border-top: 3px solid #7995cb;
  padding-top: 16px;
  margin: 30px 0;
  color: #9fb6de;
  font-size: 12px;
}
.chat-user {
  margin: 0 0 22px auto;
  background: #24324a;
  border: 1px solid #3d4f70;
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.7;
}
.chat-answer {
  display: flex;
  gap: 15px;
  padding: 22px;
  border: 1px solid #3f5780;
  border-radius: 12px;
  background: #152642;
}
.chat-answer > svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #bad0ff;
}
.chat-answer b {
  font-size: 16px;
  font-weight: 500;
}
.chat-answer p {
  font-size: 14px;
  line-height: 1.8;
  color: #b6c9ea;
  margin-top: 13px;
}
.chat-answer span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: #849cbe;
  margin-top: 18px;
}
.nav-collapsed {
  grid-template-columns: 1fr;
}
.nav-collapsed .demo-sidebar {
  display: none;
}
.search-empty {
  font-size: 13px;
  line-height: 1.6;
  color: #95a6c0;
  padding: 12px;
}
.module-depth {
  grid-column: 1/-1;
  border-top: 1px solid #343e51;
  padding-top: 25px;
  margin-top: 27px;
}
.module-depth h4 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 23px;
  color: #cbd7f3;
}
.module-depth dl {
  margin: 0;
  display: grid;
  gap: 20px;
}
.feature-wide .module-depth dl {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.module-depth dt {
  font-size: 14px;
  color: #e1e7f4;
  margin-bottom: 7px;
}
.module-depth dd {
  margin: 0;
  color: #95a3bb;
  font-size: 14px;
  line-height: 1.7;
}
.module-explore {
  margin-top: 18px;
}
.feature-wide {
  row-gap: 0;
}
.feature-wide#surveillance {
  display: block;
}
.lottery-chapter {
  margin-top: 130px;
  padding: 100px 0;
  background: radial-gradient(ellipse at 80% 12%, #18344855, transparent 60%), #0d1420;
  border-top: 1px solid #2b3d57;
  border-bottom: 1px solid #2b3d57;
}
.lottery-chapter-heading {
  max-width: 870px;
}
.lottery-chapter-heading h2 {
  font-size: 68px;
  letter-spacing: -3px;
  line-height: 1.12;
  font-weight: 550;
  margin: 25px 0;
}
.lottery-chapter-heading h2 span {
  color: #9db9de;
}
.lottery-chapter-heading > p {
  font-size: 19px;
  color: #a5b8d2;
  line-height: 1.75;
  max-width: 660px;
}
.lottery-connected-demo {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  gap: 45px;
  align-items: center;
  margin-top: 62px;
  border: 1px solid #3b4a66;
  border-radius: 17px;
  padding: 35px;
  background: #111d30;
}
.surface-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #8eabd3;
  margin-bottom: 23px;
}
.lottery-counter h3 {
  font-size: 25px;
  letter-spacing: -0.8px;
  font-weight: 500;
}
.lottery-counter > p {
  font-size: 14px;
  line-height: 1.7;
  color: #9fb3d2;
  margin: 12px 0 22px;
}
.pack-tiles.compact {
  grid-template-columns: 1fr;
}
.pack-tiles.compact .pack-tile {
  background: #1e2b43;
}
.lottery-customer .customer-board {
  padding: 23px;
}
.lottery-demo-status {
  font-size: 12px;
  line-height: 1.7;
  color: #8ea3c2;
  margin-top: 19px;
}
.lottery-depth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 55px;
  margin-top: 65px;
}
.lottery-depth-grid article {
  border-top: 1px solid #3c4c67;
  padding-top: 24px;
}
.lottery-depth-grid article > span {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #95b7e6;
}
.lottery-depth-grid h3 {
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 20px 0 15px;
}
.lottery-depth-grid p {
  font-size: 16px;
  color: #a1b1c9;
  line-height: 1.8;
}
.lottery-depth-grid button {
  margin-top: 13px;
}
.lottery-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 65px;
  padding: 26px 0;
  border-top: 1px solid #354661;
  border-bottom: 1px solid #354661;
}
.lottery-facts b {
  font-size: 16px;
  display: block;
  font-weight: 500;
  color: #d4e3fa;
}
.lottery-facts span {
  font-size: 12px;
  color: #839bbd;
  line-height: 1.7;
  display: block;
  margin-top: 8px;
}
.chapter-footnote {
  font-size: 12px;
  color: #8198b7;
  line-height: 1.8;
  margin-top: 22px;
  max-width: 740px;
}
.connection-story h2 span,
.sync-story h2 span {
  color: #8da5d1;
}
.workflow-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.workflow-stories article {
  border-top: 1px solid #43506a;
  padding-top: 25px;
}
.workflow-stories article > span {
  font-size: 12px;
  letter-spacing: 1.3px;
  color: #9baed3;
}
.workflow-stories h3 {
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -0.7px;
  margin: 23px 0;
}
.workflow-stories ol {
  padding-left: 19px;
  font-size: 14px;
  line-height: 1.8;
  color: #9aaac4;
}
.workflow-stories li {
  padding-left: 5px;
  margin: 12px 0;
}
.sync-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 80px;
  padding-top: 120px;
}
.sync-story h2 {
  font-size: 48px;
  letter-spacing: -2px;
  font-weight: 550;
  line-height: 1.15;
  margin: 24px 0;
}
.sync-story > div > p {
  font-size: 17px;
  color: #9facbf;
  line-height: 1.8;
}
.sync-details article {
  display: flex;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid #303b51;
}
.sync-details article:first-child {
  padding-top: 0;
}
.sync-details article > span {
  color: #8ea9dd;
  font-size: 12px;
  padding-top: 4px;
}
.sync-details h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin-bottom: 12px;
}
.sync-details p {
  font-size: 14px;
  line-height: 1.8;
  color: #90a0b9;
}
.sync-note {
  grid-column: 1/-1;
  font-size: 12px;
  color: #7f91ac;
  margin-top: 10px;
}
@media (max-width: 1050px) {
  .product-demo {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .demo-store {
    flex-wrap: wrap;
  }
  .workspace-split {
    grid-template-columns: 1fr;
  }
  .workspace-activity {
    display: none;
  }
  .demo-module-heading h3 {
    font-size: 26px;
  }
  .demo-topbar {
    gap: 9px;
  }
  .demo-badge {
    display: none;
  }
  .display-editor {
    grid-template-columns: 1fr;
  }
  .display-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .display-settings p {
    grid-column: 1/-1;
  }
  .lottery-connected-demo {
    gap: 25px;
    padding: 25px;
  }
  .lottery-chapter-heading h2 {
    font-size: 57px;
  }
  .sync-story {
    gap: 35px;
  }
  .nav-collapsed {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .tour-intro {
    display: block;
  }
  .tour-intro p {
    font-size: 14px;
  }
  .tour-jump {
    margin-top: 12px;
  }
  .product-stage {
    padding: 0 14px;
  }
  .product-demo {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .demo-sidebar {
    max-height: 400px;
    border-right: 0;
    border-bottom: 1px solid #344561;
    padding: 18px;
  }
  .demo-brand,
  .demo-store,
  .demo-profile {
    display: none;
  }
  .demo-search input {
    font-size: 16px;
  }
  #demo-navigation {
    max-height: 290px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 4px 15px;
  }
  .module-group summary {
    font-size: 12px;
  }
  .module-pages button {
    font-size: 12px;
  }
  .demo-topbar {
    padding: 12px;
  }
  .demo-module-heading {
    padding: 22px 17px 18px;
  }
  .demo-module-heading h3 {
    font-size: 26px;
  }
  .demo-module-heading p {
    font-size: 14px;
  }
  .demo-subtabs {
    padding: 0 14px 15px;
    gap: 4px;
  }
  .demo-subtabs button {
    padding: 9px;
    font-size: 12px;
  }
  .demo-reset {
    font-size: 12px !important;
  }
  #demo-screen {
    padding: 21px 15px;
  }
  .workspace-stats {
    gap: 7px;
  }
  .workspace-stats > div {
    padding: 12px 9px;
  }
  .workspace-stats span {
    font-size: 12px;
  }
  .workspace-stats strong {
    font-size: 20px;
    letter-spacing: -0.5px;
    overflow-wrap: anywhere;
  }
  .workspace-stats small {
    font-size: 12px;
  }
  .demo-records th,
  .demo-records td {
    padding: 12px 8px;
    white-space: normal;
  }
  .demo-records table {
    font-size: 12px;
  }
  .demo-records {
    overflow-x: auto;
  }
  .record-status {
    font-size: 12px;
  }
  .demo-impact {
    padding: 18px;
  }
  .demo-status {
    padding: 13px 18px;
  }
  .pack-tiles {
    grid-template-columns: 1fr;
  }
  .pack-tile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px;
    padding: 17px;
  }
  .pack-tile .pack-label {
    grid-column: 1/-1;
  }
  .pack-tile h4 {
    margin: 14px 0 5px;
  }
  .pack-tile > small {
    grid-row: 3;
    grid-column: 1;
  }
  .pack-count {
    margin: 12px 0 0;
    grid-row: 2/4;
    grid-column: 2;
  }
  .pack-progress,
  .pack-actions {
    grid-column: 1/-1;
  }
  .pack-actions {
    margin-top: 10px;
  }
  .pack-actions button {
    font-size: 12px;
    min-height: 44px;
  }
  .customer-board {
    padding: 16px;
  }
  .customer-board h4 {
    font-size: 20px;
  }
  .board-games {
    gap: 6px;
  }
  .board-game {
    padding: 12px 8px;
  }
  .board-game h5 {
    font-size: 13px;
  }
  .board-next strong {
    font-size: 23px;
  }
  .board-game > div:first-child {
    flex-wrap: wrap;
  }
  .board-bottom {
    font-size: 12px;
    line-height: 1.6;
  }
  .display-settings {
    grid-template-columns: 1fr;
  }
  .display-settings input:not([type="checkbox"]),
  .display-settings select {
    font-size: 16px;
  }
  .review-flow {
    grid-template-columns: 1fr;
  }
  .review-flow > div {
    padding: 17px;
  }
  .review-flow > div > span {
    margin-bottom: 12px;
  }
  .demo-chat .chat-user {
    max-width: 95%;
  }
  .chat-answer {
    padding: 18px;
    gap: 10px;
  }
  .feature-wide .module-depth dl {
    grid-template-columns: 1fr;
  }
  .module-depth dd {
    font-size: 15px;
  }
  .lottery-chapter {
    margin-top: 75px;
    padding: 65px 0;
  }
  .lottery-chapter-heading h2 {
    font-size: 39px;
    letter-spacing: -1.5px;
  }
  .lottery-chapter-heading > p {
    font-size: 16px;
  }
  .lottery-chapter-heading .eyebrow {
    font-size: 12px;
  }
  .lottery-connected-demo {
    grid-template-columns: 1fr;
    padding: 19px;
    gap: 28px;
    margin-top: 35px;
  }
  .lottery-customer .customer-board {
    padding: 15px;
  }
  .lottery-counter h3 {
    font-size: 24px;
  }
  .lottery-depth-grid {
    grid-template-columns: 1fr;
    gap: 33px;
    margin-top: 45px;
  }
  .lottery-depth-grid h3 {
    font-size: 29px;
  }
  .lottery-facts {
    grid-template-columns: 1fr 1fr;
    gap: 25px 18px;
    margin-top: 43px;
  }
  .lottery-facts b {
    font-size: 15px;
  }
  .workflow-stories {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 35px;
  }
  .workflow-stories h3 {
    font-size: 25px;
  }
  .workflow-stories ol {
    font-size: 16px;
  }
  .sync-story {
    grid-template-columns: 1fr;
    padding-top: 80px;
  }
  .sync-story h2 {
    font-size: 37px;
  }
  .sync-story > div > p {
    font-size: 16px;
  }
  .sync-details p {
    font-size: 15px;
  }
  .sync-details {
    margin-top: 15px;
  }
  .sync-note {
    grid-column: auto;
  }
  .feature-wide#surveillance .feature-tags {
    margin-bottom: 25px;
  }
  .demo-note {
    font-size: 12px;
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pack-progress i {
    transition: none;
  }
}
/* Touch targets of at least 44px on phones. */
@media (max-width: 700px) {
  .tour-jump,
  .lottery-depth-grid button,
  .demo-topbar > button,
  .demo-subtabs button,
  .module-group summary,
  .module-pages button,
  .workspace-shortcuts button,
  .workspace-activity button,
  .demo-primary,
  .demo-search input,
  .display-settings select,
  .display-settings input:not([type="checkbox"]) {
    min-height: 44px;
  }
  #demo-menu {
    min-width: 44px;
  }
}