/* NTmart POS — shared styles for index / features / pricing / hardware */
:root {
    --paper: #FAF9F3;
    --paper-alt: #EFEEE1;
    --line: #DDD9C8;
    --ink: #17231D;
    --muted: #6E7168;
    --forest: #16332A;
    --forest-line: #2A4A3C;
    --forest-text: #E9EDE6;
    --emerald: #1F6E52;
    --emerald-dark: #16543D;
    --coral: #E2572B;
    --coral-dark: #C2461F;
    --radius: 10px;
    --serif: 'Fraunces', serif;
    --sans: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
  h1, h2, h3 { font-family: var(--serif); margin: 0; }
  .eyebrow {
    font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--coral); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  }
  .eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--coral); display: inline-block; }
  :focus-visible { outline: 2.5px solid var(--coral); outline-offset: 3px; }

  /* ---------- Nav ---------- */
  nav {
    position: sticky; top: 0; z-index: 40; background: rgba(250,249,243,0.9); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand img { width: 32px; height: 32px; border-radius: 8px; }
  .brand span { font-family: var(--serif); font-weight: 600; font-size: 18px; }
  .nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
  .nav-links a:not(.btn) { text-decoration: none; opacity: 0.75; }
  .nav-links a:not(.btn):hover { opacity: 1; }
  .btn {
    font-family: var(--sans); font-weight: 600; font-size: 14.5px; border-radius: 100px;
    padding: 12px 22px; border: none; cursor: pointer; text-decoration: none; display: inline-block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-coral { background: var(--coral); color: #fff; box-shadow: 0 10px 24px -10px rgba(226,87,43,0.55); }
  .btn-coral:hover { background: var(--coral-dark); }
  .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
  .btn-ghost-dark { background: transparent; color: var(--forest-text); border: 1.5px solid var(--forest-line); }
  .btn-ghost-dark:hover { border-color: var(--forest-text); }
  .btn-whatsapp { background: var(--emerald); color: #fff; box-shadow: 0 10px 24px -10px rgba(31,110,82,0.55); }
  .btn-whatsapp:hover { background: var(--emerald-dark); }
  .btn-whatsapp svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; fill: currentColor; }
  .qr-generator-link { display: inline-flex; align-items: center; gap: 6px; }
  .qr-generator-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
  .nav-cta { display: none; }
  @media (min-width: 760px) { .nav-cta { display: inline-block; } }

  /* ---------- Mobile nav toggle ---------- */
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 8px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; flex-direction: column; gap: 4px;
  }
  .nav-toggle span { width: 18px; height: 2px; background: var(--ink); display: block; transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  @media (min-width: 760px) { .nav-toggle { display: none; } }
  @media (max-width: 759px) {
    .nav-links {
      position: fixed; top: 65px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line);
      flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 28px 18px;
      transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
      transition: transform 0.18s ease, opacity 0.18s ease, visibility 0s linear 0.18s;
    }
    .nav-links.open {
      transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible;
      transition: transform 0.18s ease, opacity 0.18s ease, visibility 0s;
    }
    .nav-links a:not(.btn) { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
    .nav-links .btn { margin-top: 14px; }
  }
  .nav-links a.active-link:not(.btn) { opacity: 1; color: var(--emerald); }

  /* ---------- Hero ---------- */
  .hero { padding: 0 0 40px; background-color: var(--paper); }
  /* The photo runs at full strength with nothing over it — no scrim, no text on top.
     It's cropped to the desk itself (the empty wall above and shelf below are trimmed)
     so the band stays short enough to keep the headline and CTAs near the top. */
  /* No aspect-ratio here on purpose: it would override the intrinsic ratio and squash
     the narrower phone crop. The width/height attributes reserve the space instead. */
  .hero-photo { display: block; width: 100%; height: auto; }
  .hero > .wrap { padding-top: 58px; }
  @media (max-width: 760px) { .hero > .wrap { padding-top: 34px; } }
  .hero .wrap { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { max-width: 700px; }
  .hero h1 { font-size: clamp(36px, 5.4vw, 58px); line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; }
  .hero h1 em { font-style: italic; color: var(--emerald); font-weight: 500; }
  .hero p.lede { font-family: var(--sans); font-size: 18.5px; color: #48493F; max-width: 52ch; margin: 22px 0 32px; }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-note { margin-top: 20px; font-size: 13.5px; color: var(--muted); }

  /* Interactive screenshot showcase */
  .shot-wrap { margin-top: 46px; }
  .showcase-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
  .showcase-tab {
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--muted);
    background: #fff; border: 1.5px solid var(--line); border-radius: 100px; padding: 9px 18px;
    cursor: pointer; transition: all 0.15s ease;
  }
  .showcase-tab:hover { color: var(--ink); border-color: var(--ink); }
  .showcase-tab.active { background: var(--forest); border-color: var(--forest); color: var(--forest-text); }
  .showcase-frame {
    border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -36px rgba(23,35,29,0.4);
    border: 1px solid var(--line); background: #0c1512; position: relative;
  }
  .showcase-frame img { width: 100%; display: block; }
  .showcase-panel { display: none; }
  .showcase-panel.active { display: block; animation: fadeShot 0.25s ease; }
  @keyframes fadeShot { from { opacity: 0; } to { opacity: 1; } }
  .showcase-caption { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

  /* Theme toggle demo (Hidden Gems) */
  .theme-demo { margin-top: 14px; }
  .theme-demo img { border-radius: 8px; border: 1px solid var(--line); display: none; }
  .theme-demo img.active { display: block; }
  .theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; padding: 3px; margin-top: 12px; }
  .theme-switch button {
    font-family: var(--sans); font-size: 12px; font-weight: 700; border: none; background: transparent;
    padding: 6px 14px; border-radius: 100px; cursor: pointer; color: var(--muted);
  }
  .theme-switch button.active { background: var(--forest); color: var(--forest-text); }

  /* ---------- Sections ---------- */
  section { padding: 96px 0; }
  .section-head { max-width: 640px; margin-bottom: 50px; }
  .section-head h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 600; line-height: 1.15; }
  .section-head p { font-size: 16.5px; color: #48493F; margin-top: 16px; }

  /* Problem strip */
  .problem { background: var(--forest); color: var(--forest-text); }
  .problem .wrap { display: grid; grid-template-columns: 1fr; gap: 40px; }
  @media (min-width: 860px) { .problem .wrap { grid-template-columns: repeat(3, 1fr); } }
  .problem h2 { color: var(--forest-text); font-size: clamp(26px, 3.2vw, 32px); max-width: 20ch; font-weight: 600; }
  .problem-col p { font-size: 15px; color: #C3CDC5; margin-top: 10px; }
  .problem-col .tag { font-family: var(--sans); font-size: 12px; color: #7FBFA0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

  /* Features */
  .features-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 700px) { .features-grid { grid-template-columns: 1fr 1fr; } }
  .feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
  .feature-card .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-alt); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; }
  .feature-card h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin: 0 0 6px; }
  .feature-card p { font-size: 14.5px; color: #524A40; margin: 0; }

  /* Pricing */
  .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
  @media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
  @media (min-width: 980px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }
  .price-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; position: relative; }
  .price-card.featured { border: 2px solid var(--emerald); box-shadow: 0 24px 50px -20px rgba(31,110,82,0.28); transform: translateY(-8px); }
  @media (max-width: 979px) { .price-card.featured { transform: none; } }
  .price-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--emerald); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    padding: 5px 14px; border-radius: 100px; text-transform: uppercase; white-space: nowrap;
  }
  .price-tier-name { font-family: var(--serif); font-size: 19px; font-weight: 600; }
  .price-amount { font-size: 28px; font-weight: 700; margin: 10px 0 2px; font-family: var(--sans); }
  .price-amount span { font-size: 13px; font-weight: 500; color: var(--muted); }
  .price-note { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
  .price-line { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; padding: 6px 0; }
  .price-line .check { color: var(--emerald); font-weight: 700; }
  .price-line.dim { color: #BEBAAA; }
  .price-line.dim .check { color: #D8D4C4; }
  .price-cta { display: block; text-align: center; margin-top: 18px; }
  .pricing-note { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 40px; max-width: 56ch; margin-left: auto; margin-right: auto; }
  .station-note {
    background: var(--paper-alt); border: 1px solid var(--line); border-radius: 12px;
    padding: 18px 22px; margin-top: 30px; font-size: 14px; color: #48493F;
  }
  .station-note strong { color: var(--ink); }

  /* Capability table */
  .cap-table-wrap { margin-top: 56px; overflow-x: auto; }
  table.cap-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
  table.cap-table th, table.cap-table td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--line); }
  table.cap-table th:first-child, table.cap-table td:first-child { text-align: left; }
  table.cap-table thead th {
    background: var(--forest); color: var(--forest-text); font-family: var(--sans); font-weight: 600;
    font-size: 12.5px; letter-spacing: 0.02em;
  }
  table.cap-table thead th:first-child { border-top-left-radius: 8px; }
  table.cap-table thead th:last-child { border-top-right-radius: 8px; }
  table.cap-table tbody tr:nth-child(even) { background: var(--paper-alt); }
  table.cap-table .yes { color: var(--emerald); font-weight: 700; }
  table.cap-table .no { color: #D8D4C4; }
  table.cap-table .row-label { font-weight: 500; }
  .cap-caption { font-size: 12.5px; color: var(--muted); margin-top: 14px; max-width: 70ch; }

  /* Hidden gems */
  /* Remote access */
  .remote { background: var(--paper-alt); }
  .remote .features-grid > .feature-card:last-child { grid-column: 1 / -1; }
  .remote-note {
    margin-top: 26px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--emerald);
    border-radius: var(--radius); padding: 16px 20px; font-size: 14.5px; color: #524A40;
  }
  .remote-note strong { color: var(--ink); font-weight: 700; }

  /* Hardware we supply */
  .hardware-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 700px) { .hardware-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
  .hardware-card {
    margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
  }
  .hardware-shot { background: #fff; padding: 18px; }
  .hardware-shot img {
    display: block; width: 100%; height: 230px; object-fit: contain; mix-blend-mode: multiply;
  }
  .hardware-card figcaption { padding: 0 26px 26px; }
  .hardware-card h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin: 0 0 6px; }
  .hardware-card p { font-size: 14.5px; color: #524A40; margin: 0; }
  .hardware-note {
    margin-top: 26px; font-size: 14.5px; color: var(--muted);
    border-top: 1px solid var(--line); padding-top: 20px;
  }

  .gems { background: var(--paper-alt); }
  .gems-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 700px) { .gems-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .gems-grid { grid-template-columns: repeat(3, 1fr); } }
  .gem-card {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 20px 22px; border-left: 3px solid var(--emerald);
  }
  .gem-card.coral { border-left-color: var(--coral); }
  .gem-card h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
  .gem-card p { font-size: 13.5px; color: #524A40; margin: 0; }

  /* Kenya-fit */
  .kenya { background: var(--paper-alt); }
  .kenya-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
  @media (min-width: 760px) { .kenya-grid { grid-template-columns: repeat(2, 1fr); } }
  .kenya-item { display: flex; gap: 16px; align-items: flex-start; }
  .kenya-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); margin-top: 8px; flex-shrink: 0; }
  .kenya-item h3 { font-family: var(--sans); font-size: 16.5px; font-weight: 700; }
  .kenya-item p { font-size: 14.5px; color: #524A40; margin: 4px 0 0; }

  /* Steps */
  .steps-grid { counter-reset: step; display: grid; grid-template-columns: 1fr; gap: 36px; }
  @media (min-width: 760px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
  .step { counter-increment: step; position: relative; padding-left: 48px; }
  .step::before {
    content: counter(step); position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 600;
    font-size: 15px; width: 34px; height: 34px; border-radius: 50%; background: var(--emerald); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .step h3 { font-family: var(--sans); font-size: 16.5px; font-weight: 700; }
  .step p { font-size: 14.5px; color: #524A40; margin: 6px 0 0; }

  /* CTA / footer */
  .cta { background: var(--forest); color: var(--forest-text); text-align: center; }
  .cta h2 { color: var(--forest-text); font-size: clamp(28px, 4.2vw, 40px); font-weight: 600; }
  .cta p { color: #C3CDC5; font-size: 16.5px; margin: 18px auto 32px; max-width: 48ch; }
  .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  footer { background: var(--forest); color: #8FA096; border-top: 1px solid var(--forest-line); padding: 32px 0; }
  footer .wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; font-size: 13px; flex-wrap: wrap; }
  @media (min-width: 700px) { footer .wrap { flex-direction: row; justify-content: space-between; text-align: left; } }
  @media (max-width: 699px) { footer .wrap > div:last-child { width: 100%; } }
  footer .brand span { color: var(--forest-text); font-family: var(--serif); }
  footer .brand a { color: #8FA096; text-decoration: underline; text-decoration-color: var(--forest-line); text-underline-offset: 2px; }
  footer .brand a:hover { color: var(--forest-text); text-decoration-color: currentColor; }

  ::selection { background: var(--coral); color: #fff; }

/* ---- Interior page header (sub-pages use this instead of the home hero) ---- */
.page-head { padding: 62px 0 0; }
.page-head h1 { font-size: clamp(31px, 4.4vw, 46px); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
.page-head p { font-family: var(--sans); font-size: 17.5px; color: #48493F; max-width: 58ch; margin: 18px 0 0; }

/* ---- Home teasers that point at the deeper pages ---- */
.more-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 28px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  color: var(--emerald); text-decoration: none;
}
.more-link:hover { text-decoration: underline; }
.more-link span[aria-hidden] { transition: transform .15s ease; }
.more-link:hover span[aria-hidden] { transform: translateX(3px); }

.price-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .price-strip { grid-template-columns: repeat(4, 1fr); } }
.price-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; text-align: center; }
.price-chip .t { font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.price-chip .v { font-family: var(--serif); font-size: 27px; font-weight: 600; margin-top: 6px; line-height: 1; }
.price-chip .u { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

.split { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.split img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }

/* ---- Home teaser cards: headline + link only, three across ---- */
.teaser-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }
.teaser-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 22px; transition: border-color .15s ease, transform .15s ease;
}
.teaser-card:hover { border-color: var(--emerald); transform: translateY(-2px); }
.teaser-card h2 { font-size: 21px; font-weight: 600; line-height: 1.2; }
.teaser-card .more-link { margin-top: auto; padding-top: 12px; }
.teaser-card:hover .more-link span[aria-hidden] { transform: translateX(3px); }

/* ---- The complete setup: annotated rig shot + numbered legend ---- */
.rig { margin: 0; display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 900px) { .rig { grid-template-columns: 1.25fr 1fr; gap: 44px; } }

.rig-shot {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
}
.rig-canvas { position: relative; display: block; line-height: 0; }
.rig-shot img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* Pins are placed with --x/--y percentages measured off the cropped photo. */
.rig-pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral); color: #fff; border: 2px solid #fff;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(23,35,29,0.35);
}
@media (max-width: 560px) { .rig-pin { width: 21px; height: 21px; font-size: 11px; border-width: 1.5px; } }

.rig-legend { margin: 0; padding: 0; list-style: none; counter-reset: rig; }
.rig-legend li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.rig-legend li:last-child { border-bottom: 0; }
.rig-legend li::before {
  counter-increment: rig; content: counter(rig);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
}
.rig-legend h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 700; margin: 0 0 3px; }
.rig-legend p { font-size: 14px; color: #524A40; margin: 0; }

/* ---- Partners and platforms: uniform 360x240 logo tiles + a two-word caption ---- */
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .partner-grid { grid-template-columns: repeat(5, 1fr); } }
.partner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 14px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* Every logo ships at the same pixel size, so one rule sizes them all identically. */
.partner img { display: block; width: 100%; max-width: 130px; height: auto; }
.partner .role {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}