/* =============================================
   Nexcod POS — Public Site Styles
   ============================================= */

/*
 * THE PUBLIC SITE'S TYPE — 19 Sep 2026.
 *
 * IBM Plex, set here and only here: design-system.css is shared with the software's own screens, and
 * these tokens override it for the public pages alone because this file loads after it. Plex was picked
 * over the template defaults (Inter, Manrope) that an audit of the site listed as a sign of a machine-made
 * page, and it has a Devanagari cut for a Hindi page later.
 */
:root {
  --ff-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
body { background: #ffffff; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */
/*
 * THE BAR WEARS THE BRAND, WITHOUT GETTING TALLER.
 *
 * The logo artwork is a light field on the left, a navy shape sweeping in from the right,
 * a red edge along its leading curve, and a faint grid of dots inside it. Asked for here —
 * "same design" — with one condition: "mota mat banana", do not make it thick.
 *
 * So none of this adds a single pixel of height. The navy is a wide, low gradient laid
 * across the right of the bar rather than a block; the dots sit inside it at four percent;
 * and the red is the bottom rule itself, two pixels, fading into the navy the way the
 * artwork's curve does. The bar is still --nav-h tall and the links have not moved.
 */
.site-header {
  background:
    /* the dots, inside the navy, exactly as on the artwork */
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.20) 1px, transparent 0) right center / 14px 14px,
    /* the navy sweeping in from the right */
    linear-gradient(105deg,
      rgba(255,255,255,0) 58%,
      rgba(23,37,84,.055) 74%,
      rgba(23,37,84,.11) 100%),
    rgba(255, 255, 255, 0.85);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 190px 100%, 100% 100%, auto;
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* The red edge over navy, from the artwork's curve — a rule, not a band. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #e11d2e 0%, #e11d2e 26%, #1e3a8a 62%, #172554 100%);
}
.site-header .container { position: relative; }

/*
 * THE BAR SPANS THE SCREEN; THE READING COLUMN DOES NOT.
 *
 * Every container on the site is capped at 1180px and centred, which is right for text —
 * a line of prose 1600px wide is unreadable. The header inherited that cap, so on a normal
 * monitor the logo sat some three hundred pixels in from the left edge with nothing beside
 * it, and the whole bar read as floating rather than as the top of the page. It showed up
 * worst on the login screen, where there is little else to look at.
 *
 * So the header alone is let out to the full width, with its own comfortable side padding.
 * The body keeps its 1180px column.
 */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);   /* was 68px — the bar itself was too tall */
  /*
   * Wide, but not the whole monitor.
   *
   * At 1180 the logo sat some three hundred pixels in from the edge and the bar looked
   * detached. Let out to the full screen it went the other way: the name at one extreme,
   * the menu at the other, and a field of nothing between them that grew with the display.
   * 1500 is the middle ground — on a laptop it is effectively edge to edge, and on a large
   * monitor the two ends stay within sight of each other.
   */
  max-width: 1500px;
  padding: 0 30px;
}

/* On a phone the edges come in tighter still, or the logo touches the bezel. */
@media (max-width: 560px) {
  .site-header .container { padding: 0 16px; }
}

/* The sign-in / register bar that used to live here has been removed along with the
   second header it styled. Those screens now render the SAME header as every other
   page — one set of rules, so they cannot look like a different product. */

/*
 * THE WORDMARK.
 *
 * Heavier and a shade larger than it was, tracked in tight, because a name set at the same
 * weight as the menu beside it does not read as a name — it reads as one more link.
 *
 * The movement is deliberately small. A logo that sweeps, shimmers or types itself out
 * announces that somebody was pleased with the effect; a shop owner reads that as a
 * template. So there are exactly two things: the mark settles into place once when the
 * page opens, and the tile leans a little towards you when the pointer is on it. Both are
 * over in under half a second and neither repeats.
 */
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 18.5px;
  color: var(--text);
  letter-spacing: -0.55px;
  animation: brand-settle .42s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes brand-settle {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* The tile carries the movement on hover — the letters stay still, which keeps the name
   legible while your eye is on it. */
.site-brand .brand-icon { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; }
.site-brand:hover .brand-icon { transform: translateY(-1.5px) rotate(-3deg); }
.site-brand:active .brand-icon { transform: translateY(0) rotate(0); }

/* Anyone who has asked their system for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .site-brand { animation: none; }
  .site-brand .brand-icon, .site-brand:hover .brand-icon { transition: none; transform: none; }
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius:8px;
  background: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.30);
}

/* Compact nav. The BAR is what needed shrinking (52px, above) — the link text
   itself stays readable at 14px; dropping it to 12.5px just looked small inside
   a tall bar. */
/*
 * THE HEADER IS ONE ROW OR IT IS THE MENU — never a row and a half.
 *
 * Eight links, six social icons and three buttons will not fit a laptop width, and with
 * wrapping allowed they spilled onto a second line: the bar grew taller and the items
 * shifted up and down as the page settled. So the row may not wrap and no label may break
 * mid-word. When there is genuinely not enough room the hamburger takes over, which is a
 * clean answer rather than a squashed one.
 */
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  /*
   * The menu takes the room between the name and the buttons and sits in the middle of it.
   * Left to itself the whole nav hugged the right edge and left a field of nothing across
   * the centre of the bar — the wider the screen, the emptier it looked.
   */
  flex: 1 1 auto;
}

/*
 * Name on the left, everything else together on the right — which is how it was, and how
 * it looked right. Centring the pages was tried and did not: with a short name on one side
 * and a long row of buttons on the other, a middle group has nothing to sit symmetrically
 * between, so it reads as adrift rather than as placed.
 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.site-nav a { white-space: nowrap; }

/* Everything pressable, together, at the end. No auto margin here: the links' own two
   auto margins already take all the spare width, and a third one would join the split and
   pull the middle group off centre. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.site-nav a {
  color: #111827;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .15s;
}
.site-nav a:hover { color: var(--brand-600, #1d4ed8); }
.site-nav .btn { font-weight: 600; }

/* ===== Mobile menu toggle (hamburger) — hidden on desktop ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius:3px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== "More" menu =====
   Five links stay on the bar; the rest live here, grouped under the same headings the
   footer uses. Opened by click rather than hover: a hover panel closes itself the moment
   the pointer crosses the gap to reach it, and a click works the same for a mouse, a
   keyboard and a finger. */
