:root {
  --ink: #151817;
  --muted: #5c6562;
  --soft: #f5f7f4;
  --line: #dfe5df;
  --green: #174f2a;
  --green-dark: #08140d;
  --orange: #f47b20;
  --orange-dark: #c85f13;
  --blue: #1d5e76;
  --white: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--soft);
  color: var(--ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.93em;
  overflow-wrap: anywhere;
}

pre {
  margin: 14px 0 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  background: #0c1110;
  color: #f1f7f2;
  padding: 14px;
}

pre code {
  white-space: pre;
  overflow-wrap: normal;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 10px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 20, 13, 0.94);
  color: var(--white);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
}

.brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 6px;
}

.top-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.top-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
  font-size: 14px;
}

.top-nav a:hover,
.top-nav a.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: var(--green-dark);
  color: var(--white);
}

.hero-bg,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg {
  object-fit: cover;
  opacity: 0.58;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 20, 13, 0.96), rgba(8, 20, 13, 0.8) 48%, rgba(8, 20, 13, 0.32)),
    linear-gradient(0deg, rgba(8, 20, 13, 0.96), rgba(8, 20, 13, 0.02) 34%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  width: min(1180px, calc(100% - 48px));
  min-height: 760px;
  margin: 0 auto;
  padding: 80px 0 72px;
}

.hero-copy {
  max-width: 700px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  max-width: 650px;
  font-size: 68px;
  line-height: 1.02;
}

h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.12;
}

h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.28;
}

p {
  line-height: 1.68;
}

.hero-lede {
  max-width: 690px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 7px;
  padding: 0 18px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

.button.primary {
  background: var(--orange);
  color: #1a120c;
}

.button.primary:hover {
  background: #ff9440;
}

.button.secondary {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--white);
}

.button.secondary:hover {
  border-color: rgba(255, 255, 255, 0.72);
}

.kiosk-preview {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(8, 20, 13, 0.68);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.kiosk-preview img {
  width: 100%;
  height: auto;
}

.kiosk-preview div {
  display: grid;
  gap: 6px;
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.kiosk-preview span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.55;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1180px, calc(100% - 48px));
  margin: -54px auto 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 18px 70px rgba(20, 29, 24, 0.12);
}

.summary-strip div {
  min-height: 118px;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.summary-strip div:last-child {
  border-right: 0;
}

.summary-strip strong {
  display: block;
  font-size: 24px;
  color: var(--green);
}

.summary-strip span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
  font-size: 14px;
}

.dashboard {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(7, 18, 12, 0.98), rgba(18, 45, 31, 0.97) 58%, rgba(14, 53, 65, 0.95));
  color: var(--white);
}

.dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 82%);
}

.dashboard > * {
  position: relative;
  z-index: 1;
}

.dashboard .section-heading p {
  color: rgba(255, 255, 255, 0.74);
}

.dashboard-overview,
.artifact-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.dashboard-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
}

.dashboard-overview div {
  min-height: 120px;
  padding: 24px;
  background: rgba(7, 18, 12, 0.66);
}

.dashboard-overview span,
.artifact-kicker {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-overview strong {
  display: block;
  margin-top: 10px;
  color: var(--white);
  font-size: 30px;
  line-height: 1.1;
}

.validation-overview {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
}

.daily-progress {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 22px auto 0;
}

.daily-progress-copy,
.daily-progress-stats {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

.daily-progress-copy {
  padding: 24px;
}

.daily-progress-copy h3 {
  margin-top: 10px;
  color: var(--white);
  font-size: 28px;
}

.daily-progress-copy p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.74);
}

.owner-outcomes {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.owner-outcomes li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.55;
}

.owner-outcomes li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.owner-outcomes strong {
  color: var(--white);
}

.daily-progress-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.daily-progress-stats div {
  min-height: 132px;
  padding: 22px;
  background: rgba(7, 18, 12, 0.66);
}

.daily-progress-stats strong {
  display: block;
  color: var(--white);
  font-size: 32px;
  line-height: 1;
}

