/* ==========================================================================
   Unify POS — sales carousel.

   Deployed to Cloudflare Pages as plain static files. No CDN, no framework, no
   build step at serve time: the markup is generated once by marketing/build.mjs
   and this stylesheet is hand-written. Fonts are the product's own, self-hosted,
   for the same reason the till self-hosts them — nothing external to fail.
   ========================================================================== */

@font-face{font-family:'Lora';src:url('fonts/Lora-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/Lora-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/Lora-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Work Sans';src:url('fonts/WorkSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Work Sans';src:url('fonts/WorkSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Work Sans';src:url('fonts/WorkSans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

:root{
  --bg:#211D1A; --panel:#2B2622; --panel-2:#332D28; --line:#423B34;
  --cream:#FAF7F2; --cream-dim:#C9BFB0; --muted:#948A7C;
  --accent:#C9A15A; --accent-soft:rgba(201,161,90,.14); --accent-line:rgba(201,161,90,.34);
  --ink:#2B2622;
  --body:'Work Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --head:'Lora','IBM Plex Sans Arabic',Georgia,serif;
  --r:14px; --r-lg:20px;
  --pad:clamp(20px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--cream);font-family:var(--body);
  font-size:clamp(15px,.42vw + 13.6px,17px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
svg.icon{width:1em;height:1em;display:block}
a{color:var(--accent);text-underline-offset:3px}

/* ---- chrome ------------------------------------------------------------- */

.bar{
  position:sticky;top:0;z-index:30;background:rgba(33,29,26,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:1240px;margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:16px;
}
.wm{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.wm-mark{
  width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--ink);
  display:grid;place-items:center;flex:none;
}
.wm-mark svg{width:19px;height:19px}
.wm-text{font-family:var(--head);font-weight:700;font-size:20px;color:var(--cream);letter-spacing:-.01em}
.wm-text i{color:var(--accent);font-style:normal;margin-inline-start:3px}
.bar .where{
  margin-inline-start:auto;font-size:13px;color:var(--muted);letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;white-space:nowrap;
}
.bar .call{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:var(--accent);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;
  white-space:nowrap;
}
.bar .call:hover{filter:brightness(1.07)}
@media (max-width:720px){ .bar .where{display:none} }

/* ---- carousel ----------------------------------------------------------- */

.deck{max-width:1240px;margin:0 auto;padding:clamp(18px,3vw,34px) var(--pad) 0}
/* Height is set by app.js to the ACTIVE slide. A flex track is otherwise as tall as
   its tallest child, which left the hero sitting in 400px of void because one
   feature slide happens to be long on a narrow screen. */
.viewport{overflow:hidden;border-radius:var(--r-lg);transition:height .45s cubic-bezier(.22,.72,.24,1)}
.track{display:flex;align-items:flex-start;transition:transform .5s cubic-bezier(.22,.72,.24,1)}
.track.instant{transition:none}
.viewport.instant{transition:none}

.slide{
  flex:0 0 100%;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,3.4vw,48px);
  min-height:clamp(460px,62vh,620px);display:flex;flex-direction:column;
}
/* Off-screen slides must not be reachable by tab or read aloud. */
.slide[aria-hidden="true"]{visibility:hidden}
.track.instant .slide[aria-hidden="true"]{visibility:hidden}

.kicker{
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:14px;
}
.slide h2{
  font-family:var(--head);font-weight:700;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(28px,3.4vw,46px);margin:0 0 14px;
}
.slide h3{font-family:var(--head);font-weight:600;font-size:clamp(19px,1.5vw,23px);margin:0 0 8px;line-height:1.25}
.slide p{margin:0 0 16px;color:var(--cream-dim);max-width:66ch}
.slide p:last-child{margin-bottom:0}
.lede{font-size:clamp(16px,1.1vw,19px)}

/* hero */
.hero-head{font-size:clamp(34px,5.6vw,68px);line-height:1.04}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:auto;padding-top:28px}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat b{display:block;font-family:var(--head);font-size:clamp(24px,2.6vw,34px);color:var(--accent);line-height:1;margin-bottom:8px}
.stat span{font-size:13.5px;color:var(--cream-dim);line-height:1.4}

/* pillar */
.pill-icon{
  width:62px;height:62px;border-radius:18px;background:var(--accent);color:var(--ink);
  display:grid;place-items:center;margin-bottom:24px;flex:none;
}
.pill-icon svg{width:32px;height:32px}
.proof{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  color:var(--accent);font-size:14.5px;line-height:1.55;
}

/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:6px}
.fcard{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px}
.fcard .fi{
  width:38px;height:38px;border-radius:11px;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent);
  display:grid;place-items:center;margin-bottom:12px;
}
.fcard .fi svg{width:20px;height:20px}
.fcard h4{margin:0 0 6px;font-size:15.5px;font-weight:600;line-height:1.3}
.fcard p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

/* vertical slide */
.v-top{display:flex;align-items:flex-start;gap:18px;margin-bottom:18px}
.v-icon{
  width:56px;height:56px;border-radius:16px;background:var(--accent);color:var(--ink);
  display:grid;place-items:center;flex:none;
}
.v-icon svg{width:29px;height:29px}
.v-demo{font-size:14px;color:var(--muted);margin-top:4px}
.v-demo .ar{font-family:'IBM Plex Sans Arabic',var(--body);margin-inline-start:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:5px 12px;border-radius:99px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
}
.v-body{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(18px,2.4vw,34px);align-items:start}
@media (max-width:860px){ .v-body{grid-template-columns:1fr} }
.points{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.points li{position:relative;padding-inline-start:26px;color:var(--cream-dim);font-size:15px;line-height:1.55}
.points li::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--accent);
}
.scenario{
  background:var(--panel-2);border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 22px;
}
.scenario .lbl{
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:10px;
}
.scenario p{margin:0;font-size:15px;color:var(--cream-dim)}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.road div{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.road b{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.road span{font-size:14px;color:var(--muted);line-height:1.5}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px}
/* Direct children only — an unscoped `.contact-grid div` also matched the .k and
   .val inside each card and drew a second box around every line. */
.contact-grid > a,.contact-grid > div{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;text-decoration:none;color:var(--cream);display:block;
}
.contact-grid > a:hover{border-color:var(--accent-line);background:var(--panel)}
.contact-grid .k{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-grid .val{font-family:var(--head);font-size:20px;font-weight:600;color:var(--accent);word-break:break-word}

/* ---- controls ----------------------------------------------------------- */

.controls{
  max-width:1240px;margin:0 auto;padding:18px var(--pad) clamp(28px,5vw,56px);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--cream);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .15s,border-color .15s;
}
.btn:hover:not(:disabled){background:var(--panel-2);border-color:var(--accent-line)}
.btn:disabled{opacity:.34;cursor:default}
.btn svg{width:20px;height:20px}

/* .btn is a grid, which laid the icon and the label out as two ROWS and pushed the
   label out of a 46px pill — the toggle was changing a word nobody could see, which
   is why the button read as broken rather than ugly. A row of two items is a flex
   row, explicitly. */
.btn.play{
  width:auto;height:46px;border-radius:99px;padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;
}
.btn.play svg{width:15px;height:15px;flex:none}
/* "Play" and "Pause" are different widths; without this the button resizes on every
   press and nudges the dots beside it. */
.btn.play span{min-width:3.4em;text-align:start}

/* The state has to be visible in the ICON, not only the word. Both glyphs live in the
   markup and aria-pressed picks one, so there is no JS that can fall out of step. */
.btn.play .ico-pause{display:none}
.btn.play[aria-pressed="true"] .ico-play{display:none}
.btn.play[aria-pressed="true"] .ico-pause{display:inline}

.dots{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:160px}
.dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--line);transition:background .2s,transform .2s;
}
.dots button:hover{background:var(--muted)}
.dots button[aria-current="true"]{background:var(--accent);transform:scale(1.34)}
.count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* trade jump list */
.jump{max-width:1240px;margin:0 auto;padding:0 var(--pad) clamp(30px,6vw,64px)}
.jump h2{
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:0 0 14px;
}
.jump-row{display:flex;flex-wrap:wrap;gap:8px}
.jump-row button{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--cream-dim);
  font:inherit;font-size:14px;cursor:pointer;transition:all .15s;
}
.jump-row button svg{width:17px;height:17px;color:var(--accent)}
.jump-row button:hover{border-color:var(--accent-line);color:var(--cream);background:var(--panel-2)}
.jump-row button[aria-current="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.jump-row button[aria-current="true"] svg{color:var(--ink)}

.foot{
  border-top:1px solid var(--line);padding:26px var(--pad);text-align:center;
  color:var(--muted);font-size:13.5px;
}

/* ---- motion / no-JS ----------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .track{transition:none}
  .btn,.jump-row button,.dots button{transition:none}
}

/* Without JS the track can't move, so show every slide stacked rather than
   trapping the reader on slide one. */
.no-js .track{display:block}
.no-js .viewport{height:auto !important}
.no-js .slide{margin-bottom:16px;visibility:visible !important}
.no-js .controls,.no-js .jump{display:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}