/* Small product demonstrations. Final states stay legible without motion. */
.benefits-grid { grid-template-columns: 1fr; gap: 72px; margin-top: 52px; }
.feature-demo {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 76px; min-width: 0; margin: 0;
}
.feature-demo figcaption { grid-column: 2; grid-row: 1; max-width: 400px; }
.feature-demo .demo-stage { grid-column: 1; grid-row: 1; min-width: 0; }
.feature-demo:nth-child(even) figcaption { grid-column: 1; }
.feature-demo:nth-child(even) .demo-stage { grid-column: 2; }
.feature-demo h3 { margin: 0; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.15; text-wrap: balance; }
.feature-demo figcaption p { margin-top: 20px; font-size: 17px; line-height: 1.65; }
.demo-stage {
  height: 280px; overflow: hidden; position: relative; isolation: isolate;
  background: #f5f6f8; border: 1px solid #e4e7ed; border-radius: 12px;
}
.demo-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 39px; padding: 0 20px; color: #5b6473; font-size: 11px;
  background: #fff; border-bottom: 1px solid #e4e7ed;
}
.demo-paper {
  position: relative; background: #fff; border: 1px solid #e5e7ed;
  border-radius: 3px; width: calc(100% - 72px); margin: 20px auto 0;
  padding: 22px 24px 27px; color: #292d35; min-height: 225px;
  box-shadow: 0 5px 15px #1c2e4b05; font: 14px/1.8 Georgia, 'Times New Roman', serif;
}
.paper-title { font-size: 12px; font-weight: 700; letter-spacing: .035em; margin-bottom: 14px; }
.benefits-grid .demo-paper p { font: inherit; margin: 0 0 14px; max-width: none; color: inherit; }
.paper-lines { display: grid; gap: 8px; margin-top: 18px; }
.paper-lines i { height: 3px; background: #e8e9ec; border-radius: 2px; width: 85%; }
.paper-lines i:last-child { width: 55%; }
.scan-layout { display: grid; grid-template-columns: 142px minmax(0,1fr); height: 100%; }
.demo-files { padding: 25px 10px; background: #fafbfc; border-right: 1px solid #e4e7ed; font-size: 10px; }
.demo-folder,.demo-file { display: flex; align-items: center; gap: 6px; }
.demo-folder { font-size: 12px; font-weight: 600; margin: 0 0 23px 4px; }
.demo-files svg { width: 14px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; }
.demo-file { padding: 10px 5px; margin-bottom: 7px; border-radius: 5px; color: #586276; }
.demo-file.current { background: #eaf1fc; color: #075bc9; }
.file-done { margin-left: auto; color: #075bc9; font-size: 11px; }
.demo-paper.scan-paper { width: calc(100% - 30px); margin-top: 24px; padding: 22px 16px; font-size: 13px; }
.scan-paper .paper-title { font-size: 10px; }
.scan-mark { background: #e2edff; border-radius: 2px; box-decoration-break: clone; }
.scan-light {
  position: absolute; top: 18px; left: 0; right: 0; height: 45px; opacity: 0;
  background: linear-gradient(transparent, #2783fc18); border-bottom: 2px solid #458df6;
  box-shadow: 0 5px 12px #458df616; pointer-events: none;
}
.demo-swap { display: inline-grid; vertical-align: baseline; }
.demo-swap > span { grid-area: 1 / 1; align-self: baseline; white-space: nowrap; }
.swap-before { opacity: 0; }
.token { font: 10px/1.9 Inter, sans-serif; letter-spacing: .025em; color: #075bc9; background: #eaf1fc; border-radius: 3px; padding: 1px 5px; }
.restored-name { color: #a52b51; background: #fff0f4; padding: 0 3px; border-radius: 3px; }
.manual-target { position: relative; display: inline-block; }
.manual-highlight { position: absolute; inset: 1px -2px; background: #cfe1ff; transform-origin: left; border-radius: 2px; }
.manual-phrase { position: relative; }
.manual-action { position: absolute; left: 52%; bottom: calc(100% + 9px); padding: 4px 11px; border-radius: 6px; background: #075bc9; box-shadow: 0 3px 9px #075bc922; color: white; font: 11px/1.8 Inter, sans-serif; white-space: nowrap; }
.demo-cursor { position: absolute; width: 21px; height: 25px; top: 6px; left: 5px; fill: #202b3b; stroke: white; stroke-width: 1.5; opacity: 0; filter: drop-shadow(0 2px 2px #0002); }
@media (min-width: 651px) and (max-width: 1000px) {
  .feature-demo { gap: 40px; }
  .scan-layout { grid-template-columns: 105px minmax(0,1fr); }
  .demo-files { padding-left: 5px; padding-right: 5px; }
  .demo-file { font-size: 9px; gap: 3px; }
  .demo-paper { width: calc(100% - 28px); padding-left: 14px; padding-right: 14px; font-size: 12px; }
  .demo-paper.scan-paper { width: calc(100% - 20px); font-size: 11px; padding: 18px 10px; }
}
@media (max-width: 800px) {
  .benefits-grid { gap: 48px; margin-top: 38px; }
  .feature-demo { grid-template-columns: 1fr; gap: 22px; }
  .feature-demo figcaption,.feature-demo:nth-child(even) figcaption { grid-column: 1; grid-row: 1; max-width: 540px; }
  .feature-demo .demo-stage,.feature-demo:nth-child(even) .demo-stage { grid-column: 1; grid-row: 2; width: 100%; max-width: 565px; justify-self: center; }
}
@media (max-width: 650px) {
  .feature-demo h3 { font-size: 28px; }
  .feature-demo figcaption p { font-size: 16px; margin-top: 14px; }
  .demo-stage { height: 265px; }
  .demo-paper { width: calc(100% - 28px); padding: 22px 16px; font-size: 13px; }
  .scan-layout { grid-template-columns: 112px minmax(0,1fr); }
  .demo-files { padding: 22px 5px; }
  .demo-file { font-size: 9px; gap: 3px; }
  .demo-paper.scan-paper { width: calc(100% - 20px); padding: 18px 11px; font-size: 12px; }
}
@media (max-width: 360px) {
  .scan-layout { grid-template-columns: 98px minmax(0,1fr); }
  .demo-files svg { width: 11px; }
  .demo-paper { font-size: 12px; padding-left: 12px; padding-right: 12px; }
  .demo-paper.scan-paper { font-size: 11px; padding-left: 9px; padding-right: 9px; }
  .token { font-size: 9px; }
}