/* ============================================================
   Yes Barcode — Design System
   Built by Eazire Webtech Pvt. Ltd.
   Palette from brand logo: blue #0067B8 · magenta #D91C81 · ink #161A27
   Headings: Playfair Display (classic) · Body: Bai Jamjuree (modern)
   ============================================================ */

:root {
  --blue: #0067b8;
  --blue-dark: #00518f;
  --blue-deep: #063a63;
  --magenta: #d91c81;
  --magenta-dark: #b0135f;
  --ink: #161a27;
  --slate: #3d4354;
  --mute: #6b7280;
  --line: #e5e9f0;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --bg-tint: #eaf3fb;
  --success: #0b7a45;
  --amber: #b45309;
  --grad: linear-gradient(120deg, var(--magenta) 0%, var(--blue) 70%);
  --grad-deep: linear-gradient(135deg, #0a2540 0%, #063a63 55%, #0b4f86 100%);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(15, 30, 60, 0.08);
  --shadow: 0 6px 24px rgba(15, 30, 60, 0.09);
  --shadow-lg: 0 18px 50px rgba(10, 37, 64, 0.16);
  --container: 1180px;
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Bai Jamjuree", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* CLIP, NEVER HIDDEN, ON THE ROOT. The page must not be draggable sideways on a
   phone, and `overflow-x: hidden` on `body` alone does not achieve that: it is
   only the BODY's overflow, and the viewport takes its own from the root. Adding
   `overflow-x: hidden` to `html` does stop the drag — and takes `.site-header`
   down with it, because `hidden` on one axis forces the other to `auto`, which
   makes the root a SCROLL CONTAINER and `position: sticky` then sticks to a
   scrollport that is no longer the viewport. Measured at 393px: the header
   settles at top:-665px instead of top:0.

   `clip` clips without creating a scroll container, so `overflow-y` stays
   `visible` and sticky survives — measured pinned at top:0 with the guard on.
   The `hidden` line stays first as the fallback for browsers that predate
   `clip` (Safari < 16): there it is dropped, `html` stays `visible`, and the
   behaviour is exactly what shipped before.

   This is the BELT. The braces are that the drawer is not allowed to stick out
   of the viewport in the first place — see `.site-header` in the 768px block. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.18; font-weight: 700; }
h4, h5 { line-height: 1.3; }

.section { padding: 72px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.section-head p { color: var(--mute); font-size: 17px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px; font-weight: 600; font-size: 15.5px;
  border: 2px solid transparent; transition: all 0.22s ease; white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(217, 28, 129, 0.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(217, 28, 129, 0.38); }
.btn-solid { background: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn-outline { border-color: var(--blue); color: var(--blue); background: #fff; }
.btn-outline:hover { background: var(--bg-tint); }
.btn-lg { padding: 16px 36px; font-size: 17px; }
.btn-sm { padding: 9px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- top bar ---------- */
.topbar { background: var(--ink); color: #cfd6e4; font-size: 13px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; gap: 12px; }
.topbar a { color: #fff; font-weight: 600; }
.topbar .gstin { letter-spacing: 0.04em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 52px; width: auto; }
/* Panel chrome — mobile only. Declared hidden HERE rather than only shown in the
   media query, so a viewport that matches no breakpoint still never shows a
   "Menu" heading floating in the desktop header. */
.nav-head, .nav-foot, .nav-scrim { display: none; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--slate); font-weight: 500; font-size: 15.5px; position: relative; padding: 6px 0; }
.nav a:hover, .nav a.active { color: var(--blue); }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  border-radius: 3px; background: var(--grad);
}
.header-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; background: none; border: 0; width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { background: var(--grad-deep); color: #fff; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 28, 129, 0.35), transparent 65%);
  top: -180px; right: -120px; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 103, 184, 0.5), transparent 65%);
  bottom: -160px; left: -100px; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 48px; align-items: center; padding: 84px 0 90px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22); padding: 7px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 22px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #38e08c; box-shadow: 0 0 0 4px rgba(56, 224, 140, 0.25); }
.hero h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 18px; }
.hero h1 .grad-text {
  background: linear-gradient(100deg, #ff77c0, #7cc4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 18px; color: #c9d6e6; max-width: 520px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-stat .num { font-size: 26px; font-weight: 700; font-family: var(--font-head); }
.hero-stat .lbl { font-size: 13px; color: #9fb2c8; }

.hero-visual { display: flex; justify-content: center; }
/* The .barcode-card / .bc-* rules that lived here are gone with the markup they
   styled: slide 1 is a picture now, like the other three. 2026-08-29. */

/* ---------- hero illustration slider ---------- */
/* ALL FOUR SLIDES SHARE ONE CELL, so the carousel is always as tall as its
   tallest slide and never changes height.

   The first slide is the barcode card, which is as tall as its own content;
   slides 2-4 are square illustrations that fill the card, so they are as tall as
   the slider is wide. Measured at 393px: 297.6px against 380px. The old rules
   took the inactive slides out of layout with `display: none`, so the slider was
   the height of whichever slide happened to be showing — and autoplay swaps
   every 4 seconds, so the hero grew and shrank by 82px on a loop and everything
   below it walked up and down with it. That is the "first banner looks wrong"
   the owner has raised three times.

   Stacking them in a single grid cell makes the common height the MAXIMUM of the
   four, computed by the browser at every width. No magic number to go stale, and
   nothing is cropped or squashed to fit: the short slide is centred in the cell,
   the illustrations keep their own aspect ratio exactly as before.

   `visibility` rather than `display` because a `display: none` slide is not in
   the grid at all and would not contribute its height. It also keeps the hidden
   slides out of the accessibility tree and out of the tab order, which is what
   `display: none` was doing.

   `align-items: center` so the short slide sits in the MIDDLE of the shared
   cell rather than pinned to its top with all the slack under it — the slack is
   hero background either way, and centred it reads as a smaller card rather than
   as a card that has dropped.

   `.sl-dots` is left to auto-place into row 2 beneath them; `.sl-arrow` is
   absolutely positioned and so is not a grid item at all. */
.slider { position: relative; width: 100%; max-width: 380px; display: grid; align-items: center; }
.slider .slide { grid-area: 1 / 1; visibility: hidden; }
.slider .slide.active { visibility: visible; animation: slfade 0.6s ease; }
@keyframes slfade { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.slide-card { background: #fff; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg); }
.slide-card img { width: 100%; height: auto; }
/* Arrows. 44px because that is the smallest target a thumb hits reliably, and
   these sit over an illustration where a miss does nothing visible and reads as
   the page being broken. */
.sl-arrow {
  position: absolute; top: 46%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 26px; line-height: 1; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(15, 27, 45, 0.22);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.sl-prev { left: -14px; }
.sl-next { right: -14px; }
.sl-arrow:hover { background: #fff; }
.sl-arrow:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
@media (max-width: 520px) {
  /* Inside the card's edge on a narrow screen — at -14px they hung off the
     viewport and the left one was half unreachable. */
  .sl-prev { left: 4px; }
  .sl-next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) { .sl-arrow { transition: none; } }

.sl-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.sl-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.4); border: 0; padding: 0; cursor: pointer; transition: all 0.25s ease; }
.sl-dot.on { background: #fff; width: 24px; }
@media (prefers-reduced-motion: reduce) { .slider .slide.active { animation: none; } }

/* ---------- trust strip ---------- */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 26px 0; }
.trust-item { display: flex; align-items: center; gap: 12px; justify-content: center; }
.trust-item .ico {
  width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tint);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.trust-item .t { font-weight: 700; font-size: 14.5px; }
.trust-item .s { font-size: 12.5px; color: var(--mute); }

/* ---------- feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: all 0.25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card .ico {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 24px; margin-bottom: 18px; background: var(--bg-tint);
}
.card.accent .ico { background: #fceef6; }
.card h3 { font-family: var(--font-body); font-weight: 700; font-size: 17.5px; margin-bottom: 8px; }
.card p { color: var(--mute); font-size: 14.5px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 24px 28px; }
.step .n {
  position: absolute; top: -18px; left: 24px; width: 40px; height: 40px; border-radius: 12px;
  background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; box-shadow: 0 6px 14px rgba(217, 28, 129, 0.3);
}
.step h3 { font-family: var(--font-body); font-size: 16.5px; font-weight: 700; margin: 6px 0 8px; }
.step p { font-size: 14px; color: var(--mute); }

/* ---------- pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 20px; }
.price-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 22px; text-align: center; position: relative; transition: all 0.25s ease;
  display: flex; flex-direction: column;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue); }
.price-card.popular { border-color: var(--magenta); box-shadow: var(--shadow); }
.price-card .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 14px; border-radius: 999px; letter-spacing: 0.05em; white-space: nowrap;
}
.price-card .qty { font-size: 15px; font-weight: 600; color: var(--slate); }
.price-card .qty b { font-size: 30px; font-family: var(--font-head); color: var(--ink); display: block; line-height: 1.1; }
.price-card .amount { font-size: 26px; font-weight: 700; color: var(--blue); margin: 12px 0 2px; }
.price-card .per { font-size: 13px; color: var(--mute); margin-bottom: 8px; }
.price-card .save { font-size: 12.5px; color: var(--success); font-weight: 700; margin-bottom: 14px; min-height: 18px; }
.price-card .btn { margin-top: auto; }

/* ---------- comparison table ---------- */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.compare { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.compare thead th { background: var(--blue-deep); color: #fff; font-weight: 600; }
.compare tbody tr:nth-child(even) { background: var(--bg-soft); }
.compare td.yes { color: var(--success); font-weight: 700; }
.compare td.no { color: #b91c1c; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left; padding: 18px 22px;
  font-size: 16px; font-weight: 600; color: var(--ink); display: flex;
  justify-content: space-between; align-items: center; gap: 14px;
}
.faq-q .chev { transition: transform 0.25s; color: var(--blue); flex-shrink: 0; font-size: 18px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 22px 18px; color: var(--mute); font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad-deep); border-radius: var(--radius-lg); color: #fff; padding: 54px 48px; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 28, 129, 0.4), transparent 65%); top: -100px; right: -60px;
}
.cta-band-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 8px; }
.cta-band p { color: #c9d6e6; max-width: 480px; }

/* ---------- brands marquee ---------- */
.marquee { overflow: hidden; position: relative; padding: 8px 0; }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.brand-chip {
  background: #fff; border: 1px solid var(--line); padding: 10px 22px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--slate); white-space: nowrap;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stores-title { text-align: center; margin: 46px auto 20px; font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2.6vw, 24px); color: var(--ink); }
.store-wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 920px; margin: 0 auto; }
.store-chip {
  padding: 10px 22px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  font-weight: 700; font-size: 14px; color: var(--blue-deep); box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.store-chip:hover { transform: translateY(-3px); border-color: var(--blue); color: var(--blue); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #aab4c6; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; padding: 60px 0 40px; }
.footer-grid h4 { color: #fff; font-size: 15px; margin-bottom: 16px; letter-spacing: 0.03em; }
.footer-grid a { color: #aab4c6; display: block; padding: 5px 0; font-size: 14.5px; }
.footer-grid a:hover { color: #fff; }
.footer-brand img { height: 46px; margin-bottom: 14px; background: #fff; border-radius: 8px; padding: 5px; }
.footer-brand p { font-size: 14px; max-width: 280px; }
.footer-contact li { display: flex; gap: 10px; padding: 5px 0; font-size: 14.5px; align-items: flex-start; }
/* One child now, not two: the credit line came out on 2026-08-29, and its
   `.credit a` rule went with it. space-between is harmless with one child —
   the copyright sits left, where it already sat. */
.footer-bottom { border-top: 1px solid #2a3040; padding: 20px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { background: var(--grad-deep); color: #fff; padding: 64px 0 58px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 28, 129, 0.3), transparent 65%); top: -140px; right: -80px;
}
.page-hero h1 { font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 12px; position: relative; }
.page-hero p { color: #c9d6e6; max-width: 640px; font-size: 17px; position: relative; }
.crumbs { font-size: 13.5px; margin-bottom: 18px; color: #9fb2c8; position: relative; }
.crumbs a { color: #fff; }

/* ---------- forms (structure for later wiring) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--slate); }
.form-field label .req { color: var(--magenta); }
.form-field input, .form-field select, .form-field textarea {
  font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 103, 184, 0.13);
}
.form-field .hint { font-size: 12.5px; color: var(--mute); }
.form-field.error input { border-color: #dc2626; }
.form-field .err-msg { font-size: 12.5px; color: #dc2626; display: none; }
.form-field.error .err-msg { display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- utility ---------- */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.badge-note {
  display: inline-flex; align-items: center; gap: 8px; background: #fff7ed; color: var(--amber);
  border: 1px solid #fed7aa; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 10px;
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- floating contact stack ---------- */
/* The bottom-right column of round buttons in layouts/site.blade.php: the
   mobile-only CALL button above the WhatsApp bubble. Moved here 2026-08-30
   from an inline <style> in the layout — the stack needs a rule inside the
   768px breakpoint below, and split styling (half inline, half here) is how
   the two drift apart.

   Positioning lives on the WRAPPER, sizing on the buttons. `.call-float` is
   display:none here and display:flex inside the 768px block — deliberately the
   same specificity, later in the file, so order is what flips it; do not move
   this section below the RESPONSIVE blocks. `.wa-float`/`.call-float` carry
   their own display so the `.float-stack a` shared rule (higher specificity)
   can never override the call button's hide. */
.float-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.float-stack a {
  width: 56px; height: 56px; border-radius: 50%;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.float-stack a:hover { transform: scale(1.08); }
.wa-float { display: flex; background: #25D366; }
.call-float { display: none; background: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  .float-stack a { transition: none; }
  .float-stack a:hover { transform: none; }
}
@media (max-width: 640px) {
  .float-stack { right: 14px; bottom: 14px; gap: 10px; }
  .float-stack a { width: 52px; height: 52px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  /* Each badge is a flex row that CENTRES its own icon+text pair. At four
     across that is invisible, because every cell is the same width and the
     eye reads four separate columns. The moment the grid drops to two — and
     worse, to one on a phone — the four rows sit above each other and each
     one centres itself according to how long ITS text is, so the icons march
     leftwards down the list: "Instant Delivery" starts furthest right,
     "Licensed & Unique" furthest left. Nothing is misaligned by a bug; the
     centring simply stops being the right instruction once they stack.
     Aligning to the start puts every icon on one vertical line. */
  .trust-item { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-inner { grid-template-columns: 1fr; padding: 64px 0; }
  .hero-visual { order: -1; }
  /* The two .barcode-card overrides that were here forced slide 1 to the same
     width as the other three and dropped its 2.5deg tilt. Slide 1 is an image
     now, so it matches by construction. 2026-08-29. */

  /* GIVE THE CHROME ITS GUTTER BACK. `.container` exists to hold content 20px off
     the edge, and six elements silently throw that away: each of them composes
     `.container` in the markup AND sets the `padding` SHORTHAND in its own rule,
     so `padding: 64px 0` does not mean "64px top and bottom" — it means that AND
     "zero left and right", overwriting the gutter. They are later in the file than
     `.container` and equally specific, so they win.

     Measured at 393px on the homepage before this rule: `.hero-inner` computes
     `padding: 64px 0px`, and the h1, the lead paragraph and the first stat all
     start at x = 0 — hard against the edge of the screen, while `#product`'s
     container correctly starts its text at x = 65.8. Those three are precisely the
     items the client photographed as clipped: the "G" of Genuine, the "D" of
     "Don't", and the "3,000+". A glyph that starts at pixel zero reads as cut off
     on any phone, and on a curved-edge Android it genuinely is. The trust strip,
     the top bar, the logo, the hamburger and both footer rows had lost it too.

     `padding-inline` rather than repeating each rule's full shorthand: it sets the
     one axis that was lost and cannot disturb the vertical spacing any of these
     rules is actually there to set. Anything added to this list later needs the
     same treatment, so prefer `padding-block` in new rules on a `.container`.

     Scoped to 1024px and below, which is where the text is against the edge and
     where the client reported it. The same collision applies on desktop — the
     header, hero and footer sit 20px wider than every section between them — but
     that is a visible change to a signed-off desktop layout, so it is raised with
     the owner rather than made here. */
  .topbar-inner, .header-inner, .hero-inner,
  .trust-inner, .footer-grid, .footer-bottom { padding-inline: 20px; }
}

@media (max-width: 768px) {
  .section { padding: 54px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  /* THE HEADER MUST NOT FILTER ON MOBILE. `backdrop-filter` creates a containing
     block for `position: fixed` DESCENDANTS, and .nav is inside .header — so the
     menu's `inset: 0` resolved against the header's own box instead of the
     viewport. The white background covered only the header strip and the menu
     items spilled out over the hero, unreadable. Nothing about the menu's own
     rules was wrong; the cause was two elements away.

     Dropped rather than worked around: the header is already 94% opaque, so the
     blur was doing almost nothing on a phone. Taking it to fully opaque here
     costs nothing visible and removes the containing block entirely.

     AND IT IS WHAT KEEPS THE PAGE THE WIDTH OF THE PHONE. This line was written
     for the `inset: 0` bug above, but it is also the only thing standing between
     the client and the horizontal scroll he reported with screenshots: the
     drawer parks at `translateX(100%)`, so its box sits ENTIRELY off the right
     edge. `position: fixed` boxes do not extend the page — unless an ancestor is
     a containing block for them, at which point they behave like `absolute` and
     do. Measured at 393px on the homepage: with the blur back,
     `documentElement.scrollWidth` goes 394 -> 732, the drawer's box sitting at
     393.6 -> 732.1. That 338px is the blank white column with the nav links in
     it, and everything else being shifted is why text was clipped at BOTH edges.

     So the neutralisation covers the WHOLE family, not just the one property
     that happened to be here. `filter`, `transform`, `perspective`,
     `will-change` and `contain` each make an element a containing block for
     fixed descendants exactly as `backdrop-filter` does, and any one of them
     added to this header for a visual flourish would silently restore a bug the
     owner has already reported once. */
  /* AND IT MUST OUT-RANK THE SCRIM. Same family of bug as the line above, one
     property along: `position: sticky` + a z-index makes .site-header a STACKING
     CONTEXT, and a z-index on a descendant is resolved inside that context — it
     can never climb out. So .nav's 101 really meant "101 within the header's
     100". The scrim is a body-level element also at 100 and later in the
     document, so it won the tie and painted the dim OVER the drawer: the panel
     came up grey with the hero legible straight through it.

     Raising .nav again would have changed nothing, which is the trap. The HEADER
     is what has to beat the scrim. Any value above the scrim's 100 would do; 120
     leaves a gap rather than sitting at 101, so a later element can be slipped
     between the scrim and the header without renumbering all three. */
  .site-header {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    filter: none; transform: none; perspective: none;
    will-change: auto; contain: none;
    background: #fff; z-index: 120;
  }

  /* …and a header that paints above the scrim is a header that does not get
     dimmed. Left alone it put an undimmed white bar and a full-strength logo in
     the strip beside the panel, and the hamburger — a FLEX ITEM, so its z-index
     of 102 applies even though it is `position: static`, and 102 beats the
     drawer's 101 — turned into an X and sat ON the panel one row below the
     drawer's own close button. Two X's, and the bigger one was not the one that
     closes it.

     So while the drawer is open the header stops drawing itself. Nothing is
     lost: the drawer carries its own labelled close button, the scrim closes on
     tap, and Escape closes it. `visibility` rather than `opacity` so the hidden
     hamburger also leaves the tab order and the accessibility tree instead of
     staying focusable underneath the panel.

     `pointer-events` for the same reason one layer down: painting nothing does
     not stop the header being a full-width box ABOVE the scrim, and the top
     ~40px of the dimmed strip beside the panel went on swallowing taps, so "tap
     the dimmed page to close" silently did nothing up there. Hit-testing follows
     the stack, not the paint. The drawer takes its own events back. */
  body.nav-open .site-header {
    background: transparent; border-bottom-color: transparent; pointer-events: none;
  }
  body.nav-open .site-header .nav { pointer-events: auto; }
  body.nav-open .brand,
  body.nav-open .nav-toggle { visibility: hidden; }

  /* A DRAWER over the page, not a full-screen takeover. The page stays visible
     down the left edge, so you can still see where you were — a full-screen menu
     on a phone reads as having navigated away, and the only way back is the X.
     86% with a 380px ceiling leaves that strip on every phone width. */
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: 86%; max-width: 380px;
    background: #fff; flex-direction: column;
    gap: 0; transform: translateX(100%); transition: transform 0.28s ease;
    z-index: 101; font-size: 20px;
    align-items: stretch; justify-content: flex-start;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0; box-shadow: -8px 0 30px rgba(15, 27, 45, 0.18);
  }
  .nav.open { transform: translateX(0); }

  .nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0;
  }
  .nav-title { font-size: 21px; font-weight: 700; color: var(--ink); }
  .nav-close {
    border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer;
    color: var(--ink); padding: 0 4px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
  }

  /* Each link a full-width row with its own rule, so seven of them read as a
     list. The last one keeps its border because the block below is a different
     kind of thing, and the line is what says so. */
  .nav a {
    font-size: 17px; padding: 15px 22px; border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .nav a.active { color: var(--blue); font-weight: 600; }
  .nav a.active::after { content: none; }

  /* margin-top:auto pins this to the bottom when the list is short, and lets it
     sit after the last link when the list is long enough to scroll. */
  .nav-foot {
    display: flex; gap: 10px; padding: 18px 22px 24px; margin-top: auto;
    border-top: 1px solid var(--line); flex-shrink: 0;
  }
  .nav-foot .btn { flex: 1; justify-content: center; }

  /* THREE guards, and each one alone is enough — because getting this wrong makes
     the whole site untappable and nothing about it is visible.

     `display: block` here OVERRIDES the browser's own `[hidden] { display: none }`,
     so the scrim stayed in the layout while the menu was shut: invisible at
     opacity 0, full-viewport, z-index 100, swallowing every tap. Buy Now and
     Verify did nothing on a phone and there was no way to see why.

     1. `pointer-events: none` — taps pass straight through even if it IS painted.
        This is the one that matters; the others are belt.
     2. `[hidden]` re-asserted, since our own rule outranks the UA stylesheet.
     3. `visibility: hidden` — out of the accessibility tree too, so a screen
        reader does not meet a stray element over the page. */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 100;
    background: rgba(15, 27, 45, 0.5); border: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  }
  .nav-scrim[hidden] { display: none; }
  .nav-scrim.on {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav, .nav-scrim { transition: none; }
  }

  /* The float stack is `z-index: 999` — above the scrim AND above the
     drawer — and on a phone it is pinned bottom-right, which is exactly where
     .nav-foot puts Log In / Sign up. Open the drawer and a green circle sits on
     top of the Sign up button, taking the tap. Hidden while the drawer is open;
     it comes straight back on close. Targets the WRAPPER, so the call button
     added above the bubble can never be left floating over the drawer alone.
     The rule lives here rather than in the stack's own section, because hiding
     under the drawer is this breakpoint's presentation, not the stack's. */
  body.nav-open .float-stack { display: none; }

  /* The CALL button exists only from this breakpoint down — this breakpoint IS
     the mobile site (it is where the drawer takes over), and a desktop browser
     mostly cannot place a call. Base rule above the RESPONSIVE section keeps it
     display:none; same specificity, so this later rule wins here. */
  .call-float { display: flex; }

  .nav-toggle { display: flex; z-index: 102; }
  .header-cta .btn { display: none; }
  .topbar-inner { justify-content: center; }
  .topbar .gstin { display: none; }
  .cta-band { padding: 40px 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
}

@media (max-width: 520px) {
  .grid-4, .steps, .trust-inner { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .price-card { padding: 20px 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .btn-lg { padding: 14px 26px; font-size: 15.5px; }
  .hero-actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customer picker (public/assets/js/customer-picker.js) — appended 2026-08-29.
   The admin shell (layouts/app.blade.php) carries its CSS inline and never
   loads this file, so the script injects this same block at runtime wherever
   it actually runs; this copy is the reference, and covers any page that DOES
   load style.css. Keep the two identical. Fallback values are the admin
   shell's own tokens, for a page that defines none of these variables.
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-box { position: relative; }
.cp-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--card, #fff); border: 1px solid var(--line, #e5eaf1);
  border-radius: var(--r-sm, 8px); box-shadow: var(--sh-2, 0 4px 12px rgba(16, 32, 64, 0.12));
  max-height: 280px; overflow-y: auto;
}
.cp-results:empty { display: none; }
.cp-row { padding: 9px 11px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink, #16202e); }
.cp-row:hover, .cp-row.on { background: var(--blue-soft, #e8f1fb); color: var(--blue-dark, #00558f); }
/* the keyboard cursor must be visible on its own, not only on hover */
.cp-row.on { outline: 2px solid var(--blue, #0067b8); outline-offset: -2px; }
.cp-flag { color: var(--danger, #c0262d); font-weight: 600; }
.cp-empty { padding: 9px 11px; color: var(--muted, #63718a); font-size: 13.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Footer "Follow us" row (layouts/site.blade.php) — appended 2026-08-30.
   Exists only when the admin has filled a social URL in SEO Center; with all
   five boxes empty the markup is absent and the footer is unchanged. Colours
   follow .footer-grid's own link affordance (#aab4c6 resting, #fff on hover)
   on the --ink footer; .container supplies the 20px gutter, so only
   padding-block is set here (see the 1024px note above .footer-grid).
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 0 30px; }
.footer-social-label { color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: 0.03em; margin-right: 6px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #aab4c6; border: 1px solid #2a3040;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover { color: #fff; border-color: #aab4c6; transform: translateY(-2px); }
.footer-social svg { display: block; }
@media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } .footer-social a:hover { transform: none; } }