.nav-more { position: relative; display: inline-flex; }
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"] { color: var(--brand-600, #1d4ed8); }
.nav-more-caret { width: 14px; height: 14px; transition: transform .18s ease; }
.nav-more-btn[aria-expanded="true"] .nav-more-caret { transform: rotate(180deg); }

/*
 * HIDDEN BY OPACITY, NOT BY display — and that is a bug fix, not a flourish.
 *
 * The panel used to toggle display:none/grid. Clicking a link inside it ran close(), which
 * took the clicked element out of layout in the middle of its own click event. An ordinary
 * link had usually committed by then; "Email Support" is a mailto:, which hands off to an
 * outside application, and that hand-off was being cancelled. The shop reported it simply
 * as the button not working, and it was not.
 *
 * Kept in layout and faded instead, so nothing disappears from under the pointer — and it
 * can then be animated, which is the other thing that was asked for. visibility is
 * transitioned with a delay on the way out so the panel is not clickable while fading, and
 * instantly on the way in.
 */
.nav-more-panel {
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  transition: opacity .16s ease,
              transform .2s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .2s;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  /* Three short columns rather than one long list. Stacked, nine links read as a queue
     and the panel hangs halfway down the page; side by side, each group is its own short
     thing to glance at. */
  grid-template-columns: repeat(3, minmax(132px, auto));
  gap: 6px 26px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .13);
}
.nav-more-btn[aria-expanded="true"] + .nav-more-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .16s ease,
              transform .2s cubic-bezier(.2,.7,.3,1),
              visibility 0s;
}
/* Somebody who has asked their machine to stop moving things gets the panel, not the slide. */
@media (prefers-reduced-motion: reduce) {
  .nav-more-panel { transition: none; transform: none; }
  .nav-more-btn[aria-expanded="true"] + .nav-more-panel { transition: none; }
  .nav-more-caret { transition: none; }
}
/* A grid item will not shrink below its longest word unless told to, and "Terms of
   Service" is wider than the 132px the column asks for — without this the panel quietly
   grows instead of wrapping. */
