/* ============================================
   SLM SCANNER BELT — sample business documents cross an orange scanner,
   dissolve into pixels and come out as Glixy SLM's structured output.
   Cards are DOM, the output is real text, the dissolve is a canvas drawn
   every frame in sync with card positions (belt.js).
   ============================================ */

.dbelt {
  --H: max(660px, 100vh);
  --ink: #0F1115;
  --body: #2A2E35;
  --muted: #8B9098;
  --code: #7A7F88;
  --comment: #B3B8BF;
  --hot: #FF5A1F;
  --hot-soft: #FFE1D3;
  --cw: 46vw;
  --ch: calc(var(--H) * .52);
  --gap: 4.75vw;
  --top: calc(var(--H) * .402);
  --dsans: "Inter", system-ui, sans-serif;
  --dserif: "Newsreader", Georgia, serif;
  --dmono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  position: relative;
  height: var(--H);
  overflow: hidden;
  background: #EEF0F2;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Copy ---------- */
.dbelt-hero {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 34vw;
  gap: 4vw;
  /* clears the fixed homepage header */
  padding: max(118px, calc(var(--H) * .12)) 8.9vw 0;
}
.dbelt-eyebrow {
  font-family: var(--dmono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--body);
}
.dbelt-title {
  margin-top: 14px;
  font-family: var(--dserif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 58px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.dbelt-title em { font-family: var(--dserif); font-style: italic; font-weight: 400; }
.dbelt-text {
  font-family: var(--dsans);
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.55;
  color: var(--body);
  max-width: 34vw;
}
.dbelt-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-top: 20px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--hot);
  color: #fff;
  font-family: var(--dsans);
  font-weight: 500;
  font-size: 13px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.dbelt-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 90, 31, .28); }

/* ---------- Belt ---------- */
.dbelt-belt {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top) - 70px);
  height: calc(var(--ch) + 140px);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.dbelt-belt.is-dragging { cursor: grabbing; }
.dbelt-codes {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24vw);
  mask-image: linear-gradient(90deg, transparent 0, #000 24vw);
}
.dbelt-cards { position: absolute; inset: 0; }
.dbelt-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.dbelt-card,
.dbelt-code {
  position: absolute;
  top: 70px;
  left: 0;
  width: var(--cw);
  height: var(--ch);
  will-change: transform, clip-path;
}

/* ---------- Scanner ---------- */
.dbelt-scan {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--top) - 14px);
  width: 0;
  height: calc(var(--ch) + 40px);
  pointer-events: none;
}
.dbelt-scan i {
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ff7a3c, #FF5A1F 12%, #FF5A1F 88%, #ff7a3c);
  box-shadow: 0 0 10px 2px rgba(255, 90, 31, .85), 0 0 34px 10px rgba(255, 90, 31, .38);
}
.dbelt-scan b {
  position: absolute;
  left: 0;
  top: 4%;
  height: 92%;
  width: 42px;
  background: linear-gradient(90deg, rgba(255, 110, 50, .55), transparent);
  filter: blur(6px);
}

/* ---------- Counter ---------- */
.dbelt-badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--top) - 60px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}
.dbelt-badge > span { font-family: var(--dsans); font-size: 11.5px; color: var(--muted); }
.dbelt-pill {
  display: flex;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(255, 90, 31, .35);
  font-family: var(--dmono);
  font-weight: 500;
  font-size: 12.5px;
}
.dbelt-pill b {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 10.5ch;
  padding: 0 11px 0 13px;
  background: var(--hot);
  color: #fff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dbelt-pill em {
  display: flex;
  align-items: center;
  padding: 0 12px 0 10px;
  background: var(--hot-soft);
  color: #D9430F;
  font-family: var(--dmono);
  font-style: normal;
  font-size: 11px;
  white-space: nowrap;
}
.dbelt-note {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(var(--H) * .03);
  text-align: center;
  font-family: var(--dmono);
  font-size: 11px;
  color: var(--muted);
}