.daily-progress-stats span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.artifact-card {
  min-height: 780px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.artifact-card::before {
  content: "";
  display: block;
  height: 5px;
  border-radius: 8px 8px 0 0;
  background: var(--orange);
}

.service-card::before {
  background: #98b25a;
}

.docs-card::before {
  background: #65b6d0;
}

.artifact-header {
  padding: 24px 24px 10px;
}

.artifact-header h3 {
  margin-top: 10px;
  color: var(--white);
  font-size: 26px;
}

.artifact-header p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
}

.artifact-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 18px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.artifact-stats div {
  min-height: 88px;
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.artifact-stats strong {
  display: block;
  color: var(--white);
  font-size: 30px;
  line-height: 1;
}

.artifact-stats span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.artifact-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 24px 0;
}

.artifact-breakdown span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 700;
}

.artifact-timeline {
  display: grid;
  gap: 18px;
  margin: 24px;
  padding: 0 0 0 19px;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.artifact-timeline li {
  position: relative;
}

.artifact-timeline li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -25px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: #07120c;
}

.service-card .artifact-timeline li::before {
  border-color: #98b25a;
}

.docs-card .artifact-timeline li::before {
  border-color: #65b6d0;
}

.artifact-timeline time {
  display: block;
  color: #f9b06d;
  font-size: 13px;
  font-weight: 800;
}

.service-card .artifact-timeline time {
  color: #c6dd84;
}

.docs-card .artifact-timeline time {
  color: #9bdcf0;
}

.artifact-timeline span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.55;
}

.section {
  padding: 92px 24px;
}

.section.light {
  background: var(--white);
}

.section.dark {
  background: #07120c;
  color: var(--white);
}

.section.dark p,
.section.dark .event-table span:nth-child(even) {
  color: rgba(255, 255, 255, 0.72);
}

.section-heading {
  width: min(820px, 100%);
  margin: 0 auto 42px;
  text-align: center;
}

.section-heading.left {
  width: min(1180px, 100%);
  text-align: left;
}

.section-heading.compact {
  margin-bottom: 30px;
}

.section-heading p {
  margin: 16px 0 0;
  color: var(--muted);
}

.section.dark .section-heading p {
  color: rgba(255, 255, 255, 0.74);
}

.section-note {
  width: min(960px, 100%);
  margin: 24px auto 0;
  color: var(--muted);
  text-align: center;
}

.architecture-grid,
.booking-logic-grid,
.booking-scenarios,
.cards,
.check-grid,
.demo-video-grid,
.feature-list,
.guide-grid,
.flow,
.split {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.architecture-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.layer {
  min-height: 238px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: var(--white);
}

.layer span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.layer p {
  color: var(--muted);
  font-size: 15px;
}

.layer.booking {
  border-top: 5px solid var(--green);
}

.layer.kiosk {
  border-top: 5px solid var(--orange);
}

.layer.remote {
  border-top: 5px solid #8464a0;
}

.layer.simulator-software {
  border-top: 5px solid var(--blue);
}

.layer.projector {
  border-top: 5px solid #d9a441;
}

.layer.service {
  border-top: 5px solid #6b7f35;
}

.split {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.split > div > p {
  color: var(--muted);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.feature-list div,
.cards article,
.deploy-card,
.guide-aside,
.guide-steps article,
.check-grid div,
.event-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 22px;
}

.feature-list p,
.cards p,
.demo-video-card p,
.guide-aside p,
.guide-steps p,
.deploy-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
}

.demo-videos {
  border-bottom: 1px solid var(--line);
}

.demo-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.demo-video-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 246, 0.96)),
    var(--white);
  box-shadow: 0 18px 60px rgba(17, 24, 20, 0.08);
}

.demo-video-card h3 {
  margin-top: 10px;
  font-size: 26px;
}

.video-meta {
  display: grid;
  gap: 6px;
}

.featured-video {
  border-color: rgba(23, 79, 42, 0.26);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 248, 241, 0.98)),
    var(--white);
}