.nav-more-group { min-width: 0; }
.nav-more-head {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
}
.nav-more-panel a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.nav-more-panel a:hover { color: var(--brand-600, #1d4ed8); }
.nav-more-panel a[aria-current="page"] { color: var(--brand-600, #1d4ed8); font-weight: 700; }

/* The page you are standing on, on the bar itself. */
.nav-links > a[aria-current="page"] { color: var(--brand-600, #1d4ed8); }

/* ===== Hero ===== */
.hero {
  padding: 80px 0 60px;
  text-align: center;
  /* decorative glow removed — it was the main thing that read as "designed by a machine" */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--brand-100);
  color: var(--brand-700);
  border-radius:3px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
  border: 1px solid var(--brand-200);
}

.hero h1 {
  font-family: var(--ff-sans);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
  color: #0f172a;
}

.hero p.lead {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* ---- Hero CTAs — hand-crafted premium buttons (no harsh black outline) ---- */
.hero-cta { gap: 14px; }
.hero-cta .btn { border-radius:3px; font-weight: 700; letter-spacing: .1px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, filter .18s, border-color .18s, color .18s; }

/* "Start free" — the same glass button as everywhere else, just bigger. Nothing here
   may cancel the depth: an earlier pass set box-shadow:none and quietly flattened the
   one button most people see first. Size and the arrow only. */
.hero-cta .btn-primary {
  padding: 15px 30px;
  font-size: 15.5px;
  background: #1d4ed8;
  color: #fff;
}
.hero-cta .btn-primary:hover { background: #1e40af; color: #fff; }

/* "See pricing" — its pale twin, same glass, same size */
.hero-cta .btn-secondary {
  background: #fff;
  color: #111827;
  padding: 15px 26px;
  font-size: 15.5px;
}
.hero-cta .btn-secondary:hover { color: #1d4ed8; background: #f8fafc; }

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.hero-stats div { display: flex; align-items: center; gap: 6px; }
.hero-stats strong { color: var(--text); font-size: 14px; }

/* ===== Sections ===== */
.section {
  padding: 80px 0;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-head h1,
.section-head h2 {
  font-family: var(--ff-sans);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 12px;
}

.section-head p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ===== Features grid ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius:3px;
  padding: 28px;
  transition: all .2s;
}

.feature-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.08);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius:3px;
  background: var(--brand-100);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }

.feature-card h3 {
  font-family: var(--ff-sans);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ===== Pricing ===== */
/*
 * Four plans, four identical boxes.
 *
 * They were enormous and uneven: 30px of padding, a 40px price, and one card scaled up
 * 3% so it stood taller than its neighbours — four plans that are meant to be compared
 * at a glance instead needed scrolling and did not line up. Same information, smaller
 * type, and every card exactly the same size.
 *
 * align-items:stretch with a column layout is what makes them equal: each card fills
 * the row height and pushes its button to the bottom, so the four buttons sit on one
 * line however many features a plan lists.
 */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
}

.pricing-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius:3px;
  padding: 22px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* the call to action sits on the floor of every card, so all four align */
.pricing-card > .btn, .pricing-card > a.btn { margin-top: auto; }

/* The chosen plan is marked by its border and its badge — not by being a different
   size. Scaling it broke the row and clipped the badge on small screens. */
.pricing-card.featured {
  border: 2px solid var(--brand-600);
}

.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1d4ed8;
  color: #fff;
  padding: 4px 14px;
  border-radius:3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.pricing-card h3 {
  font-family: var(--ff-sans);
  font-size: 16px;
  margin: 0 0 3px;
}

.pricing-card .desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 2.6em;           /* so a one-line description does not shorten its card */
}

.pricing-card .price {
  font-family: var(--ff-sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 4px;
}

.pricing-card .price small {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.pricing-card li {
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.pricing-card li::before {
  content: '✓';
  color: #10b981;
  font-weight: 700;
  flex-shrink: 0;
}
.pricing-card li.feat-no { color: #94a3b8; }
.pricing-card li.feat-no::before { content: '✗'; color: #cbd5e1; }

/* ===== Auth pages ===== */
.auth-wrap {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  /* decorative glow removed — it was the main thing that read as "designed by a machine" */
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius:3px;
  padding: 36px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border);
}

.auth-card h1 {
  font-family: var(--ff-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
  text-align: center;
}

.auth-card .auth-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.auth-card .form-input { padding: 12px 14px; }

.auth-card hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

.auth-foot {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-foot a {
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: none;
}

/* OTP input boxes */
.otp-input-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 12px 0;
}

.otp-input-row input {
  width: 48px;
  height: 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius:3px;
  background: var(--bg-elevated);
  color: var(--text);
  outline: none;
}

.otp-input-row input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* ===== Footer ===== */
.site-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 60px 0 24px;
  margin-top: 60px;
  overflow: hidden;
}
/* Big faint brand watermark across the very bottom of the footer */
.footer-watermark {
  text-align: center;
  font-weight: 900;
  letter-spacing: -3px;
  font-size: clamp(46px, 15vw, 190px);
  line-height: .8;
  margin: 22px 0 -26px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(148,163,184,.16) 0%, rgba(148,163,184,.02) 78%, rgba(148,163,184,0) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.site-footer .site-brand { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-grid h4 {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.footer-grid a {
  display: block;
  padding: 5px 0;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13.5px;
}
.footer-grid a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: #a8b3c4;
}

/* ===== Form input alias (so includes/header.php works) ===== */
.form-input { /* alias of .input */
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius:var(--r-md);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border .15s, box-shadow .15s;
}
.form-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
textarea.form-input { font-family: inherit; min-height: 90px; }

.form-select {
  width: 100%;
  padding: 10px 14px;
  padding-right: 38px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius:var(--r-md);
  color: var(--text);
  font-size: 14px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* aliases for variables not in design-system */
:root {
  --primary: var(--brand-600);
  --bg-card: var(--surface);
  --bg-subtle: var(--surface-2);
  /*
   * The height of the bar, written once.
   *
   * It was 68px, was brought down to 52 because the bar was too tall, and three other
   * places went on saying 68: the dropped-down mobile menu hung 16px below the header
   * with a strip of page showing through the gap, and the sign-in panel reserved room
   * for a bar taller than the one above it. Same shape of mistake as the header and the
   * footer each keeping their own copy of the menu.
   */
  --nav-h: 52px;
}

/* Mobile */
/* 1080, not 820: the bar carries a Software Demo button now, and below about this width
   the links start fighting each other rather than merely sitting close. */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.10);
    padding: 8px 16px 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .28s ease, opacity .2s ease;
  }
  .site-nav.open {
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    display: block;
    padding: 13px 6px;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav .btn {
    margin-top: 10px;
    text-align: center;
    border-bottom: 0 !important;
  }
  .site-nav .header-social { display: none; }

  /* In the dropped-down menu the actions are just more rows: full width, stacked, and the
     auto margin that held them right on a wide bar means nothing in a column. */
  .nav-links, .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    width: 100%;
  }
  .nav-actions { margin-top: 10px; }

  /* No hover and no room for a floating panel on a phone, and the whole nav is already
     behind the hamburger — a second collapse would put these pages two taps away. So the
     panel simply stops floating and becomes part of the list, with its group headings
     doing the work the dropdown did on the bar. */
  .nav-more { display: block; }
  .nav-more-btn { display: none; }
  .nav-more-panel,
  .nav-more-btn[aria-expanded="true"] + .nav-more-panel {
    /* the desktop panel is faded out by default now, so the stacked one has to undo that */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-more-head {
    margin: 14px 0 0;
    padding: 0 6px 6px;
    border-bottom: 1px solid var(--border);
  }
  .nav-more-panel a { padding: 13px 6px; font-size: 15px; }
}

/* Four across down to two, then one — never four squeezed to 160px each. */
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card.featured { transform: none; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; }
  .pricing-card .desc { min-height: 0; }
}

/* ============================================================
   Landing v2 + Founder/Team — premium look & scroll animations
   ============================================================ */
/* scroll fade-ins removed (19 Sep 2026): content is there when the page opens */
.reveal { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }

.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* decorative glow removed — it was the main thing that read as "designed by a machine" */
}
.hero .container { position: relative; z-index: 1; }
.hero h1 .grad {
  background: #1d4ed8;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---- Hero background media (admin photo / video), full-bleed behind the hero ---- */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-media video, .hero-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-media-img { background-size: cover; background-position: center; }
.hero-media-ov { position: absolute; inset: 0; background: #0b1220; z-index: 1; }
/* Under the video, so a phone — which never attaches the video — still gets the brand
   gradient rather than a black rectangle, and so does a desktop while the video buffers. */
.hero-bg--fallback { position: absolute; inset: 0; z-index: 0; }
/* No video below this width; see the note in index.php. */
@media (max-width: 899px) {
  .hero-video { display: none; }
  /*
   * A ground of its own, because there is nothing else.
   *
   * .hero-bg carries no background — its glow was removed long ago — and .hero itself is
   * transparent, so with the video gone the hero sat on the body's near-white and the
   * white headline vanished into it. Caught by measuring rather than by looking, which is
   * the only way white-on-white is ever caught.
   *
   * The scrim and the admin's darkness overlay are both switched off here: they exist to
   * hold white text on a bright photograph, and with a gradient of our own choosing they
   * would only grey it down.
   */
  .hero--media .hero-media::after { display: none; }
  .hero--media .hero-media-ov { display: none; }
  .hero--media .hero-bg--fallback {
    background: linear-gradient(160deg, #0d2350 0%, #163a80 55%, #1d4ed8 100%);
  }
}

/*
 * Thumb-sized buttons in the phone menu.
 *
 * Software Demo, Login and Start Free were 33 and 34 pixels tall in the stacked menu —
 * measured, not guessed. That is under the 44 a thumb needs, and these three are the only
 * way into the software from a phone. They are full width there anyway, so the height costs
 * nothing but a few pixels of menu.
 */
@media (max-width: 899px) {
  .site-nav .nav-actions .btn,
  .site-nav .nav-actions .btn-sm {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* ALWAYS-ON readability scrim (independent of the admin darkness slider) so white text
   is never washed out on a bright video/photo — darker at top & bottom, softer in middle */
.hero-media::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* The middle stop was .20, which is not enough over a bright picture — the white
     headline washed out completely on a photograph of a sky. */
  background: linear-gradient(180deg, rgba(2,6,23,.50) 0%, rgba(2,6,23,.38) 42%, rgba(2,6,23,.60) 100%);
}
.hero--media { padding-top: 108px; padding-bottom: 96px; }
.hero--media .container { position: relative; z-index: 3; }
/* every bit of hero text turns crisp white with a soft shadow for guaranteed contrast */
.hero--media h1, .hero--media p.lead { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.55); }
/* the gradient word must NOT stay dark-purple on a dark video → use a light gradient */
.hero--media h1 .grad {
  background: #bfdbfe;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero--media .hero-badge { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; text-shadow: none; }
.hero--media .hero-stats strong { color: #fff; }
.hero--media .hero-stats div { color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero--media .btn-secondary { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.55); }
.hero--media .btn-secondary:hover { background: rgba(255,255,255,.28); }
.btn-lg { padding: 13px 26px; font-size: 15px; }

.trust-strip { background: #fff; border-bottom: 1px solid var(--border); padding: 18px 0; }
.trust-strip .container { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.trust-strip span { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.trust-items { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.trust-items div { font-size: 13px; font-weight: 600; color: #475569; background: var(--bg-subtle); border: 1px solid var(--border); border-radius:3px; padding: 6px 14px; }

.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.step-card { background: #fff; border: 1px solid var(--border); border-radius:var(--r-lg); padding: 26px 22px; position: relative; }
.step-no { width: 40px; height: 40px; border-radius:3px; background: #1d4ed8; color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step-card h3 { margin: 0 0 6px; font-size: 17px; }
.step-card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.why-v2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
.why-v2 h2 { font-family: var(--ff-sans); font-size: 30px; letter-spacing: -.5px; margin: 14px 0 10px; }
.why-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.why-list li { color: #e2e8f0; font-size: 15px; font-weight: 500; }
.why-card { display: grid; gap: 12px; }
.why-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius:3px; padding: 18px 20px; }
.why-stat strong { display: block; font-size: 22px; color: #fff; font-family: var(--ff-sans); }
.why-stat span { color: #94a3b8; font-size: 13px; }

.faq details { border: 1px solid var(--border); border-radius:3px; padding: 4px 18px; margin-bottom: 10px; background: #fff; }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; font-size: 15px; list-style: none; outline: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: #1d4ed8; font-weight: 700; font-size: 20px; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.page-hero { padding: 56px 0 20px; text-align: center; /* decorative glow removed — it was the main thing that read as "designed by a machine" */ }
.page-hero h1 { font-family: var(--ff-sans); font-size: 40px; letter-spacing: -1px; margin: 14px 0 8px; }

.founder-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.founder-photo { aspect-ratio: 1; border-radius:3px; overflow: hidden; background: #f1f5f9; border: 1px solid var(--border); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo.noimg { display: flex; align-items: center; justify-content: center; }
.founder-photo.noimg::after { content: attr(data-i); font-size: 80px; font-weight: 800; color: #3b82f6; font-family: var(--ff-sans); }
.founder-body h2 { margin: 0; font-size: 26px; }
.founder-role { color: #1d4ed8; font-weight: 600; margin: 4px 0 16px; }
.founder-body blockquote { border: 0; margin: 6px 0 22px; padding: 24px 26px 24px 30px; background: #f6f4ff; border-radius:3px; font-size: 19px; font-style: normal; font-weight: 500; line-height: 1.56; color: #172554; box-shadow: 0 1px 2px rgba(79,70,229,.05); position: relative; overflow: hidden; }
.founder-body blockquote::before { content: '\201C'; position: absolute; left: 12px; top: 2px; font-size: 60px; line-height: 1; color: #c7bdf6; font-family: Georgia, serif; }
.founder-body p { color: #475569; line-height: 1.7; margin: 0 0 14px; }

.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.team-card { background: #fff; border: 1px solid var(--border); border-radius:var(--r-lg); padding: 22px; text-align: center; transition: transform .2s, box-shadow .2s; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(2,6,23,0.10); }
.team-photo {
  width: 104px; height: 104px; margin: 0 auto 16px; border-radius:50%;
  overflow: hidden; position: relative;
  background: #f1f5f9;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(99,102,241,0.25);
  display: flex; align-items: center; justify-content: center;
}
.team-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; color: #3b82f6; font-family: var(--ff-sans); z-index: 0; }
.team-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.team-ig { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 12px; border-radius:9px; color: #fff; background: #f58529; }
.team-ig:hover { transform: translateY(-1px); }
.team-card h3 { margin: 0 0 2px; font-size: 16px; }
.team-role { color: #1d4ed8; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.team-card p { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 0; }

@media (max-width: 820px) {
  .steps-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  .why-v2 { grid-template-columns: 1fr; }
  .founder-wrap { grid-template-columns: 1fr; }
  .founder-photo { max-width: 260px; }
}
@media (max-width: 520px) {
  .steps-grid, .team-grid { grid-template-columns: 1fr; }
}

/* Header "Start Free" button — nav link color was overriding the button's white text.
   Force white text + add a soft blue glow. */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover,
.site-nav a.btn-primary:focus,
.site-nav a.btn-primary:visited {
  color: #fff !important;
}
.site-nav a.btn-primary {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.35), 0 6px 20px rgba(79,70,229,0.45);
}
.site-nav a.btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.55), 0 8px 28px rgba(99,102,241,0.60);
  transform: translateY(-1px);
}
/* ===== Social links (Follow us) ===== */
.footer-social { margin-top: 18px; }
.footer-social-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin-bottom:9px; }
.footer-social-icons { display:flex; gap:10px; flex-wrap:wrap; }
.footer-social-icons a { width:38px; height:38px; border-radius:3px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:#cbd5e1; transition:transform .15s, background .15s, color .15s; }
.footer-social-icons a:hover { background:#1d4ed8; color:#fff; transform:translateY(-2px); }
.footer-social-icons svg { width:19px; height:19px; }

/* Decoration goes first. Between the menu breakpoint and a roomy desktop these are what
   the row can most afford to lose, so they leave before a single link has to. */
/*
 * The icons stay until the bar genuinely cannot hold them.
 *
 * This was set at 1400, which on a 1366 laptop — the commonest screen there is — meant
 * nobody ever saw them. Measured, the row needs about 1225px with the icons in it, so
 * 1280 is where they have to go, and above that they show.
 */
@media (max-width: 1280px) { .site-nav .header-social { display: none; } }

.header-social { display:inline-flex; gap:4px; align-items:center; margin:0 4px; padding:0 4px; border-left:1px solid var(--border,#e2e8f0); }
.header-social a { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#334155; transition:background .15s, color .15s; }
/*
 * Each icon in its own brand colour, keyed off the address it points at.
 *
 * A row of identical grey glyphs asks the reader to stop and work out which is which;
 * these are logos people already know by colour, so the colour is the label. Keying on
 * the href means a network added later is coloured by adding one line here, not by
 * touching the markup that draws it.
 */
.header-social a[href*="instagram"] { color:#E4405F; }
.header-social a[href*="linkedin"]  { color:#0A66C2; }
.header-social a[href*="wa.me"],
.header-social a[href*="whatsapp"]  { color:#25D366; }
.header-social a[href*="facebook"]  { color:#1877F2; }
.header-social a[href*="youtube"]   { color:#FF0000; }
.header-social a[href*="twitter"],
.header-social a[href*="x.com"]     { color:#0F172A; }

/* Hover tints the tile behind the icon instead of repainting the icon — the mark keeps
   the colour people recognise it by. */
.header-social a:hover { background:#f1f5f9; }
.header-social svg { width:17px; height:17px; }
@media (max-width: 980px){ .header-social { display:none; } }

/* ===== Inline button spinner (loading state) ===== */
.nxcd-spin { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:nxcdSpin .6s linear infinite; }
@keyframes nxcdSpin { to { transform:rotate(360deg); } }
button.is-loading, .btn.is-loading, input.is-loading { opacity:.8 !important; cursor:wait !important; pointer-events:none !important; }

/* ===== Button loading spinner (global submit guard) ===== */
.nxcd-btn-spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:nxcdspin .6s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes nxcdspin{to{transform:rotate(360deg)}}
button.is-loading,.btn.is-loading,a.btn.is-loading{opacity:.8;cursor:progress;pointer-events:none}

/* ============================================================
   Hand-crafted premium polish (homepage) — refined buttons,
   cards & hero so nothing reads like a stock template.
   ============================================================ */

/* --- Top-nav: Login and Start Free are a matched pair, like the software's toolbar.
       Login used to be transparent text, which read as a link sitting next to a button. --- */
.site-nav a.btn.btn-ghost {
  background: #fff; color: #1e293b; font-weight: 600; padding: 9px 16px;
}
.site-nav a.btn.btn-ghost:hover { background: #f8fafc; color: #1d4ed8; }
.site-nav a.btn.btn-primary {
  border: 0; border-radius:3px; padding: 9px 20px; font-weight: 700;
  background: #1d4ed8;
  box-shadow: 0 6px 16px -5px rgba(79,70,229,.5), inset 0 1px 0 rgba(255,255,255,.26);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.site-nav a.btn.btn-primary:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 11px 24px -7px rgba(79,70,229,.62), inset 0 1px 0 rgba(255,255,255,.32);
}

/* --- Feature cards: soft at rest, colourful accent + lift on hover --- */
.feature-card { border-color: #eef1f6; box-shadow: 0 1px 2px rgba(15,23,42,.04); position: relative; overflow: hidden; }
.feature-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: #3b82f6;
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.feature-card:hover { border-color: #dbeafe; transform: translateY(-4px); box-shadow: 0 20px 42px -16px rgba(79,70,229,.22); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon { background: #eff6ff; box-shadow: inset 0 0 0 1px rgba(99,102,241,.12); transition: transform .25s ease; }
.feature-card:hover .feature-icon { transform: scale(1.06) rotate(-3deg); }

/* --- Hero over video: cinematic overlay, lighter text shadow (not heavy/AI) --- */
.hero-media::after { background: linear-gradient(180deg, rgba(9,12,24,.44) 0%, rgba(9,12,24,.16) 46%, rgba(9,12,24,.62) 100%); }
.hero--media h1, .hero--media p.lead { text-shadow: 0 1px 22px rgba(0,0,0,.42); }
.hero--media .hero-badge {  }

/* --- Cards / FAQ / pricing: replace flat generic borders with softer ones --- */
.faq details { border-color: #eef1f6; box-shadow: 0 1px 2px rgba(15,23,42,.03); transition: box-shadow .2s ease, border-color .2s ease; }
.faq details[open] { border-color: #dbeafe; box-shadow: 0 12px 30px -16px rgba(79,70,229,.18); }
.section-head h1,
.section-head h2 { line-height: 1.12; }

/* ============================================================
   Editorial refinements — every marketing page (about, founder,
   team, pricing, contact…) so nothing reads like a stock template.
   ============================================================ */

/* Eyebrow labels — flat purple pill → crisp white editorial chip (used on every page) */
.hero-badge {
  background: #fff; border: 1px solid #e7e9f3; color: #1e40af;
  box-shadow: 0 2px 10px rgba(79,70,229,.07);
  text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 700;
}

/* Page heros (founder / about / pricing / contact) — more air, tighter display type */
.page-hero { padding: 66px 0 26px; }
.page-hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -1.4px; line-height: 1.08; }
.page-hero .lead { max-width: 620px; margin-left: auto; margin-right: auto; color: var(--text-muted); }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -1.1px; }

/* "How it works" — crafted number badges + hover lift, connected feel */
.step-card { border-color: #eef1f6; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.step-card:hover { transform: translateY(-3px); border-color: #dbeafe; box-shadow: 0 18px 40px -16px rgba(79,70,229,.2); }
.step-no { border-radius:3px; background: #1d4ed8;
  box-shadow: 0 8px 18px -6px rgba(79,70,229,.5), inset 0 1px 0 rgba(255,255,255,.25); }

/* Pricing cards — softer at rest, lift on hover, richer featured card */
.pricing-card { border-color: #eef1f6; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pricing-card:not(.featured):hover { border-color: #c7dbfd; box-shadow: 0 8px 20px -10px rgba(15,23,42,.18); }
.pricing-card.featured { box-shadow: 0 28px 62px -22px rgba(79,70,229,.34); }

/* Founder page — editorial photo frame + gradient quote rule */
.founder-photo { border-radius:3px; border-color: #ece9fb; box-shadow: 0 26px 54px -24px rgba(49,46,129,.32); }
.founder-body blockquote { border: 0; border-image: none; }

/* Warm the page a touch so it feels printed/crafted, not pure #fff */
body { background: #fafafc; }

/* --- Admin announcement bar (scrolling marquee, left→right) --- */
.site-announce { background: #1e40af; overflow: hidden; position: relative; }
.site-announce-track { display: flex; width: max-content; white-space: nowrap; text-decoration: none;
  padding: 9px 0; animation: annScroll 32s linear infinite; }
.site-announce:hover .site-announce-track { animation-play-state: paused; }
.site-announce-track span { display: inline-flex; align-items: center; gap: 9px; padding: 0 34px;
  font-size: 13px; font-weight: 600; letter-spacing: .2px; color: #fff; }
.site-announce-dot { width: 6px; height: 6px; border-radius:50%; background: #cbd5e1; box-shadow: 0 0 0 3px rgba(196,181,253,.25); }
@keyframes annScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .site-announce-track { animation: none; justify-content: center; width: 100%; } .site-announce-track span:not(:first-child) { display: none; } }

/* --- Header refinement: cleaner glass, premium gradient wordmark (header only) --- */
.site-header { background: rgba(255,255,255,.92);   border-bottom: 1px solid #edf0f6; }
/* "Nexcod" navy, "POS" red — the two-colour wordmark from the artwork. */
.site-header .site-brand span { background: none; -webkit-text-fill-color: currentColor; color: #172554; }
.site-header .site-brand .brand-tail { color: #e11d2e; }
.site-header .brand-icon { box-shadow: 0 5px 14px -5px rgba(79,70,229,.45); border-radius:3px; }

/* ============================================================
   GLOSSY BUTTONS — same treatment as the software dashboard.
   The shine is a BACKGROUND LAYER, never an overlay element: a button's label is
   a bare text node, so an absolutely-positioned shine paints on top of it and the
   text disappears (that bug hit the dashboard first). Every variant also gets an
   explicit background-colour, so no button can end up transparent.
   ============================================================ */
/* ===== THE BUTTON — the software's glossy candy, on the website too =====
   
   This is not a look invented for the website. It is the recipe already carrying the
   dashboard's quick actions (.qa-btn / .mo-btn in assets/css/topnav.css, marked there
   as the owner-approved style), lifted here character for character so "Send on
   WhatsApp", "Start Free" and the pricing buttons are the same object as New Bill.
   
   Four layers make it, and each one earns its place:
     1. the button's own colour        — flat fill underneath everything
     2. ::before, a glass shine        — bright at the top, gone by the middle
     3. inset shadows                  — lit top edge, deep bottom: moulded, not flat
     4. a thin dark outline + one tight drop shadow — separation, no halo
   
   The shine is painted with z-index:-1 inside an `isolation:isolate`, which puts it
   ABOVE the fill but BELOW the label. A button's text is usually a bare text node with
   no element to lift, so pushing the shine under it is the only way to keep the words
   crisp. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.28);
  background-color: #eef2f8;
  background-image: none;
  color: #111827;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  text-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -6px 12px rgba(0,0,0,.22),
    inset 0 0 14px rgba(255,255,255,.20),
    0 1px 3px rgba(15,23,42,.35);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%;
  pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 100%);
  border-radius: 3px 3px 40% 40% / 3px 3px 3px 3px;
}
.btn:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -6px 12px rgba(0,0,0,.22),
    inset 0 0 20px rgba(255,255,255,.32),
    0 2px 5px rgba(15,23,42,.40);
}
.btn:active { transform: translateY(1px); }
/* the label and its icon sit above the shine */
.btn > * { position: relative; z-index: 2; }

/* Colour is the only thing that separates one button from another. */
.btn-primary, .btn-danger, .btn-success { color: #fff; background-image: none; }
.btn-primary { background-color: #1d4ed8; }
.btn-danger  { background-color: #dc2626; }
.btn-success { background-color: #059669; }
.btn-primary:hover { background-color: #1e40af; color: #fff; }
.btn-danger:hover  { background-color: #b91c1c; color: #fff; }
.btn-success:hover { background-color: #047857; color: #fff; }

/* A pale button cannot take the same shadow — a dark bottom on white reads as dirt,
   not as depth. Same shape and shine, a lighter hand underneath. */
.btn-secondary, .btn-ghost {
  background-color: #fff;
  color: #111827;
  background-image: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -5px 10px rgba(15,23,42,.10),
    0 1px 3px rgba(15,23,42,.22);
}
.btn-secondary:hover, .btn-ghost:hover {
  background-color: #f4f7fc; color: #111827;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -5px 10px rgba(15,23,42,.12),
    0 2px 5px rgba(15,23,42,.26);
}

.btn:disabled, .btn.disabled {
  /* readable, not ghostly — a disabled button's label is usually the reason it is off */
  background-color: #475569; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(15,23,42,.25);
  opacity: 1; cursor: not-allowed; pointer-events: none; transform: none;
}
.btn:disabled::before, .btn.disabled::before { opacity: .35; }

/* The hero pair is only bigger, never different.
   
   These two carried their own gloss and bevel after the rest had been flattened — the
   first thing anybody sees on the site, and the one place that still did not look like
   the software. Same button, larger. */
.hero-cta .btn { padding: 14px 30px; font-size: 15px; }
.hero-cta .btn-primary       { background-color: #1d4ed8; }
.hero-cta .btn-primary:hover { background-color: #1e40af; }
.hero-cta .btn-secondary     { background-color: #fff; }

/* Over the video the secondary button is white-on-dark, so it takes a white outline
   rather than the black one — the black would vanish into the footage. */
.hero--media .btn-secondary {
  background-color: rgba(255,255,255,.14) !important;
  background-image: none !important;
  border-color: #fff !important;
  color: #fff !important;
}
.hero--media .btn-secondary:hover { background-color: rgba(255,255,255,.26) !important; color: #fff !important; }

/* ============================================================
   HERO HEADING OVER THE VIDEO — must be plain white.
   `.hero h1` is gradient-filled text (`-webkit-text-fill-color: transparent` with a
   gradient that STARTS at #0f172a). Setting `color:#fff` for the video hero was not
   enough: the fill-colour still won, so "Billing software built for…" stayed dark
   navy on a dark video. Both the fill and the background have to be reset here.
   ============================================================ */
.hero--media h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
/* the highlighted words keep their light gradient — readable on dark */
.hero--media h1 .grad {
  background: #bfdbfe !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none;
}
.hero--media p.lead {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

/* =============================================
   Home, redrawn — 19 Sep 2026
   Engineered rather than decorated: left-set type, hairlines, tabular figures, one dark panel
   carrying live numbers, no glow, no gradient type, no animation. Brand navy and red only.
   ============================================= */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.hx { padding:64px 0 60px; border-bottom:1px solid #e2e8f0;
  /* white for the words, a pale blue field behind the screen: bright, and nothing drawn on it */
  background:linear-gradient(to right, #ffffff 0 52%, #eef4ff 52% 100%); }
.hx-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:56px; align-items:center; }
.hx h1 { font-family:var(--ff-display); font-size:clamp(34px,4.6vw,56px); font-weight:700; line-height:1.06;
  letter-spacing:-.025em; color:#0b1b3f; margin:0 0 20px; max-width:14ch; }
.hx .lead { font-size:18px; line-height:1.6; color:#1e293b; max-width:34em; margin:0 0 28px; }
.hx-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.hx-cta .btn { border-radius:3px; font-weight:600; }
.hx-cta .btn-primary { background:#0f2557; border-color:#0f2557; color:#fff; }
.hx-cta .btn-primary:hover { background:#1e3a8a; border-color:#1e3a8a; color:#fff; }
.hx-cta .btn-secondary { background:#fff; color:#0b1b3f; border:1px solid #cbd5e1; }
.hx-cta .btn-secondary:hover { border-color:#0f2557; color:#0f2557; }
.hx-note { font-size:13.5px; color:#475569; margin:0; }


.cap { background:#fff; border-bottom:1px solid var(--border); }
.cap-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:56px; align-items:start; }
.cap-head { position:sticky; top:96px; }
.cap-head h2, .sec-l h2 { font-family:var(--ff-display); font-size:clamp(26px,3vw,34px); font-weight:700; letter-spacing:-.02em;
  color:#0b1b3f; margin:0 0 12px; line-height:1.15; }
.cap-head p, .sec-l p { font-size:15.5px; line-height:1.6; color:#334155; margin:0 0 16px; }
.cap-more { font-size:14px; font-weight:600; color:#0f2557; text-decoration:underline; text-underline-offset:3px; }
.cap-list { list-style:none; margin:0; padding:0; border-top:1px solid #0b1b3f; }
.cap-list li { display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; padding:22px 0; border-bottom:1px solid var(--border); }
.cap-n { font-family:var(--ff-mono); font-size:13px; color:#e11d2e; padding-top:3px; }
.cap-list h3 { font-size:17.5px; font-weight:600; color:#0b1b3f; margin:0 0 6px; line-height:1.35; }
.cap-list p { font-size:15px; line-height:1.6; color:#334155; margin:0; max-width:40em; }

.sec-l { max-width:640px; margin:0 0 28px; }
/* the plans table's styles are in pricing-table.css, which the partial links: the software draws it too */

.cta2 { background:#0f2557; color:#fff; padding:56px 0; }
.cta2-grid { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta2 h2 { font-family:var(--ff-display); font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.02em; color:#fff; margin:0 0 6px; }
.cta2 p { margin:0; color:#cbd5e1; font-size:15.5px; }
.cta2-btn { background:#fff; color:#0f2557; border-radius:3px; font-weight:600; padding:14px 28px; }
.cta2-btn:hover { background:#e2e8f0; color:#0f2557; }

@media (max-width: 900px) {
  .hx { padding:44px 0 40px; }
  .hx-grid, .cap-grid { grid-template-columns:1fr; gap:32px; }
  .cap-head { position:static; }
}

/* the real screens on the home page — a hairline frame and a caption, no drawn browser chrome */
.shots { background:#f8fafc; border-bottom:1px solid var(--border); }
.shots-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:auto auto; gap:18px; }
.shot { margin:0; }
.shot--main { grid-row:1 / span 2; }
.shot img { display:block; width:100%; height:auto; border:1px solid #cbd5e1; border-radius:3px; background:#fff; }
.shot figcaption { font-family:var(--ff-mono); font-size:12px; color:#475569; margin-top:8px; }
@media (max-width: 900px) { .shots-grid { grid-template-columns:1fr; } .shot--main { grid-row:auto; } }

/* the header's picture: one real screen of the software, framed plainly */
.hx-shot { margin:0; }
.hx-shot img { display:block; width:100%; height:auto; border:1px solid #cfdcf0; border-radius:6px; background:#fff;
  box-shadow:0 18px 40px -22px rgba(15,37,87,.35); }
.hx-shot figcaption { font-size:12.5px; color:#475569; margin-top:10px; }

/* Made in India — the tricolour as three bands, not the flag itself (see the note in footer.php) */
.made-in { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#0b1b3f; margin:12px 0 0; }
.tri { display:inline-flex; flex-direction:column; width:20px; height:14px; border:1px solid #d7dde6; border-radius:2px; overflow:hidden; flex:none; }
.tri i { flex:1; display:block; }
.tri i:nth-child(1) { background:#FF9933; } .tri i:nth-child(2) { background:#ffffff; } .tri i:nth-child(3) { background:#138808; }

/* the posters: full width under the header, one real screen on each, cut off at the edge like a print ad */
.posters { padding:28px 0 8px; background:#fff; }
.pst { position:relative; overflow:hidden; border-radius:10px; }
.pst-track { display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); will-change:transform; }
.pst-slide { flex:0 0 100%; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  min-height:clamp(340px,33vw,460px); overflow:hidden; border-radius:10px; }
.pst-text { align-self:center; padding:44px 20px 44px clamp(28px,4.4vw,60px); }
.pst-k { display:block; font-family:var(--ff-mono,'IBM Plex Mono',monospace); font-size:12px; letter-spacing:.08em; margin-bottom:18px; }
.pst-text h3 { color:#0b1b3f; font-size:clamp(28px,3.3vw,46px); line-height:1.06; letter-spacing:-.022em; font-weight:700; margin:0 0 14px; }
.pst-text p { font-size:clamp(15px,1.2vw,17px); line-height:1.6; max-width:36ch; margin:0; }
.pst-img { position:relative; }
.pst-img img { position:absolute; top:clamp(34px,3.8vw,54px); left:0; width:128%; max-width:none; height:auto;
  border-radius:8px 0 0 0; box-shadow:0 30px 60px -24px rgba(8,20,48,.45); }
/* four grounds in turn: navy, then paper with saffron, pale blue, pale green with green */
.pst-slide.k0 { background:#0f2557; color:#fff; }
.pst-slide.k0 .pst-k { color:#a9c2f7; } .pst-slide.k0 h3 { color:#ffffff; } .pst-slide.k0 p { color:#d3def5; }
.pst-slide.k1 { background:#f6f1e7; color:#0b1b3f; }
.pst-slide.k1 .pst-k { color:#c2410c; } .pst-slide.k1 p { color:#3d4656; }
.pst-slide.k2 { background:#e5eefc; color:#0b1b3f; }
.pst-slide.k2 .pst-k { color:#1d4ed8; } .pst-slide.k2 p { color:#334155; }
.pst-slide.k3 { background:#e9f5ec; color:#0b1b3f; }
.pst-slide.k3 .pst-k { color:#0f7a28; } .pst-slide.k3 p { color:#334155; }
.pst-slide:not(.k0) .pst-img img { border:1px solid rgba(15,37,87,.14); border-right:0; }
.pst-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 0 4px; position:relative; }
.pst-btn { width:36px; height:36px; border-radius:50%; border:1px solid #cbd5e1; background:#fff; color:#0b1b3f; font-size:22px;
  line-height:1; cursor:pointer; }
.pst-btn:hover { border-color:#0f2557; }
.pst-dots { display:flex; gap:7px; }
.pst-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#cbd5e1; cursor:pointer; transition:width .2s; }
.pst-dots button.on { background:#0f2557; width:22px; border-radius:5px; }
.pst-all { position:absolute; right:0; font-size:14px; font-weight:500; }
@media (prefers-reduced-motion: reduce) { .pst-track { transition:none; } }
@media (max-width: 900px) {
  .hx { background:#ffffff; }
  .pst-slide { grid-template-columns:1fr; min-height:0; }
  .pst-text { padding:30px 22px 6px; }
  .pst-text p { max-width:none; }
  .pst-img { height:clamp(200px,52vw,380px); }
  .pst-img img { top:20px; left:22px; width:150%; }
  .pst-all { position:static; }
}
.made-in-foot { display:inline-flex; align-items:center; gap:7px; vertical-align:middle; }
.made-in-foot .tri { width:18px; height:12px; border-color:rgba(255,255,255,.35); }

/* the sign-in pages (header.php $PAGE_BARE): the name at the top, one line at the foot */
.acct-top { display:flex; align-items:center; height:60px; padding:0 max(16px, calc((100vw - 1120px) / 2)); background:#fff; border-bottom:1px solid #e2e8f0; }
.acct-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#0b1b3f; font-weight:700; font-size:17px; letter-spacing:-.01em; }
.acct-brand img { width:30px; height:30px; border-radius:50%; display:block; }
.acct-foot { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; padding:18px 16px 22px; font-size:12.5px; color:#64748b; background:#f5f7fa; }
.acct-foot a { color:#475569; text-decoration:none; }
.acct-foot a:hover { color:#0b1b3f; text-decoration:underline; }
/* the smaller sign-in pages (forgot, reset, the code) wear the same card as sign-in itself */
.acct-top ~ main .auth-wrap { min-height:calc(100vh - 60px - 58px); align-items:flex-start; background:#f5f7fa;
  padding:clamp(28px, 9vh, 96px) 16px 48px; box-sizing:border-box; }
.acct-top ~ main .auth-card { max-width:400px; border-radius:8px; padding:32px; box-shadow:none; border:1px solid #e2e8f0; }
.acct-top ~ main .auth-card h1, .acct-top ~ main .auth-card .auth-sub { text-align:left; }
.acct-top ~ main .auth-card h1 { font-size:23px; }
@media (max-width:480px) { .acct-top ~ main .auth-wrap { padding:20px 12px 32px; } .acct-top ~ main .auth-card { padding:24px 18px; } }