/* HaulBook — the connected operation. The live brand's black, white and amber. */
:root {
  --night: #0b0f13;
  --amber: #fca311;
  --paper: #f1f4f7;
  --ink: #151a20;
  --muted: #9aa7b5;
  --line: #2a333e;
  --light-line: #27303a;
}
.experience-home {
  background: #0b0f13;
  color: #f1f4f7;
  overflow-x: clip;
}
.site-header {
  background: #0b0f13ef;
  border-color: #ffffff12;
}
.wordmark {
  letter-spacing: -1.3px;
}
.button.amber {
  background: #fca311;
  color: #171006;
  border-color: #fca311;
}
.button {
  border-radius: 7px;
}
.button.outline {
  background: #121820;
  border-color: #39414c;
  color: #eef2f6;
}
.button:hover {
  transform: translateY(-2px);
}
.experience-home .site-header {
  height: 80px;
}
.experience-home .desktop-nav {
  gap: 28px;
}
.experience-home .desktop-nav a {
  color: #b6bec8;
  font-size: 14px;
}
.command-hero {
  padding-top: 64px;
  position: relative;
  border-bottom: 1px solid #ffffff16;
  overflow: hidden;
}
.command-intro {
  text-align: center;
  position: relative;
  z-index: 2;
}
.overline {
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 600;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: #aab5c2;
}
.command-intro h1 {
  font-size: clamp(54px, 6.45vw, 100px);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.065em;
  margin: 26px auto 24px;
  max-width: 1180px;
}
.command-intro h1 span {
  color: #fca311;
}
.hero-description {
  font-size: 18px;
  line-height: 1.6;
  color: #a7b1bf;
  max-width: 730px;
  margin: auto;
}
.command-cta {
  display: flex;
  gap: 13px;
  justify-content: center;
  margin-top: 26px;
}
.hero-note {
  font-size: 12px;
  color: #82909f;
  margin-top: 15px;
}
.command-stage {
  height: 590px;
  position: relative;
  isolation: isolate;
  margin-top: -6px;
  width: 100%;
}
.command-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.command-fallback {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 16%;
  border: 1px solid #48505a;
  background: #11171f;
  border-radius: 18px;
  padding: 35px;
  min-height: 65%;
  box-shadow: 0 30px 80px #0008;
  transform: perspective(1000px) rotateX(8deg) rotateY(-8deg);
}
.command-stage[data-scene="ready"] .command-fallback {
  visibility: hidden;
}
.fallback-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.fallback-top span {
  margin-left: auto;
  color: #8795a6;
  font-size: 10px;
}
.command-fallback p {
  font-size: 35px;
  margin-top: 30px;
}
.fallback-metrics {
  display: flex;
  gap: 45px;
  margin: 30px 0;
}
.fallback-metrics span {
  font-size: 10px;
  color: #9aa7b5;
}
.fallback-metrics strong {
  display: block;
  font-size: 25px;
  color: white;
  font-weight: 400;
  margin-top: 6px;
}
.fallback-line {
  font-size: 15px;
  color: #fca311;
  border-top: 1px solid #ffffff1a;
  padding-top: 20px;
}
.scene-label {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: #667484;
  pointer-events: none;
}
.scene-label b {
  font-weight: 400;
  color: #a1aebb;
}
.scene-label-left {
  top: 80px;
  left: 5%;
}
.scene-label-right {
  bottom: 66px;
  right: 5%;
  text-align: right;
}
.small-cross {
  display: block;
  font-size: 20px;
  color: #fca311;
  margin-bottom: 9px;
}
.scene-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3;
  margin-top: -18px;
}
.scene-chapters {
  display: flex;
  gap: 8px;
}
.scene-chapters button {
  position: relative;
  border: 1px solid #ffffff17;
  color: #8d9aab;
  background: #10161d;
  border-radius: 6px;
  padding: 12px 19px;
  font-size: 13px;
  min-height: 44px;
  transition:
    background 0.3s,
    color 0.3s,
    border 0.3s;
}
.scene-chapters button span {
  font-size: 11px;
  margin-right: 10px;
  color: #596878;
}
.scene-chapters button.active {
  background: #211c13;
  color: #ffc66d;
  border-color: #fca31165;
}
.scene-chapters button.active span {
  color: #fca311;
}
.motion-control {
  min-height: 44px;
  border: 0;
  color: #a4afbc;
  background: transparent;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.motion-control:hover {
  color: #fca311;
}
.scene-disclosure {
  font-size: 11px;
  color: #6e7d8c;
  margin-top: 18px;
  margin-bottom: 29px;
}
@media (min-width: 1700px) {
  .command-stage {
    height: 670px;
    max-width: 1800px;
    margin-inline: auto;
  }
  .command-hero {
    padding-top: 78px;
  }
}
@media (max-width: 1100px) {
  .command-stage {
    height: 510px;
  }
  .scene-label {
    display: none;
  }
  .command-intro h1 {
    font-size: 76px;
  }
  .command-hero {
    padding-top: 58px;
  }
}
@media (max-width: 700px) {
  .experience-home .site-header {
    height: 72px;
  }
  .command-hero {
    padding-top: 44px;
  }
  .command-intro {
    width: calc(100% - 36px);
  }
  .overline {
    font-size: 10px;
    letter-spacing: 0.07em;
    gap: 8px;
  }
  .overline .signal-dot {
    width: 5px;
    height: 5px;
  }
  .command-intro h1 {
    font-size: clamp(39px, 10.4vw, 65px);
    letter-spacing: -0.062em;
    margin: 25px auto 22px;
    line-height: 1.05;
  }
  .hero-description {
    font-size: 16px;
    max-width: 410px;
  }
  .command-cta {
    gap: 9px;
    margin-top: 25px;
    flex-wrap: wrap;
  }
  .command-cta .button {
    font-size: 13px;
    gap: 18px;
    padding: 12px 15px;
    min-height: 48px;
  }
  .hero-note {
    font-size: 11px;
    margin-top: 15px;
  }
  .command-stage {
    height: 430px;
    margin-top: 5px;
  }
  .scene-toolbar {
    width: calc(100% - 36px);
    margin-top: -5px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .scene-chapters {
    gap: 6px;
  }
  .scene-chapters button {
    padding: 10px 11px;
    font-size: 12px;
  }
  .scene-chapters button span {
    margin-right: 6px;
    font-size: 10px;
  }
  .motion-control {
    font-size: 11px;
  }
  .scene-disclosure {
    font-size: 10px;
    width: calc(100% - 36px);
    margin-top: 9px;
  }
  .command-fallback {
    left: 5%;
    right: 5%;
    top: 20%;
    padding: 18px;
    min-height: 50%;
    transform: none;
  }
  .fallback-top span {
    font-size: 8px;
  }
  .command-fallback p {
    font-size: 24px;
  }
  .fallback-metrics {
    gap: 18px;
  }
  .fallback-metrics strong {
    font-size: 20px;
  }
  .fallback-line {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button:hover {
    transform: none;
  }
}
/* The app becomes the story: one large working surface, with distinct workflows. */
.experience-home .section {
  padding-block: 115px;
}
.section-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #798a9d;
  margin-bottom: 40px;
}
.section-index > span:first-child {
  color: #e1e6ed;
}
.story-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 70px;
  margin-bottom: 54px;
}
.story-heading h2,
.automation-heading h2 {
  font-size: clamp(45px, 4.7vw, 72px);
  line-height: 1.07;
  font-weight: 400;
  letter-spacing: -0.055em;
}
.story-heading h2 span {
  color: #768698;
}
.story-heading > p {
  max-width: 375px;
  font-size: 17px;
  line-height: 1.7;
  color: #9daabb;
  padding-bottom: 4px;
}
.workflow-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid #ffffff20;
  margin-bottom: 30px;
}
.workflow-tabs button {
  background: transparent;
  border: 0;
  color: #78899c;
  min-height: 76px;
  text-align: left;
  padding: 17px 20px 17px 0;
  font-size: 15px;
  position: relative;
  transition: color 0.25s;
}
.workflow-tabs button span {
  font-size: 11px;
  display: block;
  margin-bottom: 5px;
  color: #677b90;
}
.workflow-tabs button b {
  font-weight: 400;
  position: absolute;
  right: 20px;
  bottom: 17px;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: 0.25s;
}
.workflow-tabs button[aria-selected="true"] {
  color: #f2f4f8;
}
.workflow-tabs button[aria-selected="true"] span {
  color: #fca311;
}
.workflow-tabs button[aria-selected="true"] b {
  opacity: 1;
  transform: none;
  color: #fca311;
}
.workflow-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #fca311;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.workflow-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}
.workflow-shell {
  border: 1px solid #333d4a;
  background: #10161e;
  border-radius: 13px;
  box-shadow:
    0 40px 100px #0005,
    0 0 0 6px #ffffff02;
  overflow: hidden;
}
.workspace-bar {
  height: 62px;
  border-bottom: 1px solid #28323f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #151c26;
  padding: 0 25px;
  color: #8e9dae;
  font-size: 12px;
}
.workspace-bar > span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.workspace-bar img {
  border-radius: 4px;
}
.workspace-bar b {
  font-weight: 400;
  color: #dce4ed;
}
.workspace-bar i {
  font-style: normal;
  margin: 0 8px;
  color: #4c5d70;
}
.window-lights {
  display: flex;
  gap: 6px;
}
.window-lights i {
  width: 7px;
  height: 7px;
  background: #374657;
  border-radius: 50%;
}
.sample-tag {
  font-size: 10px;
  letter-spacing: 0.07em;
  color: #8595a7;
  border: 1px solid #364352;
  padding: 4px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.flow-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  padding: 46px;
  min-height: 620px;
  animation: flow-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.flow-panel h3 {
  font-size: 38px;
  line-height: 1.13;
  letter-spacing: -0.045em;
  font-weight: 400;
  margin: 20px 0;
}
.flow-panel p {
  font-size: 16px;
  line-height: 1.7;
  color: #92a2b6;
}
.mini-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #8195ab;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-label .signal-dot {
  width: 5px;
  height: 5px;
}
.flow-panel .feature-plan,
.feature-plan {
  font-size: 12px;
  line-height: 1.6;
  color: #768a9f;
  margin-top: 19px;
}
.flow-panel .button {
  font-size: 14px;
  min-height: 49px;
}
.flow-panel .demo-status,
.demo-status {
  font-size: 12px;
  line-height: 1.55;
  color: #9ba8b8;
  margin-top: 13px;
  min-height: 38px;
}
.extraction-column {
  padding-top: 9px;
}
.file-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: #b0bdcc;
  font-size: 12px;
}
.file-heading small {
  display: block;
  color: #62768c;
  font-size: 10px;
  margin-top: 4px;
}
.file-heading > span:last-child {
  margin-left: auto;
}
.file-glyph {
  background: #27303d;
  border: 1px solid #41536a;
  color: #a4b5ca;
  padding: 9px 6px;
  font-size: 9px;
  border-radius: 5px;
}
.paper-document {
  position: relative;
  background: #e8eced;
  color: #18202b;
  padding: 30px 33px;
  border-radius: 3px;
  box-shadow:
    10px 13px 0 -5px #4b5762,
    18px 23px 0 -10px #2d3742;
  transform: perspective(1200px) rotateY(5deg) rotateZ(-2deg);
  transform-origin: bottom;
  overflow: hidden;
  max-width: 415px;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.paper-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.paper-brand span {
  color: #8c969e;
  font-weight: 400;
}
.paper-rule {
  height: 2px;
  background: #25303b;
  margin: 20px 0;
}
.paper-document > small {
  display: block;
  margin: 18px 0 5px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #7c8995;
}
.paper-document > strong {
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.paper-document > p {
  font-size: 11px;
  color: #7c8891;
}
.paper-total {
  margin: 23px 0 3px;
  border-top: 1px solid #adb6c0;
  padding-top: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.paper-total span {
  font-size: 9px;
  color: #7c8995;
}
.paper-total b {
  font-size: 28px;
  letter-spacing: -0.04em;
  font-weight: 400;
}
.paper-lines {
  margin: 25px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.paper-lines i {
  height: 3px;
  background: #c8cfd3;
  width: 100%;
}
.paper-lines i:nth-child(2) {
  width: 82%;
}
.paper-lines i:nth-child(3) {
  width: 58%;
}
.scanner-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 80px;
  background: linear-gradient(0deg, #fca31135, transparent);
  border-bottom: 1px solid #fca311;
  opacity: 0;
}
.is-reading .scanner-beam {
  opacity: 1;
  animation: scan-document 1.8s linear both;
}
.is-read .paper-document {
  transform: perspective(1200px) rotateY(0) rotateZ(0);
}
.extracted-fields {
  margin: 26px 0;
  display: grid;
  gap: 0;
  border-top: 1px solid #283341;
}
.extracted-fields > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #283341;
  font-size: 12px;
}
.extracted-fields span {
  color: #74879d;
}
.extracted-fields b {
  font-weight: 400;
  color: #dbe3ed;
  text-align: right;
  transition: color 0.4s;
}
.extracted-fields b.just-read {
  color: #fca311;
}
.flow-panel .text-link {
  color: #fca311;
}
.panel-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: #899aaf;
}
.status-tag {
  font-size: 10px;
  border: 1px solid #82ccb329;
  padding: 5px 8px;
  border-radius: 4px;
  color: #82ccb3;
  background: #82ccb30c;
}
.trip-detail,
.closeout-file {
  padding: 28px;
  background: #151e29;
  border: 1px solid #2d3b4b;
  border-radius: 9px;
}
.trip-detail h3 {
  font-size: 29px;
  margin-top: 28px;
}
.trip-detail h3 > span {
  color: #fca311;
}
.trip-detail > p {
  font-size: 12px;
}
.trip-stops {
  display: flex;
  flex-direction: column;
  margin: 35px 0 30px;
}
.trip-stops > div {
  display: flex;
  gap: 19px;
  position: relative;
  padding-bottom: 39px;
}
.trip-stops > div:last-child {
  padding: 0;
}
.trip-stops > div:first-child::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 2px;
  border-left: 1px dashed #677686;
}
.trip-stops i {
  width: 11px;
  height: 11px;
  border: 2px solid #fca311;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}
.trip-stops span {
  font-size: 10px;
  color: #72869b;
  letter-spacing: 0.05em;
}
.trip-stops strong {
  display: block;
  font-size: 22px;
  line-height: 1.5;
  color: #e4ebf3;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.trip-stops small {
  font-size: 12px;
  color: #9ba9ba;
  letter-spacing: 0;
}
.assignment {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #2e3c4c;
  padding-top: 25px;
}
.assignment small,
.money-summary small {
  display: block;
  font-size: 9px;
  color: #748aa1;
  margin-bottom: 7px;
}
.assignment strong {
  font-size: 13px;
  font-weight: 400;
}
.dispatch-context,
.closeout-context,
.money-context {
  padding-top: 30px;
}
.context-note {
  display: flex;
  gap: 17px;
  border-top: 1px solid #2d3948;
  margin-top: 28px;
  padding-top: 22px;
  margin-bottom: 28px;
}
.context-note > span {
  font-size: 25px;
  color: #fca311;
}
.context-note strong {
  font-size: 15px;
  font-weight: 400;
}
.context-note p {
  font-size: 13px;
  margin-top: 7px;
}
.closeout-file h3 {
  font-size: 38px;
  margin: 25px 0 30px;
}
.doc-checklist > div {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #293647;
  font-size: 13px;
}
.checkmark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #82ccb314;
  color: #82ccb3;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}
.doc-checklist small {
  display: block;
  font-size: 11px;
  color: #7e90a5;
  margin-top: 4px;
}
.doc-checklist b {
  margin-left: auto;
  font-size: 9px;
  color: #6e8096;
  font-weight: 400;
}
.invoice-total {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invoice-total span {
  font-size: 10px;
  color: #7f91a5;
}
.invoice-total strong {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.closeout-context .button {
  margin-top: 27px;
}
.money-detail {
  padding: 26px;
  border: 1px solid #324054;
  background: #151e29;
  border-radius: 9px;
}
.money-detail > .mini-label {
  margin-top: 34px;
}
.net-number {
  font-size: 76px;
  letter-spacing: -0.06em;
  font-weight: 400;
  line-height: 1.2;
  margin: 12px 0 25px;
  color: #fca311;
  font-variant-numeric: tabular-nums;
}
.net-number span {
  font-size: 35px;
  color: #a98447;
}
.money-summary {
  display: flex;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid #29394b;
}
.money-summary b {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.cost-stack {
  height: 9px;
  display: flex;
  gap: 4px;
  margin-top: 30px;
}
.cost-stack i {
  border-radius: 2px;
}
.cost-fuel {
  background: #fca311;
  flex: 410;
}
.cost-driver {
  background: #647d9a;
  flex: 720;
}
.cost-other {
  background: #344559;
  flex: 430;
}
.cost-legend {
  display: flex;
  gap: 17px;
  margin: 13px 0 31px;
  font-size: 10px;
  color: #8799ae;
}
.cost-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cost-legend i {
  width: 5px;
  height: 5px;
  background: #fca311;
  border-radius: 1px;
}
.cost-legend span:nth-child(2) i {
  background: #647d9a;
}
.cost-legend span:nth-child(3) i {
  background: #344559;
}
.fuel-adjustment label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #aebccd;
}
.fuel-adjustment output {
  color: #fca311;
}
.fuel-adjustment input {
  width: 100%;
  accent-color: #fca311;
  margin: 19px 0;
  min-height: 24px;
  cursor: pointer;
}
.fuel-adjustment > div {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #687e96;
}
.per-mile {
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid #2e3948;
  margin-top: 30px;
  padding-top: 25px;
}
.per-mile strong {
  font-size: 45px;
  letter-spacing: -0.05em;
  color: #d5dfe9;
  font-weight: 400;
}
.per-mile span {
  font-size: 12px;
  color: #8b9db2;
}
.money-context .feature-plan {
  font-size: 11px;
}
.automation-story {
  background: #0d1219;
  border-top: 1px solid #26303c;
  border-bottom: 1px solid #26303c;
  padding: 110px 0 90px;
  position: relative;
  overflow: hidden;
}
.automation-heading h2 {
  font-size: clamp(42px, 5.1vw, 78px);
  margin: 32px 0 25px;
}
.automation-heading h2 span {
  color: #fca311;
}
.automation-heading > p {
  font-size: 18px;
  color: #9ba9b9;
  line-height: 1.7;
}
.automation-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  margin-top: 75px;
}
.narrative-line {
  display: flex;
  gap: 28px;
  margin-bottom: 39px;
}
.narrative-line > span {
  color: #fca311;
  font-size: 11px;
  padding-top: 7px;
}
.narrative-line h3 {
  font-size: 24px;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.narrative-line p {
  font-size: 15px;
  line-height: 1.8;
  color: #8799af;
  max-width: 370px;
  margin-top: 10px;
}
.automation-narrative > .text-link {
  color: #fca311;
  font-size: 14px;
  margin-left: 43px;
}
.automation-narrative > .feature-plan {
  margin-left: 43px;
  max-width: 360px;
}
.decisions-demo {
  padding: 30px;
  background: #121a24;
  border: 1px solid #344053;
  border-radius: 16px;
  box-shadow: 0 30px 80px #0006;
  transform: perspective(1500px) rotateY(-5deg) rotateX(2deg);
  align-self: start;
  transition: transform 0.5s;
}
.decisions-demo:hover {
  transform: perspective(1500px) rotateY(0) rotateX(0);
}
.decision-top {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 30px;
}
.decision-top > .sample-tag {
  margin-left: auto;
}
.decision-top .mini-label {
  font-size: 9px;
}
.decision-top h3 {
  font-size: 27px;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin-top: 4px;
}
.intelligence-mark {
  border: 1px solid #e9a03066;
  background: #fca31112;
  color: #fca311;
  border-radius: 12px;
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  font-size: 32px;
  box-shadow: 0 0 35px #fca3110e;
  animation: intelligence-light 4s ease-in-out infinite;
}
.decision-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 14px;
  background: transparent;
  border: 1px solid #2c3c50;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: left;
  color: #aabbcf;
  transition: 0.3s;
}
.decision-row strong {
  font-size: 14px;
  font-weight: 400;
  display: block;
}
.decision-row small {
  font-size: 11px;
  color: #6c829c;
  display: block;
  margin-top: 4px;
}
.decision-row > b {
  margin-left: auto;
  font-weight: 400;
  color: #566f8a;
  font-size: 18px;
}
.decision-row.active {
  border-color: #b9853470;
  background: #fca31109;
  color: #e8d2ad;
}
.decision-row.active b {
  color: #fca311;
}
.decision-icon {
  color: #fca311;
  font-size: 23px;
}
.decision-detail {
  border-top: 1px solid #2d3e52;
  padding-top: 23px;
  margin-top: 25px;
  min-height: 175px;
}
.decision-detail .mini-label {
  font-size: 10px;
  color: #fca311;
}
.decision-detail p {
  font-size: 16px;
  line-height: 1.65;
  color: #c5cfdb;
  margin-top: 14px;
}
.decision-footnote {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  color: #7d91aa;
  margin-top: 18px;
}
.permission-demo {
  margin-top: 85px;
  border-top: 1px solid #2a3645;
  padding-top: 55px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}
.permission-demo h3 {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin: 16px 0;
}
.permission-demo > div > p {
  font-size: 14px;
  color: #8295ac;
  max-width: 330px;
  line-height: 1.7;
}
.permission-controls [role="tablist"] {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid #2d3a4c;
  background: #121a24;
  border-radius: 8px;
}
.permission-controls [role="tab"] {
  flex: 1;
  background: transparent;
  color: #8397af;
  border: 0;
  border-radius: 5px;
  min-height: 46px;
  font-size: 12px;
  padding: 10px;
}
.permission-controls [aria-selected="true"] {
  color: #f6c678;
  background: #fca31116;
}
.permission-result,
.always-approve {
  padding: 21px 0;
  border-bottom: 1px solid #293748;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.permission-result > span {
  color: #a6b4c6;
  display: flex;
  align-items: center;
  gap: 10px;
}
.permission-result .signal-dot {
  width: 5px;
  height: 5px;
}
.permission-result > b {
  color: #fca311;
  font-weight: 400;
  text-align: right;
}
.always-approve {
  color: #7388a1;
}
.always-approve b {
  font-weight: 400;
  color: #c4cfdd;
}
.always-approve b > span {
  margin-left: 10px;
  color: #fca311;
}
.permission-controls > .feature-plan {
  font-size: 11px !important;
  max-width: none !important;
}
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #344152;
  border-bottom: 1px solid #344152;
}
.coverage-grid article {
  padding: 33px 32px 31px 0;
  border-right: 1px solid #344152;
  margin-right: 32px;
}
.coverage-grid article:last-child {
  border-right: 0;
  margin-right: 0;
}
.coverage-number {
  font-size: 12px;
  color: #fca311;
}
.coverage-grid h3 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.035em;
  margin: 36px 0 16px;
}
.coverage-grid p {
  font-size: 15px;
  color: #8798ad;
  line-height: 1.8;
  max-width: 300px;
}
.coverage-grid article > span:last-child {
  display: block;
  margin-top: 42px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #4e667f;
}
.connections-row {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  column-gap: 60px;
  row-gap: 25px;
  align-items: center;
}
.connections-row h3 {
  font-size: 34px;
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -0.045em;
  margin-top: 17px;
}
.connector-names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
}
.connector-names > span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a5b2c3;
  font-size: 13px;
}
.connector-names img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  border-radius: 5px;
}
.connections-row > p {
  grid-column: 2;
  font-size: 11px;
  line-height: 1.6;
  color: #627990;
  max-width: 490px;
}
/* Pricing and the existing conversion routes keep their verified terms. */
.experience-home .pricing-section {
  border-top: 1px solid #2c394a;
}
.experience-home .eyebrow.dark {
  color: #a0adbc;
}
.experience-home .section-heading h2,
.experience-home .faq-heading h2 {
  color: #eef3fa;
}
.experience-home .section-heading > p,
.experience-home .faq-heading > p {
  color: #8799b0;
}
.experience-home .pricing-grid {
  gap: 18px;
}
.experience-home .plan-card {
  background: #111923;
  border-color: #2d3c4e;
  color: #e7eef8;
}
.experience-home .plan-card.pro {
  background: #181c22;
  border-color: #fca31177;
}
.experience-home .plan-description,
.experience-home .plan-foot {
  color: #91a1b5;
}
.experience-home .plan-kicker {
  color: #6e839b;
}
.experience-home .plan-price {
  color: #f1f4f7;
}
.experience-home .plan-price span {
  color: #8b9bb0;
}
.experience-home .plan-card ul {
  color: #b5c1d0;
}
.experience-home .plan-card ul li::before {
  color: #fca311;
}
.experience-home .plan-card .button {
  background: #202d3b;
  border-color: #3c4b5e;
  color: #e1e9f2;
}
.experience-home .plan-card.pro .button {
  background: #fca311;
  color: #181106;
  border-color: #fca311;
}
.experience-home .pricing-calculator {
  background: #151e28;
  border-color: #3a495b;
  color: #dbe5f0;
}
.experience-home .pricing-calculator small,
.experience-home .pricing-calculator p {
  color: #8ea0b6;
}
.experience-home .truck-stepper {
  border-color: #3a4d63;
  background: #111923;
}
.experience-home .truck-stepper input,
.experience-home .truck-stepper button {
  background: transparent;
  color: #e9f0f8;
}
.experience-home .pricing-terms {
  border-color: #27374b;
  color: #7d93ac;
}
.experience-home .pricing-terms p,
.experience-home .pricing-terms strong {
  color: #8a9eb7;
}
.experience-home .pricing-terms a {
  color: #c2ccd9;
}
.experience-home .faq-section {
  border-color: #2f3e50;
}
.experience-home .faq-list details {
  border-color: #2e3e51;
}
.experience-home .faq-list summary {
  color: #dfe7f1;
}
.experience-home .faq-list details p {
  color: #93a5bc;
}
.experience-home .faq-list summary > span {
  color: #fca311;
}
.experience-home .faq-heading .text-link {
  color: #fca311;
}
.experience-home .final-cta {
  background: #fca311;
  color: #0c1016;
  border-top: 0;
}
.experience-home .final-cta .button {
  background: #10161e;
  color: #f4f6f8;
  border-color: #10161e;
}
.experience-home .final-cta p {
  color: #4b3515;
}
.experience-home .cta-monogram {
  opacity: 0.065;
}
.site-footer {
  background: #0b0f13;
  border-color: #263547;
}
.site-footer p,
.footer-top > div,
.footer-bottom {
  color: #889bb2;
}
.site-footer .wordmark {
  color: #f1f4f7;
}
.footer-bottom {
  border-color: #273749;
}
.consent-banner {
  background: #151f2c;
  border-color: #3b4b60;
  color: #c4d1e1;
}
.consent-banner button {
  color: #c4d1e1;
  border-color: #405775;
}
.consent-banner button:last-child {
  background: #fca311;
  color: #151008;
  border-color: #fca311;
}
.invoice-dialog {
  background: #f1f4f7;
  color: #15202c;
  width: min(550px, calc(100% - 32px));
  border: 0;
  border-radius: 12px;
  padding: 42px;
  box-shadow: 0 30px 130px #0009;
}
.invoice-dialog::backdrop {
  background: #05090dd9;
  backdrop-filter: blur(8px);
}
.invoice-dialog h2 {
  font-size: 39px;
  letter-spacing: -0.05em;
  font-weight: 400;
  margin: 21px 0 10px;
}
.invoice-dialog > p {
  font-size: 14px;
  color: #75818e;
  margin: 10px 0 35px;
}
.invoice-preview-line {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #cdd5dc;
  padding: 17px 0;
  font-size: 16px;
}
.invoice-preview-line strong {
  font-weight: 400;
}
.invoice-dialog .invoice-attachments {
  font-size: 12px;
  margin: 24px 0;
}
.dialog-close {
  position: absolute;
  right: 13px;
  top: 10px;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  font-size: 25px;
  color: #788391;
}
.invoice-dialog .mini-label {
  color: #9b7626;
}
.invoice-dialog .button {
  min-width: 150px;
}
@keyframes flow-in {
  from {
    opacity: 0.25;
    transform: translateY(13px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes scan-document {
  from {
    transform: translateY(-90px);
  }
  to {
    transform: translateY(450px);
  }
}
@keyframes intelligence-light {
  50% {
    box-shadow: 0 0 38px #fca31126;
    border-color: #e9a030bb;
  }
}
[data-reveal] {
  transition:
    opacity 0.8s ease,
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-enabled [data-reveal]:not(.revealed) {
  opacity: 0;
  translate: 0 23px;
}
@media (max-width: 1100px) {
  .flow-panel {
    gap: 35px;
    padding: 32px;
  }
  .automation-layout {
    gap: 50px;
  }
  .flow-panel h3 {
    font-size: 33px;
  }
  .assignment {
    gap: 10px;
    flex-wrap: wrap;
  }
  .permission-demo {
    gap: 45px;
  }
  .story-heading {
    gap: 45px;
  }
  .story-heading > p {
    max-width: 330px;
  }
  .money-summary b {
    font-size: 17px;
  }
  .net-number {
    font-size: 65px;
  }
  .money-detail {
    padding: 22px;
  }
  .coverage-grid article {
    padding-right: 23px;
    margin-right: 23px;
  }
}
@media (max-width: 800px) {
  .story-heading {
    display: block;
  }
  .story-heading > p {
    max-width: 500px;
    margin-top: 24px;
  }
  .section-index > span:last-child {
    display: none;
  }
  .workflow-tabs button {
    font-size: 13px;
  }
  .flow-panel {
    gap: 28px;
    padding: 26px;
  }
  .flow-panel h3 {
    font-size: 29px;
  }
  .flow-panel p {
    font-size: 14px;
  }
  .paper-document {
    padding: 24px;
  }
  .paper-total b {
    font-size: 24px;
  }
  .extracted-fields > div {
    font-size: 11px;
  }
  .extracted-fields > div:nth-child(2) {
    flex-direction: column;
    gap: 7px;
  }
  .extracted-fields > div:nth-child(2) > b {
    text-align: left;
  }
  .workspace-bar {
    padding: 0 20px;
  }
  .workspace-bar > .sample-tag {
    font-size: 8px;
  }
  .workspace-bar > span {
    gap: 6px;
    font-size: 10px;
  }
  .automation-layout {
    gap: 30px;
  }
  .decisions-demo {
    padding: 22px;
  }
  .decision-row {
    padding: 14px 10px;
    gap: 10px;
  }
  .decision-row strong {
    font-size: 12px;
  }
  .decision-row small {
    font-size: 10px;
  }
  .narrative-line {
    gap: 18px;
  }
  .narrative-line h3 {
    font-size: 21px;
  }
  .narrative-line p {
    font-size: 14px;
  }
  .automation-narrative > .text-link,
  .automation-narrative > .feature-plan {
    margin-left: 33px;
  }
  .permission-demo {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .permission-demo h3 br {
    display: none;
  }
  .permission-demo > div > p {
    max-width: none;
  }
  .connections-row {
    grid-template-columns: 1fr;
  }
  .connections-row > p {
    grid-column: 1;
  }
  .coverage-grid h3 {
    font-size: 26px;
  }
  .coverage-grid p {
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  .experience-home .section {
    padding-block: 76px;
  }
  .section-index {
    font-size: 10px;
    margin-bottom: 28px;
  }
  .story-heading {
    margin-bottom: 32px;
  }
  .story-heading h2,
  .automation-heading h2 {
    font-size: 43px;
    line-height: 1.08;
    letter-spacing: -0.06em;
  }
  .story-heading > p {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 23px;
  }
  .workflow-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-bottom: 23px;
  }
  .workflow-tabs button {
    padding: 13px 12px 13px 0;
    min-height: 71px;
    border-bottom: 1px solid #ffffff14;
    font-size: 12px;
  }
  .workflow-tabs button span {
    font-size: 10px;
  }
  .workflow-tabs button b {
    right: 3px;
    bottom: 15px;
  }
  .workflow-tabs button::after {
    bottom: 0;
  }
  .workspace-bar {
    height: 48px;
    padding: 0 12px;
    gap: 10px;
  }
  .window-lights {
    display: none;
  }
  .workspace-bar > span:first-of-type {
    font-size: 10px;
    gap: 6px;
  }
  .workspace-bar > span:first-of-type > i {
    margin: 0 2px;
  }
  .workspace-bar > span:first-of-type img {
    width: 17px;
    height: 17px;
  }
  .workspace-bar > .sample-tag {
    font-size: 7px;
    padding: 3px;
  }
  .flow-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 19px;
    min-height: 0;
  }
  .document-column {
    padding: 0 9px;
  }
  .file-heading {
    font-size: 10px;
  }
  .file-heading small {
    font-size: 9px;
  }
  .paper-document {
    max-width: 360px;
    margin: auto;
    padding: 26px;
  }
  .paper-document > small {
    margin-top: 14px;
  }
  .paper-document > strong {
    font-size: 21px;
  }
  .paper-lines {
    margin-top: 18px;
  }
  .paper-total {
    margin-top: 18px;
  }
  .extraction-column,
  .dispatch-context,
  .closeout-context,
  .money-context {
    padding-top: 0;
  }
  .flow-panel h3 {
    font-size: 33px;
  }
  .flow-panel p {
    font-size: 15px;
  }
  .flow-panel .demo-status {
    font-size: 12px;
  }
  .flow-panel .feature-plan {
    font-size: 11px;
  }
  .extracted-fields > div {
    font-size: 12px;
  }
  .extracted-fields > div:nth-child(2) {
    flex-direction: row;
    gap: 10px;
  }
  .extracted-fields > div:nth-child(2) b {
    text-align: right;
  }
  .extracted-fields {
    margin: 24px 0;
  }
  .trip-detail,
  .closeout-file {
    padding: 22px;
  }
  .trip-detail h3 {
    font-size: 27px;
  }
  .trip-detail > p {
    font-size: 11px;
  }
  .trip-detail .assignment {
    gap: 15px;
  }
  .trip-detail .assignment strong {
    font-size: 12px;
  }
  .trip-detail .assignment small {
    font-size: 8px;
  }
  .trip-stops strong {
    font-size: 21px;
  }
  .context-note {
    margin: 25px 0;
  }
  .context-note p {
    font-size: 13px;
  }
  .money-detail {
    padding: 22px;
  }
  .net-number {
    font-size: 67px;
  }
  .net-number span {
    font-size: 29px;
  }
  .money-summary b {
    font-size: 18px;
  }
  .money-summary small {
    font-size: 8px;
  }
  .money-context .per-mile {
    margin-top: 20px;
  }
  .automation-story {
    padding: 75px 0 60px;
  }
  .automation-heading > p {
    font-size: 16px;
  }
  .automation-heading h2 {
    margin: 25px 0;
  }
  .automation-layout {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 45px;
  }
  .narrative-line {
    gap: 23px;
    margin-bottom: 29px;
  }
  .narrative-line h3 {
    font-size: 23px;
  }
  .narrative-line p {
    font-size: 15px;
    margin-top: 8px;
  }
  .automation-narrative > .text-link,
  .automation-narrative > .feature-plan {
    margin-left: 37px;
  }
  .decisions-demo {
    padding: 23px;
    transform: none;
    border-radius: 12px;
  }
  .decision-row strong {
    font-size: 13px;
  }
  .decision-row small {
    font-size: 11px;
  }
  .decision-top h3 {
    font-size: 28px;
  }
  .decision-detail p {
    font-size: 16px;
  }
  .permission-demo {
    margin-top: 45px;
    padding-top: 38px;
  }
  .permission-demo h3 {
    font-size: 30px;
  }
  .permission-controls [role="tab"] {
    font-size: 11px;
    padding: 9px 6px;
    min-height: 50px;
  }
  .permission-result,
  .always-approve {
    font-size: 11px;
    gap: 15px;
    align-items: flex-start;
  }
  .permission-result > b,
  .always-approve > b {
    text-align: right;
    max-width: 140px;
  }
  .permission-result > span {
    gap: 6px;
  }
  .permission-controls .feature-plan {
    font-size: 10px !important;
  }
  .coverage-grid {
    grid-template-columns: 1fr;
  }
  .coverage-grid article {
    padding: 25px 0;
    margin: 0;
    border-right: 0;
    border-bottom: 1px solid #2a3a4e;
    position: relative;
  }
  .coverage-grid article:last-child {
    border: 0;
  }
  .coverage-grid h3 {
    font-size: 28px;
    margin: 0 0 12px 37px;
  }
  .coverage-number {
    position: absolute;
    left: 0;
    top: 30px;
  }
  .coverage-grid p {
    margin-left: 37px;
    font-size: 15px;
    max-width: none;
  }
  .coverage-grid article > span:last-child {
    margin: 22px 0 0 37px;
    font-size: 9px;
  }
  .connections-row {
    margin-top: 42px;
    gap: 25px;
  }
  .connections-row h3 {
    font-size: 33px;
  }
  .connector-names {
    grid-template-columns: 1fr 1fr;
    gap: 25px 20px;
  }
  .connector-names > span {
    font-size: 12px;
  }
  .connections-row > p {
    font-size: 11px;
  }
  .experience-home .final-cta h2 {
    font-size: 44px;
  }
  .invoice-dialog {
    padding: 35px 24px;
  }
  .invoice-dialog h2 {
    font-size: 33px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal-enabled [data-reveal]:not(.revealed) {
    opacity: 1;
    translate: none;
  }
  .paper-document,
  .decisions-demo {
    transform: none !important;
  }
}
html[data-motion="paused"] .intelligence-mark,
html[data-motion="paused"] .scanner-beam {
  animation-play-state: paused;
}
html[data-motion="paused"] [data-reveal] {
  transition: none;
}
.scene-chapters button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #fca311;
  transform: scaleX(0);
  transform-origin: left;
}
.scene-chapters button.active::after {
  transform: scaleX(var(--chapter-progress, 0));
}
/* Critical review: bring the product into the first screen and keep metadata legible. */
@media (min-width: 701px) {
  .command-hero {
    padding-top: 48px;
  }
  .command-intro h1 {
    font-size: clamp(64px, 6.15vw, 96px);
    margin-top: 22px;
    margin-bottom: 22px;
  }
  .command-cta {
    margin-top: 22px;
  }
  .command-stage {
    margin-top: -26px;
  }
}
.experience-home .plan-top > span {
  color: #8297ad;
  font-size: 10px;
}
.experience-home .pro-label {
  background: #fca3111c;
  color: #fca311;
  border: 1px solid #fca31139;
}
.experience-home .plan-foot {
  border-color: #334358;
}
.experience-home .plan-card ul {
  font-size: 14px;
}
.experience-home .plan-card ul li::before {
  color: #fca311;
}
.experience-home .final-cta .eyebrow.dark {
  color: #604214;
}
.experience-home .faq-section .text-link {
  color: #fca311;
}
.site-page {
  background: #0b0f13;
  color: #f1f4f7;
}
.site-page .site-header .wordmark {
  color: #f1f4f7;
}
.site-page .eyebrow.dark {
  color: #94a4b7;
}
.site-page .legal h1,
.site-page .legal h2,
.site-page .legal strong,
.site-page .legal b {
  color: #eaf0f7;
}
.site-page .legal p,
.site-page .legal li {
  color: #a4b1c3;
}
.site-page .legal .updated {
  color: #7e94ad;
}
.site-page .legal a {
  color: #edb660;
}
.site-page .legal .note {
  background: #151f2a;
  border-color: #344559;
  color: #b5c2d3;
}
.auth-surface,
.account-surface {
  --bg: #0b0f13;
  --bg2: #111821;
  --card: #151e29;
  --card2: #1c2938;
  --line: #344357;
  --line2: #4b5f78;
  --text: #eaf0f8;
  --muted: #99acc2;
  --faint: #8195ad;
  --red: #e2a199;
  --green: #82ccb3;
}
.auth-surface .app-card,
.account-surface .app-card {
  background: #141d28;
  border-color: #344357;
  color: #eaf0f8;
  box-shadow: 0 20px 80px #0005;
}
.auth-surface .app-card .lede {
  color: #99abc0;
}
.auth-surface .fld input,
.auth-surface .fld select,
.account-surface .fld input {
  background: #0d151f;
  color: #edf2f8;
  border-color: #3b4e65;
}
.auth-surface .fld label {
  color: #c1cedf;
}
.auth-surface .tabs {
  border-color: #3a4b60;
}
.auth-surface .tabs button {
  color: #8d9fb5;
}
.auth-surface .tabs button.on {
  background: #fca31115;
  border-color: #fca31170;
  color: #fca311;
}
.auth-surface .btn-amber,
.account-surface .btn-amber {
  background: #fca311;
  color: #1a1004;
  border-color: #fca311;
}
.auth-surface .formnote a,
.auth-surface .linkbtn,
.auth-surface .steplabel {
  color: #fca311;
}
.auth-surface .choice {
  background: #1c2a3b;
  border-color: #3d526c;
  color: #d3e0ef;
}
.auth-surface .choice.active {
  background: #fca31118;
  border-color: #fca31166;
}
.support-intro > p:last-child,
.support-content p,
.support-content .updated {
  color: #9aadbf;
}
.support-content .card {
  background: #172230;
  border-color: #34475c;
}
.support-content .q,
.support-content h1,
.support-content h2 {
  color: #e0e9f4;
}
.support-content a {
  color: #fca311;
}
.beta-copy > p:not(.eyebrow),
.beta-note p,
.beta-boundaries p {
  color: #99abc0;
}
.beta-note b,
.beta-boundaries b {
  color: #d6e0ec;
}
.beta-form .card {
  background: #152030;
  border: 1px solid #3a4c65;
  color: #dce7f3;
}
.beta-form input,
.beta-form select {
  background: #0e1723;
  color: #e6eef7;
  border-color: #425773;
}
.beta-form .fine {
  color: #94a8c1;
}
.beta-form .err {
  color: #e9a296;
}
.beta-boundaries {
  border-color: #34485f;
}
.narrative-line p,
.coverage-grid p {
  font-size: 16px;
}
.scene-label {
  font-size: 11px;
}
.scene-label-left {
  left: 4%;
  top: 28px;
}
.scene-label-right {
  bottom: 30px;
}
.scene-disclosure {
  color: #8799ae;
}
.scene-chapters button {
  font-size: 14px;
}
.scene-chapters button span {
  font-size: 12px;
}
.permission-controls [role="tab"] {
  font-size: 13px;
}
.permission-result,
.always-approve {
  font-size: 13px;
}
.permission-demo > div > p {
  font-size: 16px;
}
.feature-plan {
  color: #8b9db3;
}
@media (max-width: 700px) {
  .command-cta {
    flex-wrap: nowrap;
    gap: 9px;
  }
  .command-cta .button {
    flex: 1;
    justify-content: space-between;
    min-width: 0;
    font-size: 12px;
    gap: 8px;
    padding: 12px 13px;
    white-space: nowrap;
  }
  .command-stage {
    height: 430px;
    margin-top: -12px;
  }
  .scene-chapters button {
    font-size: 12px;
  }
  .scene-chapters button span {
    font-size: 10px;
  }
  .hero-note {
    font-size: 11px;
  }
  .scene-toolbar {
    margin-top: -13px;
  }
  .permission-controls [role="tab"] {
    font-size: 11px;
  }
  .permission-result,
  .always-approve {
    font-size: 12px;
  }
  .narrative-line p,
  .coverage-grid p,
  .flow-panel p {
    font-size: 16px;
  }
  .flow-panel .feature-plan {
    font-size: 12px;
  }
}
@media (max-width: 360px) {
  .command-cta .button {
    font-size: 11px;
    padding-inline: 10px;
    gap: 5px;
  }
  .command-intro .overline {
    font-size: 8px;
    letter-spacing: 0.05em;
  }
}
.command-fallback-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.command-fallback-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.command-stage[data-scene="ready"] .command-fallback-image {
  visibility: hidden;
}
.command-stage[data-scene="fallback"] canvas {
  display: none;
}
.command-stage[data-scene="fallback"] ~ .scene-toolbar {
  display: none;
}