/* Keep the newest walkthrough in the bottom-right reading position on the
   three-column desktop gallery. The existing responsive rules move it to
   column two on tablets and normal document flow on phones. */
.latest-video {
  grid-column: 3;
}

.video-label {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.video-date {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.video-link {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: 6px;
  padding: 0 16px;
  background: var(--green);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}

.video-link:hover {
  background: #122c1e;
}

.booking-management {
  background:
    linear-gradient(180deg, rgba(247, 250, 248, 0.96), rgba(255, 255, 255, 1)),
    var(--white);
}

.booking-logic-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.94fr 0.94fr;
  gap: 18px;
}

.booking-logic-card,
.booking-scenarios article,
.owner-callout {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 24px;
  box-shadow: 0 18px 60px rgba(17, 24, 20, 0.07);
}

.booking-logic-card.primary {
  border-top: 5px solid var(--green);
}

.booking-logic-card:not(.primary) {
  border-top: 5px solid var(--orange);
}

.booking-logic-card span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.booking-logic-card p,
.booking-scenarios p,
.owner-callout p {
  margin-bottom: 0;
  color: var(--muted);
}

.booking-scenarios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.owner-callout {
  width: min(1180px, 100%);
  margin: 18px auto 0;
  border-left: 5px solid var(--green);
  background: #f6fbf7;
}

.projector-guide-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
}

.projector-architecture {
  width: min(1180px, 100%);
  margin: 28px auto 0;
  overflow: hidden;
  border: 1px solid #253b31;
  border-radius: 12px;
  background: #0c1110;
  box-shadow: 0 18px 45px rgba(8, 20, 13, 0.16);
}

.projector-architecture img {
  width: 100%;
  height: auto;
}

.projector-architecture figcaption,
.projector-dialog-showcase figcaption {
  padding: 13px 18px;
  color: #d6e1da;
  background: #111b17;
  font-size: 14px;
  line-height: 1.5;
}

.projector-overview {
  margin-top: 24px;
}

.projector-detail-grid,
.projector-dialog-showcase {
  width: min(1180px, 100%);
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 20px;
}

.projector-detail-grid article,
.projector-dialog-showcase {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 24px;
}

.projector-detail-grid h3,
.projector-dialog-showcase h3 {
  margin-top: 8px;
}

.projector-checklist ol {
  margin: 18px 0 0;
  padding-left: 22px;
  color: var(--muted);
}

.projector-checklist li + li {
  margin-top: 10px;
}

