:root{
    --brand: #037058;
    --brand-dark: #024A3A;
    --brand-darker: #01382C;
    --brand-tint: #E6F3F0;
    --white: #FFFFFF;
    --ink: #17211D;
    --grey: #5C6B65;
    --line: #DCE7E2;
    --max: 1140px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:"IBM Plex Sans", Arial, sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.55;
  }
  h1,h2,h3,h4{
    font-family:"Archivo", Arial, sans-serif;
    color:var(--brand-darker);
    line-height:1.15;
    margin:0 0 0.5em 0;
  }
  p{margin:0 0 1em 0; max-width:62ch;}
  a{color:var(--brand);}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

  :focus-visible{
    outline: 3px solid var(--brand);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* ---- Header ---- */
  header.site{
    background:var(--white);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10;
  }
  .site-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
  }
  .brand-lockup{
    display:flex;
    align-items:center;
    text-decoration:none;
  }
  .brand-lockup img{
    height:36px;
    width:36px;
    margin-right:12px;
  }
  .brand-lockup span{
    font-family:"Archivo", Arial, sans-serif;
    font-weight:800;
    font-size:1.15rem;
    letter-spacing:0.01em;
    color:var(--brand-darker);
  }
  nav.main{display:flex; align-items:center;}
  nav.main a{
    color:var(--ink);
    text-decoration:none;
    font-size:0.95rem;
    font-weight:500;
    margin-right:28px;
  }
  nav.main a:last-child{margin-right:0;}
  nav.main a:hover{color:var(--brand);}
  .header-actions{display:flex; align-items:center;}
  .header-actions a{margin-left:12px;}
  .header-actions a:first-child{margin-left:0;}
  .btn{
    display:inline-block;
    padding:11px 20px;
    border-radius:4px;
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
  }
  .btn-primary{background:var(--brand); color:#fff;}
  .btn-primary:hover{background:var(--brand-dark);}
  .btn-outline{background:transparent; color:var(--brand-darker); border-color:var(--brand-darker);}
  .btn-outline:hover{background:var(--brand-darker); color:#fff;}
  .btn-outline.on-dark{color:#fff; border-color:#fff;}
  .btn-outline.on-dark:hover{background:#fff; color:var(--brand-darker);}
  .menu-toggle{display:none; background:none; border:none; font-size:1.6rem; color:var(--brand-darker); cursor:pointer;}

  /* ---- Hero ---- */
  .hero{
    background:var(--brand);
    color:#fff;
    padding:72px 0 0 0;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:48px;
    align-items:end;
  }
  .hero h1{
    color:#fff;
    font-size:clamp(2rem, 4vw, 2.9rem);
    max-width:18ch;
  }
  .hero p.lede{
    color:#D9EFE9;
    font-size:1.15rem;
    max-width:46ch;
  }
  .hero-cta{display:flex; flex-wrap:wrap; margin-top:28px;}
  .hero-cta a{margin-right:14px; margin-bottom:14px;}
  .hero-fineprint{margin-top:18px; color:#BFE3D8; font-size:0.9rem;}

  .receipt-mock{
    background:var(--white);
    border-radius:6px 6px 0 0;
    padding:22px 22px 0 22px;
    color:var(--ink);
    border:1px solid var(--line);
    border-bottom:none;
    max-width:380px;
    margin-left:auto;
  }
  .receipt-mock .r-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    border-bottom:2px solid var(--brand);
    padding-bottom:14px;
    margin-bottom:14px;
  }
  .receipt-mock .r-head strong{font-family:"Archivo"; color:var(--brand-darker); font-size:1.05rem;}
  .receipt-mock .r-head span{color:var(--grey); font-size:0.82rem;}
  .receipt-mock .r-status{
    background:var(--brand); color:#fff; font-size:0.78rem; font-weight:600;
    padding:3px 10px; border-radius:3px; align-self:flex-start;
  }
  .receipt-line{
    display:flex; justify-content:space-between;
    padding:9px 0; border-bottom:1px solid var(--line);
    font-size:0.92rem;
  }
  .receipt-line .qty{color:var(--grey); font-size:0.82rem;}
  .receipt-total{
    display:flex; justify-content:space-between;
    padding:14px 0; font-family:"Archivo"; font-weight:700; color:var(--brand-darker);
    font-size:1.05rem;
  }
  .receipt-pay{
    background:var(--brand-tint);
    margin:0 -22px;
    padding:14px 22px;
    font-size:0.85rem;
    color:var(--grey);
    border-top:1px solid var(--line);
  }
  .receipt-pay b{color:var(--brand-darker);}

  /* ---- Platform strip ---- */
  .platform-strip{
    background:var(--brand-darker);
    color:#CFE7DF;
    padding:16px 0;
    font-size:0.9rem;
  }
  .platform-strip .wrap{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  }
  .platform-strip .lead{ margin-right:22px; color:#fff; font-weight:600;}
  .platform-badge{
    display:inline-flex; align-items:center;
    border:1px solid #2E5F51;
    border-radius:20px;
    padding:5px 16px;
    margin:4px 8px;
    font-size:0.85rem;
    color:#EAF6F1;
  }

  /* ---- Section basics ---- */
  section{padding:88px 0;}
  .section-head{max-width:60ch; margin-bottom:48px;}
  .section-head h2{font-size:clamp(1.6rem, 3vw, 2.1rem);}
  .section-head p{color:var(--grey); font-size:1.05rem;}
  .alt-bg{background:var(--brand-tint);}

  /* ---- Capability checklist ---- */
  .checklist{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 48px;
    list-style:none;
    padding:0;
    margin:0;
  }
  .checklist li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:1.02rem;
  }
  .checklist li svg{flex:none; margin-top:3px;}

  /* ---- Alternating feature rows ---- */
  .feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    padding:48px 0;
    border-bottom:1px solid var(--line);
  }
  .feature-row:last-child{border-bottom:none;}
  .feature-row.reverse .feature-copy{order:2;}
  .feature-row.reverse .feature-art{order:1;}
  .feature-copy h3{font-size:1.5rem;}
  .feature-copy p{color:var(--grey);}
  .feature-tag{
    display:inline-block;
    color:var(--brand);
    font-weight:600;
    font-size:0.85rem;
    margin-bottom:10px;
  }
  .feature-art{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    padding:28px;
    min-height:200px;
  }
  .pos-cart{display:flex; flex-direction:column; gap:10px;}
  .pos-cart .item{
    display:flex; justify-content:space-between;
    background:var(--brand-tint); padding:10px 14px; border-radius:4px; font-size:0.92rem;
  }
  .pos-cart .item.total{background:var(--brand); color:#fff; font-family:"Archivo"; font-weight:700;}
  .staff-row{
    display:flex; justify-content:space-between; align-items:center;
    background:var(--brand-tint); padding:10px 14px; border-radius:4px; font-size:0.9rem; margin-bottom:10px;
  }
  .staff-row .role{color:var(--grey); font-size:0.8rem;}

  /* ---- Reports grid ---- */
  .reports-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .report-card{
    background:var(--white);
    border:1px solid var(--line);
    border-top:3px solid var(--brand);
    border-radius:4px;
    padding:24px 20px;
  }
  .report-card h4{font-size:1.02rem; margin-bottom:8px;}
  .report-card p{color:var(--grey); font-size:0.9rem; margin:0;}

  /* ---- Pricing table ---- */
  .price-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px;}
  table.price-table{
    border-collapse:collapse;
    width:100%;
    min-width:860px;
    background:var(--white);
  }
  table.price-table th, table.price-table td{
    padding:14px 18px;
    text-align:center;
    border-bottom:1px solid var(--line);
    font-size:0.92rem;
  }
  table.price-table td:first-child, table.price-table th:first-child{
    text-align:left;
    font-weight:500;
    background:var(--white);
    position:sticky;
    left:0;
    min-width:210px;
  }
  table.price-table thead th{
    background:var(--brand-tint);
    vertical-align:top;
    padding-top:22px;
  }
  table.price-table thead th:first-child{background:var(--white);}
  .plan-name{font-family:"Archivo"; font-weight:700; color:var(--brand-darker); font-size:1.05rem; display:block;}
  .plan-price{display:block; color:var(--grey); font-size:0.88rem; margin:4px 0 12px 0;}
  .plan-price .note{color:#B4772A; font-size:0.72rem; display:block;}
  .plan-featured{background:var(--brand) !important; color:#fff;}
  .plan-featured .plan-name, .plan-featured .plan-price{color:#fff;}
  .check{color:var(--brand); font-weight:700;}
  .dash{color:#B9C4BF;}
  .plan-featured.check{color:#fff;}
  .plan-featured.dash{color:#BFE3D8;}
  td.plan-featured{background:var(--brand);}
  .price-note{color:var(--grey); font-size:0.85rem; margin-top:16px;}

  /* ---- Testimonials ---- */
  .testimonial-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .testimonial{
    background:var(--white);
    border:1px solid var(--line);
    border-left:4px solid var(--brand);
    border-radius:2px;
    padding:28px;
  }
  .testimonial p{font-size:1.02rem; color:var(--ink);}
  .testimonial cite{font-style:normal; color:var(--grey); font-size:0.88rem; display:block; margin-top:12px;}

  /* ---- FAQ ---- */
  .faq-list{border-top:1px solid var(--line);}
  details{border-bottom:1px solid var(--line); padding:18px 0;}
  summary{
    cursor:pointer;
    font-family:"Archivo";
    font-weight:600;
    color:var(--brand-darker);
    font-size:1.05rem;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{
    content:"+";
    font-size:1.4rem;
    color:var(--brand);
    font-weight:400;
  }
  details[open] summary::after{content:"\2013";}
  details p{margin-top:12px; color:var(--grey);}

  /* ---- CTA band ---- */
  .cta-band{
    background:var(--brand-darker);
    color:#fff;
    text-align:left;
  }
  .cta-band-inner{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
  }
  .cta-band h2{color:#fff; font-size:1.7rem; max-width:28ch;}
  .cta-band p{color:#BFE3D8;}

  /* ---- Footer ---- */
  footer.site{
    background:var(--brand-darker);
    color:#BFE3D8;
    padding:64px 0 28px 0;
    font-size:0.92rem;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid #17493B;
  }
  footer.site h4{color:#fff; font-size:0.95rem; margin-bottom:16px;}
  footer.site ul{list-style:none; padding:0; margin:0;}
  footer.site ul li{margin-bottom:10px;}
  footer.site a{color:#BFE3D8; text-decoration:none;}
  footer.site a:hover{color:#fff;}
  .footer-brand-lockup{display:flex; align-items:center; margin-bottom:14px;}
  .footer-brand-lockup img{height:32px; width:32px; margin-right:10px;}
  .footer-brand-lockup span{font-family:"Archivo"; font-weight:800; color:#fff; font-size:1.1rem;}
  .footer-bottom{
    display:flex; justify-content:space-between; padding-top:24px; flex-wrap:wrap; gap:12px;
    font-size:0.85rem; color:#8FBBAC;
  }

  @media (max-width: 860px){
    nav.main, .header-actions .btn-outline{display:none;}
    .menu-toggle{display:block;}
    .hero-grid{grid-template-columns:1fr;}
    .receipt-mock{margin:0 auto;}
    .feature-row, .feature-row.reverse{grid-template-columns:1fr;}
    .feature-row.reverse .feature-copy, .feature-row.reverse .feature-art{order:0;}
    .checklist{grid-template-columns:1fr;}
    .reports-grid{grid-template-columns:1fr 1fr;}
    .testimonial-grid, .footer-grid{grid-template-columns:1fr;}
  }

/* ---- Inner page header (Contact / Privacy / Terms) ---- */
.page-header{
  background:var(--brand);
  color:#fff;
  padding:64px 0;
}
.page-header h1{
  color:#fff;
  font-size:clamp(1.8rem, 3.4vw, 2.4rem);
  max-width:24ch;
}
.page-header p{
  color:#D9EFE9;
  font-size:1.05rem;
  max-width:56ch;
}

/* ---- Legal content ---- */
.legal-content{max-width:74ch;}
.legal-content h2{
  font-size:1.2rem;
  margin-top:2.2em;
}
.legal-content h2:first-child{margin-top:0;}
.legal-content ul{
  padding-left:1.2em;
  color:var(--grey);
  margin:0 0 1em 0;
}
.legal-content li{margin-bottom:6px;}
.legal-content p{color:var(--grey);}
.legal-content .updated-note{
  color:var(--grey);
  font-size:0.85rem;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:2.5em;
}

/* ---- Contact page ---- */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:48px;
  align-items:start;
}
.contact-info-card{
  background:var(--brand-tint);
  border-radius:6px;
  padding:32px;
}
.contact-info-card h3{font-size:1.15rem;}
.contact-method{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid #CFE7DF;
}
.contact-method:last-child{border-bottom:none;}
.contact-method .label{
  display:block;
  font-weight:600;
  color:var(--brand-darker);
  font-size:0.92rem;
}
.contact-method .value{color:var(--grey); font-size:0.92rem;}
.contact-method .value a{color:var(--brand-darker); font-weight:500;}

.contact-form{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:32px;
}
.contact-form label{
  display:block;
  font-weight:600;
  font-size:0.9rem;
  color:var(--brand-darker);
  margin-bottom:6px;
}
.contact-form .field{margin-bottom:20px;}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  font-family:"IBM Plex Sans", Arial, sans-serif;
  font-size:0.95rem;
  color:var(--ink);
  background:var(--white);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--brand);
  outline-offset:1px;
  border-color:var(--brand);
}
.contact-form textarea{resize:vertical; min-height:130px;}
.contact-form .form-note{
  color:var(--grey);
  font-size:0.82rem;
  margin-top:14px;
}

@media (max-width: 860px){
  .contact-grid{grid-template-columns:1fr;}
}