/* ---------- Output (left of the line) ---------- */
.dbelt-code { overflow: hidden; container-type: inline-size; }
.dbelt-code pre {
  position: absolute;
  top: 0;
  margin: 0;
  white-space: pre;
  font-family: var(--dmono);
  font-weight: 400;
  font-size: 1.56cqw;
  line-height: 1.39;
}
.dbelt-code .out { left: 0; color: var(--code); }
.dbelt-code .meta { left: 51%; color: var(--comment); }

/* ============================================
   Sample document cards (sized in cqw = % of card width)
   ============================================ */
.dbelt-card {
  border-radius: 1.6vw;
  overflow: hidden;
  container-type: inline-size;
  font-family: var(--dsans);
  user-select: none;
  -webkit-user-select: none;
}
.dc-head {
  position: absolute;
  left: 4.4cqw;
  right: 4.4cqw;
  top: 4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dc-brand { display: flex; align-items: center; gap: 1.3cqw; font-weight: 500; font-size: 3.4cqw; letter-spacing: -.03em; }
.dc-brand svg { width: 4.6cqw; height: 4.6cqw; }
.dc-tag {
  font-family: var(--dmono);
  font-size: 1.32cqw;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .7cqw 1.6cqw;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .8;
}
.dc-k { font-family: var(--dmono); font-size: 1.4cqw; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.dc-serif { font-family: var(--dserif); font-weight: 400; letter-spacing: -.02em; }
.dc-rule { border-top: 1px solid currentColor; opacity: .18; }
.dc-row { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.25cqw 0; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 1.7cqw; }

/* 1 — Tax invoice: white paper, orange band */
.dc-invoice { background: #fff; color: #1B1E24; }
.dc-invoice::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.4cqw; background: linear-gradient(90deg, #FF5A1F, #FFB06A); }
.dc-invoice .dc-title { position: absolute; left: 4.4cqw; top: 15cqw; font-size: 7cqw; }
.dc-invoice .dc-meta { position: absolute; left: 4.4cqw; top: 25cqw; display: grid; grid-template-columns: repeat(3, auto); gap: .6cqw 5cqw; font-size: 1.6cqw; }
.dc-invoice .dc-meta span { opacity: .55; }
.dc-invoice .dc-table { position: absolute; left: 4.4cqw; right: 4.4cqw; top: 34cqw; }
.dc-invoice .dc-total { position: absolute; right: 4.4cqw; bottom: 4.5cqw; text-align: right; }
.dc-invoice .dc-total span { display: block; font-size: 1.6cqw; opacity: .55; }
.dc-invoice .dc-total strong { font-weight: 300; font-size: 6cqw; letter-spacing: -.04em; }

/* 2 — Support email: light mail client */
.dc-mail { background: #F4F6F9; color: #18202E; }
.dc-mail .dc-side { position: absolute; left: 0; top: 0; bottom: 0; width: 20cqw; background: #E7EBF1; padding: 13cqw 2.6cqw 0; display: grid; align-content: start; gap: 1.6cqw; font-size: 1.6cqw; }
.dc-mail .dc-side b { font-weight: 500; color: #FF5A1F; }
.dc-mail .dc-body { position: absolute; left: 24cqw; right: 4.4cqw; top: 13cqw; }
.dc-mail .dc-subj { font-size: 3.4cqw; font-weight: 500; letter-spacing: -.02em; }
.dc-mail .dc-from { margin-top: 1.2cqw; font-size: 1.6cqw; opacity: .6; }
.dc-mail p { margin-top: 2.6cqw; font-size: 1.9cqw; line-height: 1.55; }
.dc-mail .dc-chip { display: inline-block; margin-top: 2.4cqw; padding: .6cqw 1.6cqw; border-radius: 999px; background: #FFE1D3; color: #B23A0C; font-size: 1.5cqw; }

/* 3 — HR policy: cream paper, serif */
.dc-policy { background: #F6EFE4; color: #2A2116; }
.dc-policy .dc-title { position: absolute; left: 4.4cqw; top: 14cqw; font-size: 5.6cqw; line-height: 1.02; width: 46cqw; }
.dc-policy .dc-title em { font-style: italic; opacity: .7; }
.dc-policy .dc-clause { position: absolute; left: 4.4cqw; right: 40cqw; top: 33cqw; font-size: 1.75cqw; line-height: 1.6; }
.dc-policy .dc-clause b { font-weight: 600; background: rgba(255, 90, 31, .18); padding: 0 .4cqw; border-radius: .4cqw; }
.dc-policy .dc-aside { position: absolute; right: 4.4cqw; top: 33cqw; width: 30cqw; }

/* 4 — Purchase order: dark */
.dc-po { background: #1B1311; color: #F3E9E2; }
.dc-po .dc-title { position: absolute; left: 4.4cqw; top: 14cqw; font-size: 6.4cqw; }
.dc-po .dc-title em { font-style: italic; opacity: .7; }
.dc-po .dc-grid { position: absolute; left: 4.4cqw; right: 4.4cqw; top: 31cqw; display: grid; grid-template-columns: 1.6fr .6fr .8fr .9fr; font-size: 1.65cqw; }
.dc-po .dc-grid span { padding: 1.2cqw 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.dc-po .dc-grid .h { opacity: .55; font-family: var(--dmono); font-size: 1.3cqw; letter-spacing: .1em; border-top: 0; }
.dc-po .dc-foot { position: absolute; left: 4.4cqw; right: 4.4cqw; bottom: 4.4cqw; display: flex; justify-content: space-between; font-size: 1.6cqw; opacity: .75; }

/* 5 — Meeting notes: warm orange gradient */
.dc-notes { background: radial-gradient(120% 90% at 20% 110%, #FF6A1F 0, #FF9A4A 35%, #F7C79A 62%, #EFD9C4 100%); color: #2A1406; }
.dc-notes .dc-title { position: absolute; left: 4.4cqw; top: 14cqw; font-size: 6cqw; }
.dc-notes ul { position: absolute; left: 4.4cqw; right: 44cqw; top: 26cqw; list-style: none; font-size: 1.9cqw; line-height: 1.5; }
.dc-notes li { padding: 1cqw 0; border-top: 1px solid rgba(42, 20, 6, .22); }
.dc-notes li b { font-weight: 600; }
.dc-notes .dc-who { position: absolute; right: 4.4cqw; top: 26cqw; width: 34cqw; }
.dc-notes .dc-who div { display: flex; justify-content: space-between; padding: 1cqw 0; border-top: 1px solid rgba(42, 20, 6, .22); font-size: 1.7cqw; }

/* 6 — Service agreement: cool grey */
.dc-contract { background: #E9ECF1; color: #121A2A; }
.dc-contract .dc-title { position: absolute; left: 4.4cqw; top: 14cqw; font-size: 5.6cqw; line-height: 1.02; }
.dc-contract .dc-title em { font-style: italic; color: #46618E; }
.dc-contract .dc-cols { position: absolute; left: 4.4cqw; right: 4.4cqw; top: 32cqw; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3cqw; font-size: 1.65cqw; line-height: 1.55; }
.dc-contract .dc-cols p:first-child { font-family: var(--dmono); font-size: 1.3cqw; letter-spacing: .1em; color: #6A7891; margin-bottom: .8cqw; }
.dc-contract .dc-flag { background: #FFE1D3; border-radius: .4cqw; padding: 0 .4cqw; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .dbelt { --H: max(640px, 100svh); --cw: 84vw; --ch: 54vw; --gap: 7vw; --top: calc(var(--H) * .54); }
  .dbelt-hero { grid-template-columns: 1fr; gap: 14px; padding: 96px 20px 0; }
  .dbelt-title { font-size: 30px; }
  .dbelt-note { bottom: 10px; padding: 0 70px 0 16px; text-align: left; }
  .dbelt-text { font-size: 14px; max-width: none; }
  .dbelt-btn { margin-top: 14px; }
  .dbelt-codes {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30vw);
    mask-image: linear-gradient(90deg, transparent 0, #000 30vw);
  }
}
@media (max-width: 767px) and (max-height: 700px) {
  .dbelt { --top: calc(var(--H) * .58); }
}