/* Product: Zoho POS - page-specific design. Accent sampled from the icon (#216cb4).
   Mechanic is a live in-store/online inventory sync: clicking "sell at register" decrements a
   shared stock count shown on both store cards - deliberately NOT a regional-coverage checker
   even though POS shares Payroll's regional-availability story, so the mechanic stays about the
   product's real differentiator (shared inventory) rather than duplicating Payroll's shape. The
   regional gap itself is stated in the copy (hero, need, FAQ) instead.

   All classes scoped to .pos-page, prefixed pos-. */

.pos-page { --pos: #216cb4; --pos-d: #175086; --pos-l: #eaf2fa; }

.pos-page .ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff;
  margin-block-end: 18px;
}
.pos-page .ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

/* -------------------------------------------------------------------------- sync -- */
.pos-sync { padding: clamp(48px, 7vw, 84px) 0; }
.pos-sync h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 0 12px; }
.pos-sync .lede { max-width: 82ch; margin: 0 0 26px; }

.pos-stores { display: flex; align-items: center; gap: 16px; max-width: 560px; flex-wrap: wrap; }
.pos-store { flex: 1; min-width: 200px; padding: 16px; background: var(--pos-l); border-radius: 14px; }
.pos-store-h { margin: 0 0 10px; font-size: .82rem; font-weight: 800; color: var(--pos-d); }
.pos-item { padding: 10px 12px; background: var(--white); border-radius: 8px; font-size: .86rem; font-weight: 600; color: var(--ink); margin-block-end: 12px; }
.pos-sell { font-size: .84rem; }
.pos-stock { margin: 0; font-size: .86rem; color: var(--ink); }
.pos-stock strong { font-size: 1.2rem; color: var(--pos-d); transition: transform .2s ease; }
.pos-stock strong.is-pulse { animation: posPulse .35s ease; }
@keyframes posPulse { 0% { transform: scale(1.35); color: #a91315; } 100% { transform: scale(1); } }

.pos-arrow { flex: none; width: 28px; height: 2px; background: var(--pos); position: relative; }
.pos-arrow::after { content: ""; position: absolute; inset-inline-end: -1px; top: -4px; border: 5px solid transparent; border-inline-start-color: var(--pos); }
@media (max-width: 560px) { .pos-arrow { width: 2px; height: 20px; align-self: center; } .pos-arrow::after { inset-inline-end: -4px; top: unset; bottom: -1px; border-inline-start-color: transparent; border-top-color: var(--pos); } }

.pos-log { margin: 16px 0 0; font-size: .88rem; font-weight: 600; color: var(--pos-d); min-height: 22px; }

/* ------------------------------------------------------------------------ need -- */
.pos-need {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--pos-l);
  border-block: 1px solid color-mix(in srgb, var(--pos) 18%, var(--line));
}
.pos-need h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 12px; }
.pos-need .lede { max-width: 82ch; margin: 0; }

/* ------------------------------------------------------------------------- caps -- */
.pos-caps { padding: clamp(48px, 7vw, 84px) 0; }
.pos-caps h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
.pos-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.pos-cap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.pos-cap b { display: block; margin-block-end: 6px; font-size: 1.02rem; color: var(--pos-d); }
.pos-cap p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ------------------------------------------------------------------------- move -- */
.pos-move { padding: clamp(48px, 7vw, 84px) 0; }
.pos-move h2 { font-size: 1.35rem; margin: 0 0 10px; }
.pos-move h3 { font-size: 1.08rem; }