@font-face { font-family: "Euclid Circular A"; src: url("/fonts/euclid/euclid_circular_a_regular-webfont.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Euclid Circular A"; src: url("/fonts/euclid/euclid_circular_a_semibold-webfont.woff2") format("woff2"); font-weight: 700; }

:root { --pp-ink:#0b1830; --pp-muted:#66758b; --pp-navy:#081d3a; --pp-line:#dbe5f1; --pp-pale:#f5f8fd; --pp-mint:#39d2a1; --pp-accent:#1263d6; --pp-tint:#e8f0fd; --pp-dark:#0b3f86; }
html[data-product="shop"] { --pp-accent:#168d83; --pp-tint:#e2f4f3; --pp-dark:#0e5a54; }
html[data-product="pos"] { --pp-accent:#d24e85; --pp-tint:#fcebf2; --pp-dark:#9c2f5e; }
html[data-product="cashier"] { --pp-accent:#5e35b1; --pp-tint:#ede7f9; --pp-dark:#402479; }
html[data-product="order-flow"] { --pp-accent:#e64a19; --pp-tint:#fdeae3; --pp-dark:#a83210; }
html[data-product="qr"] { --pp-accent:#c2610f; --pp-tint:#fbeada; --pp-dark:#8a4409; }
html[data-product="staff"] { --pp-accent:#1f9d66; --pp-tint:#e3f6ee; --pp-dark:#146b46; }
html[data-product="deep-insight"] { --pp-accent:#c2185b; --pp-tint:#fbe4ec; --pp-dark:#8a0f3f; }
html[data-product="merge"] { --pp-accent:#7659d8; --pp-tint:#ede9fb; --pp-dark:#4f37a3; }
html[data-product="ledger"] { --pp-accent:#00897b; --pp-tint:#dcf1ef; --pp-dark:#005c52; }
html[data-product="places"] { --pp-accent:#d77a19; --pp-tint:#fdf0e2; --pp-dark:#a15c10; }

* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--pp-ink); background:#fff; font-family:"Euclid Circular A",Arial,sans-serif; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin-top:0; } .pp-container { width:min(1180px,calc(100% - 48px)); margin:auto; }

/* ─── Header ─────────────────────────────────────────────────────────── */
.pp-header { position:sticky; top:0; z-index:20; width:100%; border-bottom:1px solid rgba(219,229,241,.8); background:rgba(255,255,255,.85); backdrop-filter:blur(18px); transition:box-shadow .3s ease; }
.pp-header.is-scrolled { box-shadow:0 8px 24px rgba(10,40,90,.08); }
.pp-nav { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:32px; }
.pp-brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.06em; color:var(--pp-ink); }
.pp-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:#fff; background:linear-gradient(145deg,var(--pp-accent),var(--pp-dark)); font-size:14px; box-shadow:0 5px 12px rgba(10,20,40,.22); }
.pp-links { display:flex; gap:29px; margin-left:auto; color:#52637c; font-size:13px; font-weight:700; }
.pp-links a { transition:color .2s; }
.pp-links a:hover { color:var(--pp-accent); }
.pp-actions { display:flex; align-items:center; gap:17px; color:#3c4e68; font-size:13px; font-weight:700; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.pp-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; overflow:hidden; border:1px solid transparent; border-radius:13px; font:700 14px inherit; transition:transform .2s,box-shadow .2s,background .2s,filter .2s; }
.pp-btn:hover { transform:translateY(-2px); }
.pp-btn:before { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .55s ease; }
.pp-btn:hover:before { left:130%; }
.pp-btn--solid { color:#fff; background:var(--pp-accent); box-shadow:0 12px 24px rgba(10,30,60,.22); }
.pp-btn--solid:hover { filter:brightness(.92); box-shadow:0 17px 30px rgba(10,30,60,.28); }
.pp-btn--ghost { color:var(--pp-ink); border-color:#d8e2ee; background:#fff; }
.pp-btn--ghost:hover { border-color:#9ec2ee; }
.pp-btn--small { min-height:40px; padding:0 15px; font-size:13px; }

/* ─── Hero ───────────────────────────────────────────────────────────── */
.pp-hero { position:relative; overflow:hidden; min-height:640px; padding:94px 0 77px; background:radial-gradient(circle at 78% 30%,var(--pp-tint) 0,transparent 44%),linear-gradient(180deg,#fff,#f6faff); }
.pp-hero:before { content:""; position:absolute; top:-200px; right:-115px; width:570px; height:570px; border:1px solid var(--pp-tint); border-radius:50%; animation:pp-breathe 9s ease-in-out infinite; }
.pp-hero:after { content:""; position:absolute; bottom:-150px; left:8%; width:420px; height:240px; border-radius:50%; background:var(--pp-tint); filter:blur(75px); animation:pp-breathe 11s ease-in-out infinite 1.5s; }
@keyframes pp-breathe { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.07); opacity:.72; } }
@media(prefers-reduced-motion:reduce) { .pp-hero:before,.pp-hero:after { animation:none; } }
.pp-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:.94fr 1.06fr; gap:60px; align-items:center; }
.pp-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:19px; color:var(--pp-dark); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.pp-eyebrow:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--pp-mint); box-shadow:0 0 0 4px rgba(57,210,161,.15); }
.pp-hero h1 { max-width:600px; margin-bottom:23px; font-size:clamp(42px,4.6vw,62px); line-height:1; letter-spacing:-.065em; color:var(--pp-ink); }
.pp-lede { max-width:520px; color:var(--pp-muted); font-size:17px; line-height:1.65; }
.pp-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.pp-proof { display:flex; gap:28px; margin-top:43px; padding-top:22px; border-top:1px solid #dce7f4; flex-wrap:wrap; }
.pp-proof strong,.pp-proof span { display:block; }
.pp-proof strong { font-size:14px; letter-spacing:-.02em; color:var(--pp-ink); }
.pp-proof span { margin-top:4px; color:#73839a; font-size:11px; }
.pp-inline-tag { display:inline-block; margin-top:16px; padding:5px 12px; border-radius:20px; background:var(--pp-tint); color:var(--pp-dark); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }

/* ─── Phone mockup (reused hero visual) ─────────────────────────────── */
.pp-phone-wrap { position:relative; display:grid; place-items:center; min-height:530px; }
.pp-phone { position:relative; width:280px; padding:9px; border:8px solid var(--pp-dark); border-radius:39px; background:#092348; box-shadow:0 30px 70px rgba(2,14,33,.4); transform:rotate(4deg); }
.pp-phone:before { content:""; position:absolute; z-index:3; top:9px; left:50%; width:87px; height:20px; border-radius:0 0 12px 12px; background:var(--pp-dark); transform:translateX(-50%); }
.pp-phone-screen { min-height:500px; padding:34px 15px 16px; border-radius:25px; background:linear-gradient(160deg,#fff,var(--pp-tint)); color:var(--pp-ink); }
.pp-phone-screen small { color:#6d819a; font-size:9px; }
.pp-phone-screen h3 { margin:4px 0 16px; font-size:20px; letter-spacing:-.05em; }
.pp-phone-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pp-phone-stats div { padding:11px; border-radius:10px; background:#fff; box-shadow:0 5px 12px rgba(20,50,90,.08); }
.pp-phone-stats small,.pp-phone-stats b { display:block; }
.pp-phone-stats b { margin-top:5px; font-size:17px; letter-spacing:-.05em; color:var(--pp-ink); }
.pp-phone-stats div:last-child b { color:var(--pp-accent); }
.pp-alert-head { margin:19px 0 8px; font-size:10px; font-weight:800; color:var(--pp-muted); }
.pp-alert { display:flex; gap:9px; align-items:center; padding:10px; margin-top:7px; border-radius:10px; background:#fff; box-shadow:0 5px 13px rgba(20,50,90,.08); }
.pp-alert i { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:var(--pp-accent); background:var(--pp-tint); font-style:normal; font-size:12px; }
.pp-alert b,.pp-alert span { display:block; }
.pp-alert b { font-size:9px; color:var(--pp-ink); }
.pp-alert span { margin-top:2px; color:#72849a; font-size:8px; }
.pp-phone-float { position:absolute; top:56px; right:-10px; padding:11px 13px; border:1px solid #c5daf2; border-radius:12px; color:var(--pp-dark); background:#fff; box-shadow:0 15px 35px rgba(2,29,61,.29); font-size:10px; font-weight:700; transform:rotate(-5deg); }
.pp-phone-float:before { content:"●"; margin-right:7px; color:var(--pp-mint); }
.pp-qr-chip { position:absolute; left:0; bottom:36px; width:96px; height:96px; padding:10px; border-radius:18px; background:#fff; border:1px solid var(--pp-tint); box-shadow:0 15px 35px rgba(10,40,90,.18); display:grid; place-items:center; transform:rotate(-8deg); }
.pp-qr-chip b { display:block; width:100%; height:100%; background:repeating-linear-gradient(90deg,var(--pp-dark) 0 6px,transparent 6px 9px),repeating-linear-gradient(var(--pp-dark) 0 6px,transparent 6px 9px); }

/* ─── Trust strip ────────────────────────────────────────────────────── */
.pp-trust { padding:34px 0; background:#fff; border-top:1px solid var(--pp-line); border-bottom:1px solid var(--pp-line); }
.pp-trust-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--pp-muted); font-size:13px; flex-wrap:wrap; }
.pp-trust-inner p { margin:0; color:var(--pp-ink); font-weight:700; }
.pp-trust-list { display:flex; gap:22px; flex-wrap:wrap; }
.pp-trust-list span { display:flex; align-items:center; gap:8px; }
.pp-trust-list i { width:6px; height:6px; border-radius:50%; background:var(--pp-mint); flex-shrink:0; }

/* ─── Sections ───────────────────────────────────────────────────────── */
.pp-section { padding:108px 0; }
.pp-section--pale { background:var(--pp-pale); }
.pp-label { margin-bottom:15px; color:var(--pp-dark); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.pp-section h2 { max-width:670px; margin-bottom:18px; font-size:clamp(32px,3.6vw,46px); line-height:1.05; letter-spacing:-.055em; color:var(--pp-ink); }
.pp-intro { max-width:590px; color:var(--pp-muted); font-size:16px; line-height:1.65; }
.pp-section-head { text-align:center; max-width:640px; margin:0 auto 50px; }
.pp-section-head h2 { margin-left:auto; margin-right:auto; }
.pp-section-head .pp-intro { margin:14px auto 0; }

/* ─── Feature grid ───────────────────────────────────────────────────── */
.pp-feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pp-feature { padding:26px; border:1px solid #e0e8f2; border-radius:16px; background:#fff; transition:transform .25s,box-shadow .25s; }
.pp-feature:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(10,40,90,.08); }
.pp-feature-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:18px; border-radius:12px; color:var(--pp-accent); background:var(--pp-tint); font-size:18px; }
.pp-feature h3 { margin-bottom:8px; font-size:16px; letter-spacing:-.03em; color:var(--pp-ink); }
.pp-feature p { margin:0; color:#718198; font-size:13px; line-height:1.6; }

/* ─── Workflow steps ─────────────────────────────────────────────────── */
.pp-journey { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin-top:50px; }
.pp-journey:before { content:""; position:absolute; top:26px; right:11%; left:11%; height:1px; background:#bdd3ee; }
.pp-step { position:relative; }
.pp-step b { display:grid; place-items:center; width:53px; height:53px; margin-bottom:21px; border:1px solid #a8c9ee; border-radius:17px; color:var(--pp-accent); background:#fff; box-shadow:0 6px 13px rgba(20,60,120,.09); font-size:15px; }
.pp-step h3 { margin-bottom:8px; font-size:17px; letter-spacing:-.035em; color:var(--pp-ink); }
.pp-step p { max-width:235px; margin:0; color:#708096; font-size:13px; line-height:1.6; }

/* ─── Cross-sell band ────────────────────────────────────────────────── */
.pp-cross { position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg,#071b37,var(--pp-dark)); }
.pp-cross:before { content:""; position:absolute; right:-150px; bottom:-230px; width:700px; height:700px; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.pp-cross-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.pp-cross .pp-label { color:#9fc4ff; }
.pp-cross h2 { color:#fff; max-width:480px; }
.pp-cross .pp-intro { color:#aec5e1; }
.pp-cross-points { display:grid; gap:16px; margin-top:28px; }
.pp-cross-points div { display:flex; gap:13px; align-items:flex-start; }
.pp-cross-points i { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:8px; color:#6ce4bc; background:rgba(255,255,255,.08); font-style:normal; }
.pp-cross-points b,.pp-cross-points span { display:block; }
.pp-cross-points b { font-size:14px; }
.pp-cross-points span { margin-top:4px; color:#a9c1dd; font-size:13px; line-height:1.5; }
.pp-cross-card { position:relative; z-index:1; padding:32px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.pp-cross-card .pp-label { margin-bottom:10px; }
.pp-cross-card h3 { margin-bottom:10px; font-size:22px; color:#fff; letter-spacing:-.03em; }
.pp-cross-card p { margin:0; color:#b7cce6; font-size:14px; line-height:1.6; }
.pp-cross-card a { display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:#fff; font-weight:800; font-size:13px; }
.pp-cross-card a:hover { color:#9fc4ff; }

/* ─── Download / CTA band ────────────────────────────────────────────── */
.pp-download { padding:0 0 100px; background:linear-gradient(#fff 50%,var(--pp-pale) 50%); }
.pp-download-card { position:relative; overflow:hidden; padding:60px 57px; border-radius:25px; color:#fff; background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.12) 0,transparent 25%),linear-gradient(130deg,#071a37,var(--pp-dark)); box-shadow:0 25px 60px rgba(10,40,90,.25); text-align:center; }
.pp-download-card > *:first-child { max-width:640px; margin:0 auto; }
.pp-download-card .pp-label { color:#9fc4ff; }
.pp-download-card h2 { margin-bottom:13px; font-size:40px; }
.pp-download-card p { margin:0 auto; max-width:560px; color:#b7cce6; font-size:15px; line-height:1.55; }
.pp-store-row { position:relative; z-index:1; display:flex; justify-content:center; gap:14px; margin-top:38px; flex-wrap:wrap; }
.pp-store-btn { display:flex; align-items:center; gap:10px; padding:11px 20px; border-radius:13px; background:#fff; color:#0b1830; transition:transform .2s,box-shadow .2s,outline-color .2s; outline:2px solid transparent; outline-offset:2px; }
.pp-store-btn:hover { transform:translateY(-3px); box-shadow:0 16px 30px rgba(2,10,25,.25); }
.pp-store-btn.is-recommended { outline-color:#fff; }
.pp-store-btn svg { width:26px; height:26px; flex-shrink:0; }
.pp-store-btn span { display:block; text-align:left; line-height:1.25; }
.pp-store-btn small { display:block; font-size:9px; color:#66758b; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pp-store-btn b { display:block; font-size:15px; letter-spacing:-.02em; }
.pp-download-note { position:relative; z-index:1; display:block; margin-top:26px; color:#8ca9cc; font-size:11px; }
.pp-cta-solo { position:relative; z-index:1; margin-top:36px; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.pp-footer { padding:40px 0 28px; background:var(--pp-pale); }
.pp-footer-inner { display:flex; justify-content:space-between; gap:20px; color:#718096; font-size:12px; flex-wrap:wrap; }
.pp-footer a { color:#506985; font-weight:700; }

/* ─── Reveal-on-scroll utility ───────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:900px) {
  .pp-links { display:none; }
  .pp-hero-grid,.pp-cross-grid { grid-template-columns:1fr; }
  .pp-hero-copy { text-align:center; }
  .pp-hero h1,.pp-lede { margin-left:auto; margin-right:auto; }
  .pp-hero-actions,.pp-proof { justify-content:center; }
  .pp-feature-grid { grid-template-columns:1fr 1fr; }
  .pp-journey { grid-template-columns:1fr 1fr; row-gap:34px; }
  .pp-journey:before { display:none; }
  .pp-cross-copy { text-align:center; }
  .pp-cross-points { width:min(500px,100%); margin:0 auto; text-align:left; }
  .pp-phone-wrap { order:-1; }
  .pp-trust-inner { flex-direction:column; text-align:center; }
}
@media(max-width:620px) {
  .pp-container { width:min(100% - 30px,1180px); }
  .pp-nav { min-height:65px; }
  .pp-actions-login { display:none; }
  .pp-hero { min-height:auto; padding:65px 0 58px; }
  .pp-hero h1 { font-size:38px; }
  .pp-feature-grid { grid-template-columns:1fr; }
  .pp-section { padding:72px 0; }
  .pp-download-card { padding:38px 22px; }
  .pp-download-card h2 { font-size:30px; }
  .pp-store-row { flex-direction:column; align-items:center; }
  .pp-footer-inner { display:block; }
  .pp-footer-inner span { display:block; margin-bottom:13px; }
}

.wx-logo-mark { display:block; width:62%; height:62%; color:#fff; }

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — neutral scale from theme-vars.css. Per-product accent
   colors (teal, pink, violet, etc.) are kept — none of them are blue —
   only the neutral surfaces (backgrounds, borders, body text) switch.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --pp-ink:var(--dark-text); --pp-muted:var(--dark-muted); --pp-line:var(--dark-border); --pp-pale:var(--dark-1);
}
html[data-theme="dark"] body { background:var(--dark-0); }
html[data-theme="dark"] .pp-header { background:rgba(10,10,11,.85); border-bottom-color:var(--dark-border-soft); }
html[data-theme="dark"] .pp-header.is-scrolled { box-shadow:0 8px 24px rgba(0,0,0,.4); }
html[data-theme="dark"] .pp-links { color:var(--dark-muted); }
html[data-theme="dark"] .pp-actions { color:var(--dark-muted); }
html[data-theme="dark"] .pp-btn--ghost { background:var(--dark-2); border-color:var(--dark-border); }
html[data-theme="dark"] .pp-btn--ghost:hover { border-color:var(--dark-border-strong); background:var(--dark-3); }
html[data-theme="dark"] .pp-hero { background:radial-gradient(circle at 78% 30%,var(--dark-1) 0,transparent 44%),linear-gradient(180deg,var(--dark-0),var(--dark-1)); }
html[data-theme="dark"] .pp-hero:before { border-color:var(--dark-border); }
html[data-theme="dark"] .pp-hero:after { background:var(--dark-2); }
html[data-theme="dark"] .pp-proof { border-top-color:var(--dark-border); }
html[data-theme="dark"] .pp-proof span { color:var(--dark-faint); }
html[data-theme="dark"] .pp-inline-tag { background:var(--dark-2); color:var(--pp-accent); }
html[data-theme="dark"] .pp-phone { border-color:var(--pp-dark); background:var(--dark-0); }
html[data-theme="dark"] .pp-phone:before { background:var(--pp-dark); }
html[data-theme="dark"] .pp-phone-screen { background:linear-gradient(160deg,var(--dark-2),var(--dark-1)); color:var(--dark-text); }
html[data-theme="dark"] .pp-phone-screen small { color:var(--dark-muted); }
html[data-theme="dark"] .pp-phone-stats div { background:var(--dark-3); box-shadow:none; }
html[data-theme="dark"] .pp-phone-stats b { color:var(--dark-text); }
html[data-theme="dark"] .pp-alert-head { color:var(--dark-muted); }
html[data-theme="dark"] .pp-alert { background:var(--dark-3); box-shadow:none; }
html[data-theme="dark"] .pp-alert b { color:var(--dark-text); }
html[data-theme="dark"] .pp-alert span { color:var(--dark-muted); }
html[data-theme="dark"] .pp-phone-float { background:var(--dark-2); border-color:var(--dark-border); color:var(--dark-text); }
html[data-theme="dark"] .pp-qr-chip { background:var(--dark-2); border-color:var(--dark-border); }
html[data-theme="dark"] .pp-trust { background:var(--dark-0); border-top-color:var(--dark-border-soft); border-bottom-color:var(--dark-border-soft); }
html[data-theme="dark"] .pp-trust-inner p { color:var(--dark-text); }
html[data-theme="dark"] .pp-trust-inner { color:var(--dark-muted); }
html[data-theme="dark"] .pp-section--pale { background:var(--dark-1); }
html[data-theme="dark"] .pp-feature { background:var(--dark-2); border-color:var(--dark-border); }
html[data-theme="dark"] .pp-feature:hover { box-shadow:0 20px 40px rgba(0,0,0,.35); }
html[data-theme="dark"] .pp-feature h3 { color:var(--dark-text); }
html[data-theme="dark"] .pp-feature p { color:var(--dark-muted); }
html[data-theme="dark"] .pp-journey:before { background:var(--dark-border); }
html[data-theme="dark"] .pp-step b { background:var(--dark-2); border-color:var(--dark-border); }
html[data-theme="dark"] .pp-step h3 { color:var(--dark-text); }
html[data-theme="dark"] .pp-step p { color:var(--dark-muted); }
html[data-theme="dark"] .pp-cross { background:linear-gradient(135deg,var(--dark-0),var(--pp-dark)); }
html[data-theme="dark"] .pp-cross-card { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] .pp-download-card { background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.08) 0,transparent 25%),linear-gradient(130deg,var(--dark-0),var(--pp-dark)); }
html[data-theme="dark"] .pp-footer { background:var(--dark-1); }
html[data-theme="dark"] .pp-footer a { color:var(--dark-muted); }