/* Pos — situs. Satu berkas gaya, tanpa framework, seperti aplikasinya. */
:root{
  --canvas:#f4f3ef; --layer:#fff; --layer2:#faf9f6;
  --fg:#1d1b17; --fg2:#57534e; --fg3:#8a847c; --fg4:#b5afa6;
  --line:#e8e4dd; --line2:#d9d4cb;
  --accent:#1d6b5a; --accent-tint:#e6f1ed; --on-accent:#fff;
  --warn:#b45309; --warn-bg:#fdf3e6; --good:#15803d; --good-bg:#e8f5ec;
  --r:14px; --r2:20px;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--canvas); color:var(--fg); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--accent)}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.narrow{max-width:780px}

/* ---------- bar ---------- */
.bar{position:sticky; top:0; z-index:20; background:rgba(244,243,239,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.bar .wrap{display:flex; align-items:center; gap:18px; height:62px}
.logo{font-weight:800; font-size:19px; letter-spacing:-.02em; text-decoration:none; color:var(--fg)}
.logo span{color:var(--accent)}
.bar nav{display:flex; gap:18px; margin-left:auto; align-items:center}
.bar nav a{color:var(--fg2); text-decoration:none; font-size:14.5px; font-weight:600}
.bar nav a:hover{color:var(--fg)}
@media(max-width:720px){.bar nav a.hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px;
  padding:0 20px; border-radius:12px; border:1px solid var(--line2); background:var(--layer);
  color:var(--fg); font:inherit; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer}
.btn:hover{border-color:var(--fg4)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{background:#17584a}
.btn.big{min-height:54px; font-size:16.5px; padding:0 26px}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px; text-align:center}
.hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.08; letter-spacing:-.03em; margin:0 0 18px; text-wrap:balance}
.hero p.lead{font-size:clamp(17px,2.1vw,21px); color:var(--fg2); max-width:640px; margin:0 auto 28px; text-wrap:balance}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.note{font-size:13.5px; color:var(--fg3)}
.hero .note{margin-top:16px}
.shot{margin:44px auto 0; max-width:1000px; border-radius:var(--r2); overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(29,27,23,.35)}

/* ---------- sections ---------- */
section{padding:60px 0}
section.alt{background:var(--layer); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2{font-size:clamp(25px,3.4vw,36px); letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance}
h2 + p.sub{color:var(--fg2); font-size:17px; margin:0 0 32px; max-width:680px}
h3{font-size:19px; letter-spacing:-.01em; margin:0 0 6px}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--layer); border:1px solid var(--line); border-radius:var(--r2); padding:24px}
.card p{margin:0; color:var(--fg2); font-size:15px}
.card .ic{font-size:22px; margin-bottom:10px; display:block}

/* ---------- surfaces ---------- */
.surface{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:56px}
.surface:nth-child(even) .txt{order:2}
.surface img{border-radius:var(--r); border:1px solid var(--line); box-shadow:0 20px 40px -24px rgba(29,27,23,.4)}
.surface .phoneshot{max-width:290px; margin:0 auto}
.surface ul{margin:14px 0 0; padding-left:18px; color:var(--fg2); font-size:15px}
.surface ul li{margin-bottom:5px}
@media(max-width:820px){.surface{grid-template-columns:1fr; gap:24px} .surface:nth-child(even) .txt{order:0}}

/* ---------- demo picker ---------- */
.picks{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.pick{display:block; background:var(--layer); border:1px solid var(--line); border-radius:var(--r2);
  padding:24px; text-decoration:none; color:inherit; transition:border-color .12s, transform .12s}
.pick:hover{border-color:var(--accent); transform:translateY(-2px)}
.pick .ic{font-size:28px; display:block; margin-bottom:12px}
.pick h3{margin-bottom:4px}
.pick p{margin:0 0 14px; color:var(--fg2); font-size:14.5px}
.pick .tags{display:flex; flex-wrap:wrap; gap:6px}
.pick .tag{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--layer2); border:1px solid var(--line); color:var(--fg2)}
.pick .go{margin-top:14px; font-weight:700; color:var(--accent); font-size:14.5px}

/* ---------- facts ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; margin-top:8px}
.fact{background:var(--layer); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.fact b{display:block; font-size:28px; letter-spacing:-.02em; line-height:1.1}
.fact span{font-size:13px; color:var(--fg3)}

/* ---------- table ---------- */
table.t{width:100%; border-collapse:collapse; font-size:15px; background:var(--layer);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
table.t th{text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg3); padding:12px 16px; border-bottom:1px solid var(--line); font-weight:800}
table.t td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t td:first-child{font-weight:700; white-space:nowrap}
.scroll-x{overflow-x:auto}

/* ---------- foot ---------- */
footer{padding:44px 0 56px; border-top:1px solid var(--line); color:var(--fg3); font-size:14px}
footer .wrap{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
footer a{color:var(--fg2); text-decoration:none; font-weight:600}
footer a:hover{color:var(--fg)}
footer .grow{flex:1}

/* ---------- demo page ---------- */
.demobar{position:sticky; top:0; z-index:20; background:var(--layer); border-bottom:1px solid var(--line)}
.demobar .wrap{display:flex; align-items:center; gap:10px; min-height:62px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.demobar .back{color:var(--fg2); text-decoration:none; font-weight:700; font-size:14.5px; margin-right:4px}
.demobar .who{font-weight:800; letter-spacing:-.01em}
.demobar .who small{display:block; font-size:12px; font-weight:500; color:var(--fg3); letter-spacing:0}
.screens{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.screens button{min-height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--line2);
  background:var(--layer2); font:inherit; font-weight:700; font-size:13.5px; color:var(--fg2); cursor:pointer}
.screens button:hover{border-color:var(--fg4)}
.screens button.on{background:var(--fg); border-color:var(--fg); color:var(--canvas)}
.screens button .dv{font-size:11px; opacity:.65; margin-left:5px; font-weight:600}

.stage{padding:28px 20px 60px; display:flex; flex-direction:column; align-items:center; gap:16px;
  background:linear-gradient(180deg,var(--canvas),#eceae4)}
.hint{font-size:13.5px; color:var(--fg3); text-align:center; max-width:560px}
.hint b{color:var(--fg2)}

/* device frames */
.pad{position:relative; background:#1c1c1e; border-radius:34px; padding:14px; box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.pad .screen{background:#fff; border-radius:20px; overflow:hidden; position:relative}
.hp{position:relative; background:#1c1c1e; border-radius:44px; padding:11px; box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.hp .screen{background:#fff; border-radius:34px; overflow:hidden; position:relative}
.hp .notch{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:110px; height:26px;
  background:#1c1c1e; border-radius:0 0 16px 16px; z-index:2}
.screen iframe{display:block; border:0; width:100%; height:100%}
.loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--layer2); color:var(--fg3); font-size:14px; z-index:1}
.loading.done{display:none}

/* ---------- device frames around the still shots ----------
   A screenshot floating on a page does not say what it is looked at on. The
   till is a tablet standing on a counter; the waiter's screen is a phone in
   one hand. Drawing each shot inside its own device says that without a
   caption, and it is the same bezel the live demo uses. */
.dev{position:relative; background:#1c1c1e; border-radius:26px; padding:10px;
  box-shadow:0 30px 60px -30px rgba(29,27,23,.55); margin:0 auto; width:100%}
.dev img{display:block; width:100%; border-radius:16px}
.dev.hp{border-radius:32px; padding:8px; max-width:280px}
.dev.hp img{border-radius:25px}
.dev.hp::before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:31%; aspect-ratio:125/34; background:#1c1c1e; border-radius:0 0 11px 11px; z-index:2}

/* a tablet and a phone standing next to each other, sharing a baseline */
.devrow{display:flex; gap:16px; align-items:flex-end; justify-content:center; flex-wrap:wrap}
.devrow .dev.pad{flex:1 1 300px; min-width:0}
.devrow .dev.hp{flex:0 0 150px; max-width:150px}
.devrow .dev.hp::before{border-radius:0 0 7px 7px; top:5px}
.devrow .dev.hp{padding:5px; border-radius:20px}
.devrow .dev.hp img{border-radius:15px}

/* every device at once */
.fleet{display:flex; flex-wrap:wrap; gap:26px 20px; align-items:flex-start; justify-content:center; margin-top:8px}
/* the figure is as wide as its device, never as wide as its caption — a long
   caption left to set the width pushed the third phone onto a row of its own */
.fleet figure.w-pad{width:246px} .fleet figure.w-hp{width:126px}
.fleet figure.w-pad, .fleet figure.w-hp{max-width:100%}
.fleet .dev{width:100%}
.fleet figure{margin:0; display:flex; flex-direction:column; align-items:center}
.fleet .dev.pad{width:246px; border-radius:18px; padding:7px}
.fleet .dev.pad img{border-radius:13px}
.fleet .dev.hp{width:126px; padding:5px; border-radius:18px}
.fleet .dev.hp img{border-radius:13px}
.fleet .dev.hp::before{border-radius:0 0 6px 6px; top:5px}
.fleet figcaption{margin-top:10px; font-size:13px; font-weight:700; text-align:center}
.fleet figcaption span{display:block; font-size:11.5px; font-weight:600; color:var(--fg3)}
@media(max-width:520px){.fleet figure.w-pad{width:100%} .fleet figure.w-hp{width:100px} .fleet{gap:22px 12px}}

.fleetlabel{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg3); margin:34px 0 14px; text-align:center}
.devstack{display:flex; flex-direction:column; gap:16px}

/* ---------- the offer ---------- */
.pill{display:inline-flex; align-items:center; gap:7px; margin:0 0 18px; padding:7px 15px;
  border-radius:999px; background:var(--good-bg); border:1px solid #cfe6d7;
  color:var(--good); font-size:13.5px; font-weight:800; letter-spacing:-.01em}
.pill::before{content:""; width:7px; height:7px; border-radius:999px; background:var(--good)}
.plainlist{list-style:none; margin:0 auto 26px; padding:0; max-width:560px; text-align:left;
  display:grid; gap:9px}
.plainlist li{position:relative; padding-left:26px; color:var(--fg2); font-size:15px}
.plainlist li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--good); font-weight:800}
.after{max-width:620px; margin:0 auto 26px; padding:16px 20px; border-radius:var(--r);
  background:var(--layer2); border:1px solid var(--line); color:var(--fg2); font-size:14.5px; text-align:left}
.after b{color:var(--fg)}