:root{
      --bg:#ffffff; --bg-alt:#f7f8fa;
      --ink:#15161a; --muted:#5b5e68; --faint:#767b8a;
      --wine:#7a2440; --wine-soft:#f6eef0;
      --line:#ebedf1;
      --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:var(--sans); color:var(--ink); line-height:1.6;
      background:var(--bg);
      -webkit-font-smoothing:antialiased; overflow-x:hidden;
    }
    .wrap{max-width:1140px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:1}
    a{color:inherit; text-decoration:none}

    /* ---------- buttons ---------- */
    .btn{
      display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans);
      font-weight:600; font-size:.98rem; padding:.8rem 1.4rem; border-radius:10px;
      border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease, background .2s, border-color .2s, color .2s;
    }
    .btn-primary{background:var(--ink); color:#fff; box-shadow:0 8px 20px -12px rgba(20,22,30,.6)}
    .btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 24px -12px rgba(20,22,30,.7)}
    .btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
    .btn-ghost:hover{border-color:var(--wine); color:var(--wine)}
    .btn-wine{background:var(--wine); color:#fff; box-shadow:0 8px 20px -12px rgba(122,36,64,.7)}
    .btn-wine:hover{transform:translateY(-1px); box-shadow:0 12px 24px -12px rgba(122,36,64,.8)}
    .btn:focus-visible{outline:3px solid var(--wine); outline-offset:3px}
    nav.links a.nl:focus-visible, footer a:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-radius:4px}

    /* ---------- top bar ---------- */
    header.bar{position:sticky; top:0; z-index:20;
      background:var(--bg); border-bottom:1px solid var(--line)}
    .bar .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:1rem; padding-bottom:1rem}
    .word{font-family:var(--sans); font-weight:800; font-size:clamp(1.5rem, 3.2vw, 2rem); letter-spacing:-.02em; display:flex; align-items:center; gap:.5rem}
    .word .dot{color:var(--wine)}
    .word .logo-mark{height:1.7em; width:auto; vertical-align:-.4em; margin-right:.2em}
    nav.links{display:flex; align-items:center; gap:1.8rem}
    nav.links a.nl{font-weight:500; font-size:.95rem; color:var(--muted); transition:color .2s}
    nav.links a.nl:hover{color:var(--wine)}
    .bar-cta{display:flex; align-items:center; gap:.7rem}
    @media(max-width:780px){ nav.links a.nl{display:none} }
    @media(max-width:560px){ .bar-cta .btn-ghost{display:none} .bar .btn{padding:.6rem 1.05rem; font-size:.9rem} }

    /* ---------- hero ---------- */
    .hero{padding:5.5rem 0 4rem}
    .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}
    @media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:2.5rem} }
    .eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.78rem;
      letter-spacing:.16em; text-transform:uppercase; color:var(--wine);
      background:var(--wine-soft); padding:.45rem .9rem; border-radius:8px; border:1px solid #efdde1}
    h1.head{font-family:var(--sans); font-weight:800; font-size:clamp(2.6rem,6vw,4.4rem);
      line-height:1.03; letter-spacing:-.035em; margin:1.3rem 0 1.1rem; color:var(--ink)}
    h1.head em{font-style:normal; color:var(--wine)}
    .sub{font-size:1.18rem; color:var(--muted); max-width:34ch; margin-bottom:2rem}
    .hero-cta{display:flex; gap:.9rem; flex-wrap:wrap; align-items:center}
    .micro{margin-top:1.1rem; font-size:.88rem; color:var(--faint)}

    /* hero visual: tilted checkout card echoing the real receipt */
    .stage{position:relative; margin-right:1.5rem}
    @media(max-width:900px){ .stage{margin:0 auto; max-width:430px} }
    .flight-board{background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.6rem 1.3rem;
      box-shadow:0 20px 48px -30px rgba(20,22,30,.45)}
    .fb-head{display:flex; justify-content:space-between; align-items:baseline}
    .fb-head strong{font-family:var(--sans); font-weight:700; font-size:1.3rem}
    .fb-head .tag{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
      color:var(--wine); background:var(--wine-soft); padding:.2rem .55rem; border-radius:999px}
    .fb-sub{color:var(--muted); font-size:.82rem; margin:.15rem 0 1.1rem}
    .flight-row{display:flex; justify-content:space-between; gap:.25rem; align-items:end}
    .glass{display:flex; flex-direction:column; align-items:center; gap:.45rem}
    .glass svg{width:44px; height:auto; filter:drop-shadow(0 9px 9px rgba(20,22,30,.12))}
    .glass .num{width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
      font-weight:700; font-size:.72rem; color:var(--wine); background:var(--wine-soft)}
    .fb-note{margin-top:1.1rem; padding-top:.85rem; border-top:1px dashed var(--line);
      font-family:var(--sans); color:var(--muted); font-size:.95rem}
    .chip{position:absolute; background:#fff; border:1px solid var(--line); color:var(--ink);
      box-shadow:0 16px 36px -20px rgba(20,22,30,.4); border-radius:13px; padding:.7rem .95rem;
      font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:.5rem; z-index:2}
    .chip .em{font-size:1.1rem}
    .chip-1{top:-1.1rem; left:-1.3rem}
    .chip-2{bottom:-.6rem; right:-.75rem}
    @media(max-width:600px){ .chip-1,.chip-2{display:none} }

    /* ---------- marquee strip ---------- */
    .strip{border-block:1px solid var(--line); background:var(--bg-alt); padding:1.1rem 0; margin-top:1rem}
    .strip .wrap{display:flex; gap:2.4rem; flex-wrap:wrap; justify-content:center; align-items:center;
      font-family:var(--sans); color:var(--muted); font-size:1.02rem}
    .strip b{font-weight:600; color:var(--wine)}

    /* ---------- sections ---------- */
    section{padding:4.5rem 0; position:relative; z-index:1}
    .sec-head{text-align:center; max-width:42ch; margin:0 auto 3rem}
    .sec-head .eyebrow{margin-bottom:1rem}
    h2{font-family:var(--sans); font-weight:800; font-size:clamp(2rem,4vw,2.9rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink)}
    .sec-head p{color:var(--muted); margin-top:.8rem; font-size:1.08rem}

    /* ---------- differentiator comparison ---------- */
    #differentiator{background:var(--bg-alt); border-block:1px solid var(--line)}
    #differentiator .sec-head{max-width:62ch}
    #differentiator .sec-head h2 em{font-style:normal; color:var(--wine)}
    .diff-wrap{padding:0 0 .5rem}
    .diff-table{width:100%; border-collapse:separate; border-spacing:0;
      table-layout:fixed; background:#fff; border:1px solid var(--line); border-radius:16px;
      overflow:hidden; font-family:var(--sans); font-size:.95rem; line-height:1.55; color:var(--ink);
      box-shadow:0 26px 52px -28px rgba(20,22,30,.5)}
    .diff-table .dc-cap{width:23%} .diff-table .dc-no{width:37%} .diff-table .dc-yes{width:40%}
    .diff-table col.dc-cap{background:var(--bg-alt)}
    .diff-table col.dc-yes{background:var(--wine-soft)}
    .diff-table th,.diff-table td{padding:1.05rem 1.25rem; text-align:left; vertical-align:top;
      border-top:1px solid var(--line)}
    /* header */
    .diff-table thead th{border-top:none; border-bottom:2px solid var(--line);
      font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      color:var(--muted); background:var(--bg-alt)}
    .diff-table thead .dh-win{color:var(--wine)}
    /* row label = capability */
    .diff-table tbody th{font-weight:700; color:var(--ink); background:var(--bg-alt)}
    /* generic column de-emphasized; SipsPOS column carries the wine tint via <col> */
    .diff-table td.d-no{color:var(--muted)}
    .diff-table tbody tr:hover td.d-no{background:rgba(20,22,30,.015)}
    .diff-table tbody tr:hover td.d-yes{background:rgba(122,36,64,.05)}
    /* check / x marks */
    .diff-table .d-mark{display:inline-flex; align-items:center; justify-content:center;
      vertical-align:-3px; margin-right:.5rem; flex:none}
    .diff-table .d-x{color:var(--faint)} .diff-table .d-c{color:var(--wine)}
    /* stack into cards on narrow screens */
    @media(max-width:640px){
      .diff-wrap{overflow:visible}
      .diff-table{min-width:0; border:none; background:transparent; box-shadow:none}
      .diff-table colgroup,.diff-table thead{display:none}
      .diff-table,.diff-table tbody,.diff-table tr,.diff-table th,.diff-table td{display:block; width:auto}
      .diff-table tr{border:1px solid var(--line); border-radius:13px; overflow:hidden;
        margin-bottom:.9rem; background:#fff; box-shadow:0 10px 30px -26px rgba(20,22,30,.45)}
      .diff-table tbody th{background:var(--bg-alt); border-top:none; font-size:1.02rem}
      .diff-table td{border-top:1px solid var(--line)}
      .diff-table td.d-yes{background:var(--wine-soft)}
      .diff-table td::before{content:attr(data-label); display:block; font-size:.68rem; font-weight:700;
        letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem}
    }

    #features{background:var(--bg-alt)}
    .spotlight{display:flex; align-items:center; gap:1.4rem; background:#fff;
      border:1px solid var(--wine); border-radius:16px; padding:1.5rem 1.8rem; margin-bottom:2.8rem;
      box-shadow:0 24px 50px -34px rgba(122,36,64,.45)}
    .spotlight .spot-ic{flex:none; width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
      background:var(--wine); color:#fff}
    .spotlight .spot-tag{display:inline-block; font-family:var(--sans); font-size:.62rem; font-weight:700;
      letter-spacing:.1em; text-transform:uppercase; color:var(--wine); background:var(--wine-soft);
      border:1px solid #efdde1; border-radius:999px; padding:.16rem .55rem; margin-bottom:.4rem}
    .spotlight h3{font-family:var(--sans); font-weight:800; font-size:1.3rem; letter-spacing:-.015em;
      color:var(--ink); margin:0 0 .25rem}
    .spotlight p{color:var(--muted); font-size:.96rem; line-height:1.55; margin:0; max-width:66ch}
    @media(max-width:560px){ .spotlight{flex-direction:column; text-align:center; align-items:center} }
    .feat-group{margin-bottom:2.6rem}
    .feat-group:last-child{margin-bottom:0}
    .feat-group > h3{font-family:var(--sans); font-weight:800; font-size:1.12rem; letter-spacing:-.01em;
      color:var(--ink); margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem}
    .feat-group > h3::after{content:""; flex:1; height:1px; background:var(--line)}
    .features{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
    @media(max-width:860px){ .features{grid-template-columns:1fr 1fr} }
    @media(max-width:560px){ .features{grid-template-columns:1fr} }
    .feat{background:#fff; border:1px solid var(--line); border-radius:12px;
      padding:1.2rem 1.25rem; box-shadow:0 16px 38px -30px rgba(20,22,30,.4);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
    .feat:hover{transform:translateY(-4px); box-shadow:0 20px 38px -26px rgba(20,22,30,.4); border-color:var(--wine)}
    .feat .ic{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-size:1.15rem;
      background:var(--wine-soft); color:var(--wine); margin-bottom:.7rem}
    .feat h4{font-family:var(--sans); font-weight:700; font-size:1.05rem; margin-bottom:.3rem}
    .feat p{color:var(--muted); font-size:.88rem; line-height:1.5}
    .feat .plan-tag{display:inline-block; margin-top:.5rem; font-family:var(--sans);
      font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      color:var(--wine); background:var(--wine-soft); border:1px solid #efdde1;
      border-radius:999px; padding:.16rem .55rem}

    /* ---------- trust / security page ---------- */
    .trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:920px; margin:0 auto}
    @media(max-width:760px){ .trust-grid{grid-template-columns:1fr} }
    .trust-card{background:#fff; border:1px solid var(--line); border-radius:12px;
      padding:1.4rem 1.5rem; box-shadow:0 16px 38px -30px rgba(20,22,30,.4)}
    .trust-card .ic{width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
      font-size:1.15rem; background:var(--wine-soft); color:var(--wine); margin-bottom:.8rem}
    .trust-card h3{font-family:var(--sans); font-weight:700; font-size:1.12rem; letter-spacing:-.01em;
      color:var(--ink); margin:0 0 .55rem}
    .trust-card ul{margin:0; padding-left:1.1rem; line-height:1.55}
    .trust-card li{color:var(--muted); font-size:.92rem; margin-bottom:.4rem}
    .trust-card li:last-child{margin-bottom:0}
    .trust-card p{color:var(--muted); font-size:.92rem; line-height:1.55; margin:0}
    .trust-card a{color:var(--wine); font-weight:600}
    .trust-card.wide{grid-column:1 / -1}

    /* ---------- status page ---------- */
    .status-banner{display:flex; align-items:center; justify-content:center; gap:.7rem; max-width:640px;
      margin:0 auto 1.4rem; border-radius:12px; padding:1.05rem 1.4rem; font-size:1.08rem; font-weight:600}
    .status-banner.ok{background:#e9f5ec; color:#1f7a3d}
    .status-banner.bad{background:#fbeaea; color:#a32d2d}
    .status-card{max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--line);
      border-radius:12px; padding:.3rem 1.4rem; box-shadow:0 16px 38px -30px rgba(20,22,30,.4)}
    .status-row{display:flex; align-items:center; gap:.7rem; padding:.85rem .1rem; border-bottom:1px solid var(--line)}
    .status-row:last-child{border-bottom:0}
    .status-row .nm{font-weight:600; color:var(--ink)}
    .status-row .dt{margin-left:auto; color:var(--muted); font-size:.9rem}
    .status-dot{width:11px; height:11px; border-radius:50%; flex:none}
    .status-dot.ok{background:#2faa5a} .status-dot.bad{background:#d23b3b} .status-dot.info{background:var(--wine)}
    .status-note{max-width:640px; margin:1.2rem auto 0; color:var(--faint); font-size:.9rem; text-align:center; line-height:1.55}
    .status-note a{color:var(--wine); font-weight:600}
    .status-note code{font-size:.88em; background:var(--bg-alt); padding:.1rem .35rem; border-radius:5px}

    /* ---------- product screenshots ---------- */
    .shot{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
      box-shadow:0 30px 60px -30px rgba(20,22,30,.45)}
    .shot .chrome{display:flex; align-items:center; gap:.45rem; padding:.6rem .8rem;
      background:#f3f1f4; border-bottom:1px solid var(--line)}
    .shot .chrome span{width:10px; height:10px; border-radius:50%; background:#d4d0d6; flex:none}
    .shot img{display:block; width:100%; height:auto}
    .zz{display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:center; margin-bottom:3.4rem}
    .zz:last-child{margin-bottom:0}
    .zz .zz-text{order:1} .zz .zz-shot{order:2}
    .zz.flip .zz-text{order:2} .zz.flip .zz-shot{order:1}
    .zz-text h3{font-family:var(--sans); font-weight:800; font-size:1.55rem; letter-spacing:-.02em;
      color:var(--ink); margin:.2rem 0 .6rem}
    .zz-text p{color:var(--muted); font-size:1.02rem; line-height:1.6; margin:0 0 1.1rem; max-width:42ch}
    @media(max-width:780px){ .zz{grid-template-columns:1fr; gap:1.4rem; margin-bottom:2.4rem}
      .zz .zz-text, .zz.flip .zz-text, .zz .zz-shot, .zz.flip .zz-shot{order:0} }

    /* ---------- pricing ---------- */
    .pricing{background:var(--bg)}
    .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; max-width:860px; margin:0 auto}
    @media(max-width:720px){ .plans{grid-template-columns:1fr; max-width:420px} }
    .plan{background:#fff; border:1px solid var(--line); border-radius:16px; padding:2rem 1.8rem;
      display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s}
    .plan:hover{transform:translateY(-5px); box-shadow:0 30px 56px -32px rgba(20,22,30,.4)}
    .plan.feature{background:#fff; border:2px solid var(--wine);
      box-shadow:0 30px 60px -34px rgba(122,36,64,.45)}
    .plan .badge{align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      color:#fff; background:var(--wine); padding:.3rem .7rem; border-radius:999px; margin-bottom:.9rem}
    .plan h3{font-family:var(--sans); font-weight:700; font-size:1.5rem; margin-bottom:.15rem}
    .plan-blurb{font-size:.86rem; color:var(--muted); margin:0 0 .5rem}
    .plan .price{font-family:var(--sans); font-size:2.4rem; font-weight:600; margin:.3rem 0 .1rem; letter-spacing:-.01em; color:var(--wine)}
    .plan .price .per{font-family:var(--sans); font-size:.95rem; font-weight:500; color:var(--muted)}
    .price-annual{font-size:.84rem; color:var(--muted); margin-bottom:1.2rem}
    .pfeat{list-style:none; margin:0 0 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
    .pfeat li{display:flex; gap:.55rem; font-size:.95rem; color:var(--muted); align-items:flex-start}
    .pfeat li .ic{color:var(--wine); flex:none; margin-top:.2rem}
    .plan .btn{justify-content:center; width:100%}
    .pricing .note{text-align:center; color:var(--muted); margin-top:1.8rem; font-size:.95rem}

    /* ---------- closing cta ---------- */
    .closer{text-align:center}
    .closer .box{background:var(--ink); color:#fff;
      border-radius:24px; padding:3.6rem 2rem; box-shadow:0 30px 60px -34px rgba(20,22,30,.5); position:relative; overflow:hidden}
    .closer h2{color:#fff} .closer h2 em{font-style:normal}
    .closer p{color:rgba(255,255,255,.8); margin:.9rem auto 1.8rem; max-width:46ch}

    /* ---------- footer ---------- */
    footer{border-top:1px solid var(--line); padding:2.5rem 0; margin-top:3rem}
    footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
      color:var(--muted); font-size:.9rem}
    footer .word{font-size:1.15rem}
    footer a:hover{color:var(--wine)}
    .foot-brand{display:flex; flex-direction:column; gap:.15rem}
    .foot-tag{font-family:var(--sans); color:var(--muted); font-size:1rem}

    /* ---------- entrance motion ---------- */
    .rise{opacity:0; transform:translateY(22px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
    @keyframes rise{to{opacity:1; transform:none}}
    .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
    .d4{animation-delay:.35s}.d5{animation-delay:.45s}
    @media(prefers-reduced-motion:reduce){ .rise{animation:none; opacity:1; transform:none} html{scroll-behavior:auto} }