/* Vikbot — scanbot.css (ScanBot page only): each section gets its own layout */

/* icon squares (the site's .feature .ic look, outside .feature cards) */
.sb-issues .ic, .sb-tile .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; align-self: flex-start; }
.sb-issues .ic .icon, .sb-tile .ic .icon { width: 22px; height: 22px; }
.sb-issues .ic.peach { background: var(--peach-soft); color: var(--peach); }

/* ---------- Problem: barcode vs ScanBot comparison ---------- */
.sb-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.sb-side { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.sb-side.on { background: linear-gradient(160deg, #F4FAF2, #EAF5E6); }
.sb-side-tag { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sb-side.on .sb-side-tag { color: var(--accent-ink); }
.sb-vs { display: grid; place-items: center; width: 56px; border-inline: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--ink-3); background: var(--bg); }
.sb-label { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 10px 24px -18px rgb(11 11 15 / .35); min-height: 116px; }
.sb-bars { flex: none; width: 92px; height: 64px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #15171C 0 2px, transparent 2px 4px, #15171C 4px 7px, transparent 7px 9px, #15171C 9px 10px, transparent 10px 13px); }
.sb-side:not(.on) .sb-bars { outline: 2px solid #E8A317; outline-offset: 4px; }
.sb-label-lines { flex: 1; display: grid; gap: 9px; }
.sb-label-lines i { display: block; height: 8px; border-radius: 4px; background: #E7E9EE; }
.sb-label-lines i:nth-child(2) { width: 80%; } .sb-label-lines i:nth-child(3) { width: 64%; } .sb-label-lines i:nth-child(4) { width: 72%; }
.sb-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-fields span { padding: 6px 8px; border-radius: 8px; border: 1.5px solid #4ADE5A; background: #F3FCF1; font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.sb-fields b { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sb-read { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--ink-3); }
.sb-read b { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--ink); }
.sb-side.on .sb-read b { color: var(--accent-ink); }
.sb-side-note { margin: 0; font-size: 15px; color: var(--ink-2); }

.sb-issues { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.sb-issues li { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.sb-issues li .ic { flex: none; }
.sb-issues h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 600; }
.sb-issues p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sb-statement { margin: 36px 0 0; padding-left: 20px; border-left: 3px solid var(--peach); font-family: "IBM Plex Sans", var(--font); font-weight: 300; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; color: var(--ink); max-width: 860px; }
.sb-statement.center { border-left: 0; padding-left: 0; margin: 56px auto 0; text-align: center; }

/* ---------- How it works: dark band with a numbered rail ---------- */
.sb-dark { background: var(--stage); color: #E8EAEE; }
.sb-dark .h2 { color: #fff; } .sb-dark .h2 .muted { color: #8C929C; }
.sb-dark .eyebrow { color: #4ADE5A; } .sb-dark .sec-head .body { color: #A4AAB4; }
.sb-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.sb-rail::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, #2FA318, #2FA318 60%, rgb(47 163 24 / .25)); }
.sb-rail li { position: relative; }
.sb-rail-dot { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--stage); border: 2px solid #2FA318; color: #fff; font-family: var(--mono); font-size: 16px; margin-bottom: 24px; box-shadow: 0 0 0 6px var(--stage); }
.sb-rail h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: #fff; }
.sb-rail p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #A4AAB4; max-width: 320px; }
.sb-out { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: #1C1E24; border: 1px solid #2A2D35; font-family: var(--mono); font-size: 12px; color: #C9CED6; }
.sb-out .icon { width: 14px; height: 14px; color: #4ADE5A; }

/* ---------- Put-away flow: connected steps ---------- */
.sb-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.sb-flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 31px; border-top: 2px dashed #A8D79E; }
.sb-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; gap: 6px; }
.sb-flow-ic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent-ink); box-shadow: 0 0 0 8px var(--bg), 0 12px 24px -14px rgb(35 141 16 / .5); margin-bottom: 14px; }
.sb-flow-ic .icon { width: 26px; height: 26px; }
.sb-flow-n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sb-flow h3 { margin: 0; font-size: 18px; font-weight: 600; }
.sb-flow p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 240px; }
.sb-res { margin-top: auto; display: inline-flex; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; }
.sb-res.ok { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.sb-res.next { background: #F3F4F6; color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- Benefits: bento grid ---------- */
.sb-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.sb-tile { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.sb-tile .ic { margin-bottom: 8px; }
.sb-tile h3 { margin: 0; font-size: 19px; font-weight: 600; }
.sb-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sb-tile.big { grid-row: span 2; }
.sb-tile.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.sb-tile.accent h3 { color: #fff; } .sb-tile.accent p { color: rgb(255 255 255 / .85); }
.sb-tile.accent .ic { background: rgb(255 255 255 / .16); color: #fff; }
.sb-big { margin: 4px 0 2px !important; font-family: "IBM Plex Sans", var(--font); font-weight: 300; font-size: clamp(40px, 4vw, 56px) !important; line-height: 1 !important; color: #fff !important; }
.sb-tile.accent { grid-column: span 2; }
.sb-fefo { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: grid; gap: 8px; }
.sb-fefo li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.sb-fefo li b { font-family: var(--font); font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--r-pill); background: #F3F4F6; color: var(--ink-3); }
.sb-fefo li.first { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.sb-fefo li.first b { background: var(--accent); color: #fff; }
.sb-strike { margin-top: auto; align-self: flex-start; padding: 6px 12px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-3); text-decoration: line-through; }
.sb-loc { margin-top: auto; align-self: flex-start; padding: 6px 14px; border-radius: 8px; background: #fff; border: 2px solid #15171C; font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .04em; box-shadow: 0 0 0 4px rgb(74 222 90 / .35); }

/* ---------- ROI: headline numbers + two lists ---------- */
.sb-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.sb-stats div { padding: 32px 24px; border-left: 1px solid var(--line); }
.sb-stats div:first-child { border-left: 0; padding-left: 0; }
.sb-stats b { display: block; font-family: "IBM Plex Sans", var(--font); font-weight: 300; font-size: clamp(36px, 4.2vw, 60px); line-height: 1; color: var(--accent-ink); letter-spacing: -.02em; }
.sb-stats span { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.sb-roi { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
.sb-roi h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.sb-roi h3 .icon { width: 20px; height: 20px; color: var(--accent-ink); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .sb-compare { grid-template-columns: 1fr; }
  .sb-vs { width: auto; height: 40px; border-inline: 0; border-block: 1px solid var(--line); }
  .sb-rail { grid-template-columns: 1fr; gap: 32px; }
  .sb-rail::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; }
  .sb-rail li { padding-left: 68px; } .sb-rail-dot { position: absolute; left: 0; top: 0; }
  .sb-flow { grid-template-columns: 1fr 1fr; row-gap: 40px; } .sb-flow::before { display: none; }
  .sb-bento { grid-template-columns: 1fr 1fr; } .sb-tile.big { grid-row: auto; grid-column: span 2; }
  .sb-stats { grid-template-columns: 1fr 1fr; } .sb-stats div:nth-child(3) { border-left: 0; padding-left: 0; } .sb-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .sb-side { padding: 22px; }
  .sb-issues { grid-template-columns: 1fr; }
  .sb-flow { grid-template-columns: 1fr; }
  .sb-bento { grid-template-columns: 1fr; } .sb-tile.big, .sb-tile.accent { grid-column: auto; }
  .sb-roi { grid-template-columns: 1fr; gap: 28px; }
}