.projector-baseline dl {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.2fr);
  gap: 0;
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.projector-baseline dt,
.projector-baseline dd {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.projector-baseline dt {
  background: #f1f6f2;
  color: #20382a;
  font-weight: 750;
}

.projector-baseline dd {
  border-left: 1px solid var(--line);
  color: var(--muted);
}

.projector-baseline dt:last-of-type,
.projector-baseline dd:last-of-type {
  border-bottom: 0;
}

.important-note {
  margin: 18px 0 0;
  border-left: 4px solid var(--orange);
  background: #fff8ef;
  color: #684317;
  padding: 13px 15px;
}

.projector-settings-heading {
  margin-top: 36px;
}

.projector-settings-heading h3 {
  font-size: clamp(26px, 3vw, 38px);
}

.projector-settings-table {
  width: min(1180px, 100%);
  margin: 20px auto 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.projector-settings-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.projector-settings-table th,
.projector-settings-table td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.projector-settings-table th {
  background: #e9f1eb;
  color: #20382a;
  font-size: 14px;
}

.projector-settings-table td {
  color: var(--muted);
}

.projector-settings-table td:first-child {
  color: var(--ink);
  font-weight: 750;
}

.projector-settings-table tbody tr:last-child td {
  border-bottom: 0;
}

.projector-dialog-showcase {
  align-items: center;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  background: #f6fbf7;
}

.projector-dialog-showcase figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #0c1110;
}

.projector-dialog-showcase img {
  width: 100%;
  height: auto;
}

.projector-dialog-showcase p {
  color: var(--muted);
}

.projector-guide-download h3 {
  margin-top: 9px;
  font-size: 24px;
}

.projector-guide-download p {
  margin-top: 10px;
}

.download-kicker {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.projector-guide-download .download-status {
  color: #684317;
  font-weight: 650;
}

.download-action {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.download-action .button {
  min-height: 50px;
  text-align: center;
}

.download-action span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.media-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 18px 60px rgba(17, 24, 20, 0.1);
}

.media-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.media-card figcaption {
  padding: 14px 18px;
  color: var(--muted);
  font-size: 14px;
}

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.flow li {
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 20px;
}

.flow strong {
  display: block;
  color: var(--green);
}

.flow span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.cards.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* These detailed feature references contain the complete recovery and booking
   message contracts. Keep their reading width aligned with the service tables,
   and let settings screenshots retain their natural aspect ratio on phones. */
.notice-panel {
  scroll-margin-top: 120px;
  width: min(1180px, 100%);
  margin: 28px auto;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.notice-panel img {
  width: min(100%, 940px);
  height: auto;
  margin: 22px auto;
  border-radius: 8px;
}

.section.dark .notice-panel {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
}

/* Real WPF previews share the owner guide's existing card treatment. Auto-fit
   keeps the two screenshots side by side on desktop and readable on phones. */
.reboot-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  margin: 28px auto;
}

.reboot-previews img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* The closing sequence follows the same reading order at every viewport size.
   Auto-fit allows four steps on wide screens and a single vertical sequence on
   phones, without shrinking architecture text or introducing horizontal scroll. */
.closing-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}

.closing-flow li {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.closing-flow strong,
.closing-flow span {
  display: block;
}

.closing-flow strong {
  margin-bottom: 10px;
}

#customer-safe-actions {
  /* Keep direct links readable below the sticky desktop navigation. The mobile
     header is static, so the extra breathing room is harmless on narrow screens. */
  scroll-margin-top: 120px;
}

/* Preserve the proportions of the actual customer dialogs. Each image links
   to its full-size original, so the six-action comparison remains compact. */
.customer-action-previews img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.dashboard .reboot-previews article {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
}

.dashboard .reboot-previews p {
  color: rgba(255, 255, 255, 0.78);
}

.section.dark .cards article,
.section.dark .event-grid {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
}

.event-grid {
  width: min(1180px, 100%);
  margin: 18px auto 0;
}

.event-table {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
}

/* TrackMan rows include a severity label as well as the numeric event ID.
   Give that label enough room on desktop, then stack each label/meaning pair
   at the same mobile breakpoint as the existing service event reference. */
.event-table.trackman-events {
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
}

.event-table span {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.event-table span:nth-child(odd) {
  color: #f9b06d;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 700;
}

.event-table span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.deploy {
  background: #eef3ef;
}

.guide-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.guide-aside {
  position: sticky;
  top: 86px;
  min-width: 0;
}

.guide-aside ul {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.guide-aside li {
  border-radius: 6px;
  background: #eef2ef;
  padding: 10px 12px;
}

.guide-steps {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.guide-steps article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  min-width: 0;
}

.guide-steps article > div {
  min-width: 0;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: var(--orange);
  color: #221104;
  font-weight: 800;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.check-grid div {
  min-height: 86px;
  display: flex;
  align-items: center;
  color: #23312a;
}

.hosting {
  background: var(--white);
}

.callout {
  margin-top: 24px;
  border-left: 5px solid var(--orange);
  border-radius: 8px;
  background: #fff7ef;
  padding: 18px 20px;
}

.callout p {
  margin: 8px 0 0;
}

.deploy-card dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 12px;
  margin: 18px 0;
}

.deploy-card dt {
  color: var(--muted);
  font-weight: 700;
}

.deploy-card dd {
  margin: 0;
}

.deploy-card code,
.summary-strip code,
.guide-aside code,
.guide-steps code,
.event-table code,
.check-grid code,
.setting-list code {
  border-radius: 5px;
  background: rgba(23, 79, 42, 0.08);
  padding: 2px 5px;
}

.section.dark .event-table code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.settings-principles,
.settings-directory,
.demo-safety-grid,
.demo-guide-grid,
.ai-skill-callout {
  width: min(1180px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.settings-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.settings-principles article {
  border: 1px solid var(--line);
  border-top: 5px solid var(--orange);
  border-radius: 8px;
  background: var(--white);
  padding: 22px;
}

.settings-principles article:nth-child(2) {
  border-top-color: var(--green);
}

.settings-principles article:nth-child(3) {
  border-top-color: var(--blue);
}

.settings-principles span,
.demo-safety-grid strong {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-principles h3 {
  margin: 10px 0 8px;
}

.settings-principles p {
  margin: 0;
  color: var(--muted);
}

.settings-directory {
  display: grid;
  gap: 14px;
}

.settings-directory details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 36px rgba(8, 20, 13, 0.06);
}

.settings-directory summary {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 72px;
  cursor: pointer;
  padding: 18px 52px 18px 22px;
  color: var(--green-dark);
  list-style: none;
  position: relative;
}

.settings-directory summary::-webkit-details-marker {
  display: none;
}

.settings-directory summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  color: var(--orange-dark);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.settings-directory details[open] summary::after {
  content: "−";
}

.settings-directory summary span {
  font-size: 20px;
  font-weight: 800;
}

.settings-directory summary small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.settings-directory details[open] summary {
  border-bottom: 1px solid var(--line);
  background: #fbfcfa;
}

.setting-list {
  display: grid;
  grid-template-columns: minmax(220px, 0.33fr) minmax(0, 1fr);
  margin: 0;
}

.setting-list dt,
.setting-list dd {
  margin: 0;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}

.setting-list dt {
  color: #20382a;
  font-weight: 800;
}

.setting-list dd {
  border-left: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
}

/* Mirror the two-level help model used by the AccessControl Settings window:
   owners see the same short sentence first, followed by the exact detailed
   explanation that appears when an administrator opens the information badge. */
.setting-summary,
.setting-detail {
  display: block;
}

.setting-summary {
  color: var(--ink);
  font-weight: 750;
}

.setting-detail {
  margin-top: 7px;
}

.dark-list .setting-summary {
  color: var(--white);
}

.setting-list dt:nth-last-of-type(1),
.setting-list dd:nth-last-of-type(1) {
  border-bottom: 0;
}

.settings-link-panel {
  padding: 24px;
}

.settings-link-panel p {
  max-width: 920px;
  margin: 0 0 18px;
  color: var(--muted);
}

.demo-data-guide {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(244, 123, 32, 0.14), transparent 26%),
    radial-gradient(circle at 12% 70%, rgba(29, 94, 118, 0.16), transparent 28%),
    #07120c;
}

.demo-safety-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.demo-safety-grid article {
  min-height: 170px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.065);
  padding: 20px;
}

.demo-safety-grid strong {
  color: #f9b06d;
}

.demo-safety-grid span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.55;
}

.demo-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.demo-guide-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  padding: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.demo-guide-card.wide {
  grid-column: 1 / -1;
}

.demo-guide-card h3,
.ai-skill-callout h3,
.dark-callout h3 {
  color: var(--white);
}

.demo-guide-card > p {
  color: rgba(255, 255, 255, 0.72);
}

.dark-list {
  margin: 18px -24px -24px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.dark-list dt,
.dark-list dd {
  border-color: rgba(255, 255, 255, 0.13);
}

.dark-list dt {
  color: #f9b06d;
}

.dark-list dd {
  color: rgba(255, 255, 255, 0.72);
}

.demo-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.demo-steps li {
  min-height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(7, 18, 12, 0.58);
  padding: 18px;
}

.demo-steps strong,
.demo-steps span {
  display: block;
}

.demo-steps strong {
  color: var(--white);
}

.demo-steps span {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.45;
}

.ai-skill-callout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 28px;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 5px solid var(--orange);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  padding: 28px;
}

.ai-skill-callout p {
  color: rgba(255, 255, 255, 0.72);
}

.ai-skill-callout aside {
  align-self: start;
  border-radius: 8px;
  background: rgba(7, 18, 12, 0.7);
  padding: 22px;
}

.ai-skill-callout aside h3 {
  margin-top: 0;
}

.ai-skill-callout .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.dark-callout {
  width: min(1180px, 100%);
  margin: 24px auto 0;
  border-color: #65b6d0;
  background: rgba(29, 94, 118, 0.18);
}

.dark-callout p {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  background: #07120c;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.site-footer a {
  color: var(--white);
}

.managed-system-settings {
  background:
    radial-gradient(circle at 12% 8%, rgba(34, 105, 66, 0.09), transparent 30%),
    linear-gradient(180deg, #f7faf8 0%, #edf4ef 100%);
}

.managed-settings-principles,
.managed-action-cards {
  margin-top: 24px;
}

.vendor-support-callout,
.simulator-device-policy-card,
.managed-evidence-grid,
.vendor-checklist,
.managed-settings-heading,
.managed-settings-table {
  width: min(1180px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.vendor-support-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding: 28px;
  border: 1px solid #c9dacf;
  border-left: 6px solid var(--green);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(8, 20, 13, 0.08);
}

.vendor-support-callout h3,
.simulator-device-policy-card h3,
.vendor-checklist h3 {
  margin: 8px 0 10px;
  color: var(--green-dark);
  font-size: clamp(24px, 3vw, 34px);
}

.vendor-support-callout p {
  margin: 0;
  color: var(--muted);
}

.vendor-support-callout aside {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 9px;
  background: #102a1d;
  color: #e9fff1;
}

.vendor-support-callout aside strong {
  color: #9fe5b8;
}

.vendor-support-callout aside span {
  line-height: 1.45;
}

.vendor-support-callout aside code {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.managed-settings-heading {
  margin-top: 48px;
}

.managed-settings-heading h3,
.simulator-device-policy-card .section-heading h3 {
  font-size: clamp(28px, 3.5vw, 42px);
}

.managed-settings-table {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid #c9dacf;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 14px 38px rgba(8, 20, 13, 0.06);
}

.managed-settings-table table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.managed-settings-table th,
.managed-settings-table td {
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.managed-settings-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #dfece3;
  color: #1d3a27;
  font-size: 13px;
}

.managed-settings-table td {
  color: var(--muted);
}

.managed-settings-table td:first-child {
  min-width: 180px;
  color: var(--ink);
  font-weight: 800;
}

.managed-settings-table tbody tr:nth-child(even) {
  background: #f8fbf9;
}

.managed-settings-table tbody tr:last-child td {
  border-bottom: 0;
}

.service-table-heading,
.service-compliance-note,
.service-table-scroll-hint {
  width: min(1180px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.service-table-scroll-hint {
  display: none;
}

.service-table-heading {
  margin-top: 48px;
}

.service-table-heading h3 {
  margin: 7px 0 10px;
  color: var(--white);
  font-size: clamp(27px, 3.5vw, 40px);
  line-height: 1.16;
}

.service-table-heading p:not(.eyebrow) {
  max-width: 990px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
}

.service-table-heading code,
.service-settings-table code {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.service-settings-table {
  border-color: rgba(176, 224, 191, 0.22);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.service-settings-table table {
  min-width: 1120px;
}

.service-settings-table th,
.service-settings-table td {
  border-color: rgba(255, 255, 255, 0.11);
}

.service-settings-table th {
  background: #173827;
  color: #d9f7e3;
  letter-spacing: 0.015em;
}

.service-settings-table td,
.service-settings-table td:first-child {
  color: rgba(255, 255, 255, 0.76);
}

.service-settings-table td:first-child {
  min-width: 190px;
  color: #ffffff;
}

.service-settings-table td:nth-child(2) {
  color: #f5bd86;
  font-weight: 700;
}

.service-settings-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.035);
}

.maintenance-settings-table th:nth-child(1) {
  width: 20%;
}

.maintenance-settings-table th:nth-child(2) {
  width: 17%;
}

.maintenance-settings-table th:nth-child(3) {
  width: 25%;
}

.computer-settings-table th:nth-child(1) {
  width: 17%;
}

.computer-settings-table th:nth-child(2) {
  width: 21%;
}

.computer-settings-table th:nth-child(3) {
  width: 27%;
}

.service-compliance-note {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(249, 176, 109, 0.35);
  border-left: 5px solid var(--orange);
  border-radius: 9px;
  background: rgba(249, 176, 109, 0.09);
}

.service-compliance-note strong {
  color: #ffd5aa;
}

.service-compliance-note span {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.58;
}

.simulator-device-policy-card {
  margin-top: 34px;
  padding: 30px;
  border-radius: 12px;
  background: #0d2519;
  color: var(--white);
  box-shadow: 0 20px 50px rgba(5, 17, 10, 0.18);
}

.simulator-device-policy-card .section-heading {
  width: 100%;
  margin: 0 0 20px;
}

.simulator-device-policy-card h3,
.simulator-device-policy-card .section-heading p {
  color: var(--white);
}

.simulator-device-policy-card .eyebrow {
  color: #9fe5b8;
}

.simulator-device-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.simulator-device-policy-grid div {
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 18px;
  border: 1px solid rgba(159, 229, 184, 0.32);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
}

.simulator-device-policy-grid span {
  color: #b9cec0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.simulator-device-policy-grid strong {
  align-self: end;
  color: #fff;
  font-size: 22px;
}

.simulator-device-policy-card .section-note {
  color: #c9d8ce;
}

.managed-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.managed-evidence-grid > div {
  overflow: hidden;
  border: 1px solid #c9dacf;
  border-radius: 10px;
  background: var(--white);
}

.managed-evidence-grid h3 {
  margin: 0;
  padding: 20px 22px;
  background: #dfece3;
  color: var(--green-dark);
}

.managed-evidence-grid dl {
  display: grid;
  grid-template-columns: 170px 1fr;
  margin: 0;
}

.managed-evidence-grid dt,
.managed-evidence-grid dd {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}

.managed-evidence-grid dt {
  color: var(--ink);
  font-weight: 800;
}

.managed-evidence-grid dd {
  overflow-wrap: anywhere;
  border-left: 1px solid var(--line);
  color: var(--muted);
}

.managed-evidence-grid dt:last-of-type,
.managed-evidence-grid dd:last-of-type {
  border-bottom: 0;
}

.vendor-checklist {
  margin-top: 34px;
  padding: 28px;
  border: 1px solid #dfc7a9;
  border-radius: 10px;
  background: #fff9f1;
}

.vendor-checklist .check-grid {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 980px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 20px;
  }

  .top-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .hero,
  .hero-content {
    min-height: auto;
  }

  .hero-content,
  .split,
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .hero-content {
    padding: 64px 0 120px;
  }

  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 32px;
  }

  .summary-strip,
  .architecture-grid,
  .artifact-grid,
  .booking-logic-grid,
  .booking-scenarios,
  .cards.three,
  .dashboard-overview,
  .demo-video-grid,
  .settings-principles,
  .demo-safety-grid,
  .daily-progress-stats,
  .flow,
  .check-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .daily-progress {
    grid-template-columns: 1fr;
  }

  .latest-video {
    grid-column: 2;
  }

  .guide-aside {
    position: static;
  }

  .demo-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-skill-callout {
    grid-template-columns: 1fr;
  }

  .projector-guide-download {
    grid-template-columns: 1fr;
  }

  .projector-detail-grid,
  .projector-dialog-showcase {
    grid-template-columns: 1fr;
  }

  .vendor-support-callout,
  .managed-evidence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .site-header {
    position: static;
  }

  .brand span {
    font-size: 14px;
  }

  .top-nav a {
    font-size: 13px;
    padding: 0 10px;
  }

  .hero-content,
  .summary-strip,
  .architecture-grid,
  .artifact-grid,
  .booking-logic-grid,
  .booking-scenarios,
  .cards,
  .check-grid,
  .dashboard-overview,
  .daily-progress,
  .demo-video-grid,
  .settings-principles,
  .settings-directory,
  .demo-safety-grid,
  .demo-guide-grid,
  .ai-skill-callout,
  .projector-guide-download,
  .projector-detail-grid,
  .projector-dialog-showcase,
  .vendor-support-callout,
  .simulator-device-policy-card,
  .managed-evidence-grid,
  .vendor-checklist,
  .managed-settings-heading,
  .managed-settings-table,
  .service-table-heading,
  .service-compliance-note,
  .service-table-scroll-hint,
  .feature-list,
  .guide-grid,
  .flow,
  .split {
    width: min(100% - 28px, 1180px);
  }

  .hero-content {
    padding: 42px 0 86px;
    gap: 28px;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 28px;
  }

  .hero-lede {
    font-size: 16px;
  }

  .summary-strip {
    grid-template-columns: 1fr;
    margin-top: -34px;
  }

  .dashboard-overview,
  .daily-progress-stats,
  .artifact-grid {
    grid-template-columns: 1fr;
  }

  .projector-detail-grid article,
  .projector-dialog-showcase {
    padding: 18px;
  }

  .projector-baseline dl {
    grid-template-columns: 1fr;
  }

  .projector-baseline dd {
    border-left: 0;
  }

  .dashboard-overview div {
    min-height: 0;
  }

  .artifact-card {
    min-height: 0;
  }

  .summary-strip div {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .summary-strip div:last-child {
    border-bottom: 0;
  }

  .section {
    padding: 64px 14px;
  }

  .architecture-grid,
  .booking-logic-grid,
  .booking-scenarios,
  .cards.three,
  .demo-video-grid,
  .settings-principles,
  .demo-safety-grid,
  .demo-guide-grid,
  .demo-steps,
  .flow,
  .check-grid,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .simulator-device-policy-grid,
  .managed-evidence-grid dl {
    grid-template-columns: 1fr;
  }

  .managed-evidence-grid dd {
    padding-top: 0;
    border-left: 0;
  }

  .managed-evidence-grid dt {
    padding-bottom: 5px;
    border-bottom: 0;
  }

  .vendor-support-callout,
  .simulator-device-policy-card,
  .vendor-checklist {
    padding: 20px;
  }

  .flow li,
  .layer {
    min-height: 0;
  }

  .latest-video {
    grid-column: auto;
  }

  .demo-guide-card.wide {
    grid-column: auto;
  }

  .settings-directory summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .setting-list {
    grid-template-columns: 1fr;
  }

  .setting-list dt {
    padding-bottom: 4px;
    border-bottom: 0;
  }

  .setting-list dd {
    padding-top: 0;
    border-left: 0;
  }

  .guide-steps article {
    grid-template-columns: 1fr;
  }

  .event-table,
  .event-table.trackman-events,
  .deploy-card dl {
    grid-template-columns: 1fr;
  }

  .event-table span:nth-child(odd) {
    padding-bottom: 4px;
    border-bottom: 0;
  }

  .event-table span:nth-child(even) {
    padding-top: 0;
  }

  .service-compliance-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .section.dark .service-table-scroll-hint {
    display: block;
    margin-top: -4px;
    margin-bottom: 8px;
    color: #f5bd86;
    font-size: 13px;
    font-weight: 700;
  }

  .site-footer {
    flex-direction: column;
    padding: 24px 18px;
  }
}

/* Owner-authored Markdown examples should read on narrow screens without
   requiring horizontal scrolling. Preserve paragraph breaks and literal tokens. */
.markdown-example code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Deep links within these long guides clear the sticky navigation just like
   section links, including the focused installer workflow and branding panel. */
#thank-you-update,
#deployment-branding {
  scroll-margin-top: 150px;
}