/* Vendor & PO: visuals that show the work. The real artefacts firms used
   before (a spreadsheet, chats, a call, a challan, an invoice), one item drawn
   through all six documents, and the same item as product screens after.
   Loaded only by that page, which carries .is-paper on <html>. */
.is-paper {
  --fm: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ink: #23201a;
  --ink-2: rgba(35, 32, 26, .62);
  --rule: rgba(35, 32, 26, .16);
  --paper: #f2eee4;
  --red: #c4432c;
  --coral: #ff9b80;
}

/* paper, for the artefacts that really were paper */
.paper { position: relative; color: var(--ink); background: var(--paper); border-radius: 3px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7), 0 10px 20px -14px rgba(0, 0, 0, .45); }

/* ---------- small product screens: white, the product's own type and chips ---------- */
.uic { overflow: hidden; border-radius: 12px; font-size: 13px; line-height: 1.35; color: #333; background: #fff; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7), 0 10px 20px -14px rgba(0, 0, 0, .45); }
.uic-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #ebedf0; font-size: 12px; color: #717789; }
.uic-h b { font-weight: 600; color: #333; }
.uic-b { display: grid; gap: 8px; padding: 12px 14px 14px; }
.uic-r { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.uic-r span:last-child { color: #717789; white-space: nowrap; }
.uic-r.is-on { background: #ebf6ff; box-shadow: inset 2px 0 0 #0084ef; }
.uic-r.is-sub { margin-left: 14px; padding: 5px 9px; font-size: 12.5px; }
.uic-k { font-size: 11px; color: #8a90a0; }
.uic-n { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.uic-n.is-ok { color: #1f8a57; }
.uic-d { font-size: 12px; color: #d32f2f; }
.uic-m { height: 6px; border-radius: 3px; background: #eceef2; }
.uic-m i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--c, #1f8a57); }
.uic .chip { justify-self: start; padding: 4px 10px 4px 8px; font-size: 11.5px; }
.uic-w { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35; color: #8a4a00; background: #fff6ea; }
.uic-w i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; font-style: normal; color: #fff; background: #e08a00; }

/* ---------- one item, six documents ---------- */
.anat { --g: clamp(18px, 2.2vw, 36px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8vh var(--g); padding: clamp(26px, 3.6vw, 64px); border-radius: clamp(14px, 1.8vw, 30px); background: var(--tile-bg); }
.an { position: relative; display: flex; flex-direction: column; }
.an-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 42px; margin-bottom: 14px; }
.an-k b { font-family: var(--fh); font-size: clamp(24px, 2vw, 34px); font-weight: 400; letter-spacing: -.03em; color: var(--pfg); }
.an-k span { font-size: 12.5px; color: color-mix(in srgb, var(--pfg) 58%, transparent); }
.an-d { margin-top: 14px; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--pfg) 70%, transparent); }
/* arrows between documents, at the height of the screens */
.an.is-to::after { content: ''; position: absolute; top: 100px; left: calc(100% + 4px); width: calc(var(--g) - 8px); height: 1px; background: color-mix(in srgb, var(--acc) 75%, transparent); }
.an.is-to::before { content: ''; position: absolute; top: 97px; left: calc(100% + var(--g) - 9px); border: 3.5px solid transparent; border-left: 5px solid color-mix(in srgb, var(--acc) 75%, transparent); }
.an.is-nt { grid-column: 4; }
.an.is-nt::before { content: ''; position: absolute; left: 50%; top: calc(-8vh + 6px); height: calc(8vh - 12px); width: 1px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--acc) 75%, transparent) 0 4px, transparent 4px 8px); }

/* ---------- the desk: what buying looked like before, as the things themselves ---------- */
.desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7vh clamp(24px, 3.4vw, 60px); padding: clamp(28px, 4.4vw, 76px); border-radius: clamp(14px, 1.8vw, 30px); background: var(--tile-bg); }
.art { position: relative; }
.art-k { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: color-mix(in srgb, var(--pfg) 62%, transparent); }
.art-k em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 600; color: var(--pc); background: color-mix(in srgb, var(--pfg) 80%, transparent); }
.art-p { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.45; color: #ffd3c4; }
.art-p i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10.5px; font-weight: 600; font-style: normal; color: #2a1712; background: var(--coral); }
.art-p + .art-p { margin-top: 8px; }
.art-n { margin-top: 16px; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--pfg) 62%, transparent); }
/* a spreadsheet */
.a-sheet { overflow: hidden; font: 11px/1.3 var(--fm); }
.a-sheet p { padding: 9px 12px; font-weight: 600; color: #fff; background: #1f6b43; }
.a-sheet table { width: 100%; border-collapse: collapse; }
.a-sheet td { padding: 7px 10px; border: 1px solid var(--rule); }
.a-sheet tr:first-child td { font-weight: 600; color: var(--ink-2); background: rgba(35, 32, 26, .05); }
.a-sheet td:last-child { text-align: right; }
/* chat */
.a-chat { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: #0b141a; }
.bub { max-width: 88%; padding: 8px 11px 6px; border-radius: 10px 10px 10px 3px; font-size: 13.5px; line-height: 1.35; color: #e9edef; background: #202c33; }
.bub small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: #53bdeb; }
.bub time { display: block; margin-top: 3px; font-size: 10px; text-align: right; color: rgba(233, 237, 239, .5); }
.bub.is-me { justify-self: end; border-radius: 10px 10px 3px 10px; background: #005c4b; }
/* a phone call */
.a-call { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 18px; border-radius: 18px; color: #fff; background: #1c1c1e; }
.a-call > i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; background: #30d158; }
.a-call b { font-weight: 600; }
.a-call span { font-size: 13px; color: rgba(255, 255, 255, .55); }
.a-call q { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: rgba(255, 255, 255, .8); }
/* a carbon-copy challan and an invoice */
.a-doc { padding: 16px 18px 18px; font: 11.5px/1.5 var(--fm); }
.a-doc h4 { display: flex; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.a-doc p { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.a-doc.is-carbon { color: #2a3f8f; background: #e9edf6; }
.a-doc.is-carbon h4 { border-color: #2a3f8f; }
.a-doc .ring { position: relative; }
.a-doc .ring::after { content: ''; position: absolute; inset: -5px -9px; border: 2px solid var(--red); border-radius: 50%; }

/* ---------- pain points against what was designed, as one table ---------- */
.ledger { border-top: 1px solid color-mix(in srgb, var(--pfg) 40%, transparent); }
.ledger-h, .ledger-r { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr) 120px; column-gap: clamp(18px, 2.4vw, 40px); }
.ledger-h { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--pfg) 20%, transparent); font-size: 12.5px; color: color-mix(in srgb, var(--pfg) 58%, transparent); }
.ledger-r { padding: 24px 0; border-bottom: 1px solid color-mix(in srgb, var(--pfg) 12%, transparent); }
.ledger-r > :first-child { font-size: 13px; color: color-mix(in srgb, var(--pfg) 50%, transparent); font-variant-numeric: tabular-nums; }
.lg-dr { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.3; letter-spacing: -.01em; color: color-mix(in srgb, var(--pfg) 60%, transparent); }
.lg-cr { font-size: 16px; line-height: 1.5; }
.lg-ref { font-size: 12.5px; text-align: right; color: var(--acc); }

/* ---------- after: the same item as product screens ---------- */
.trail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); padding: clamp(26px, 3.6vw, 64px); border-radius: clamp(14px, 1.8vw, 30px); background: var(--tile-bg); }
.tr-s { display: flex; flex-direction: column; }
.tr-s .uic { min-height: 172px; }
.tr-s > h3 { margin-top: 20px; font-size: 16px; }
.tr-s > p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--pfg) 66%, transparent); }
.tr-s .ref { margin-top: 10px; font-size: 12px; color: var(--acc); }

@media (max-width: 1100px) {
  .anat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an.is-to::after, .an.is-to::before, .an.is-nt::before { display: none; }
  .an.is-nt { grid-column: auto; }
  .desk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6vh; }
}
@media (max-width: 760px) {
  .anat, .trail, .desk { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .ledger-h { display: none; }
  .ledger-r { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; }
  .ledger-r > :first-child { grid-row: span 3; }
  .lg-dr, .lg-cr, .lg-ref { grid-column: 2; }
  .lg-ref { text-align: left; }
}