/* ============================================================
   Novri — styles.css  (consolidated clean build)
   Reduced from 2283 → ~700 lines by removing 5 stacked
   design-iteration blocks and deduplicating all conflicts.
   ============================================================ */

/* ── 1. Design tokens ────────────────────────────────────── */
:root {
  /* Brand / accent */
  --cyan:      #2acfcf;
  --cyan-d:    #24b7b7;
  --cyan-glow: rgba(42,207,207,.35);
  --cyan-text: #0b1a3a;
  --u1:        #2acfcf;
  --u2:        #12b29e;
  --ring:      rgba(24,176,169,.22);

  /* Surfaces */
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #f8fafc;

  /* Borders */
  --border:        rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.16);
  --line:          rgba(15,23,42,.12);

  /* Text */
  --ink:       #0f172a;
  --text:      #0f172a;
  --muted:     #617083;
  --ink-strong:#0f172a;
  --ink-muted: #334155;

  /* Layout */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ── 2. Reset & base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); overflow-x: hidden; scroll-behavior: smooth; }
html { scroll-padding-top: 84px; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--cyan-d); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 3. Layout ───────────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ── 4. Typography ───────────────────────────────────────── */
h1 { font-size: clamp(28px,4vw,56px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -.01em; }
h2 { font-size: clamp(22px,3vw,32px); margin: 0 0 10px; }
p.lead { font-size: 18px; color: var(--muted); }
.small { font-size: 13px; }
.muted { color: var(--muted); }

/* ── 5. Keyframe animations ──────────────────────────────── */
@keyframes fade-in     { from{opacity:0} to{opacity:1} }
@keyframes fade-in-up  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes pop         { from{transform:scale(.98)} to{transform:scale(1)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes dropdown    { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
@keyframes menu-in     { from{opacity:0;transform:translateY(-6px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes shimmer     { 100%{transform:translateX(100%)} }
@keyframes sweep       { 100%{background-position:0 0,0 0,0 0,120% 0} }
@keyframes skel        { 0%{background-position:100% 0} 100%{background-position:0% 0} }
@keyframes floaty      { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }

/* ── 6. Site header ──────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 2000;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(15,23,42,.04);
  animation: fade-in .24s ease both;
  transition: background .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1);
}
.site-header.scrolled {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border-bottom-color: rgba(15,23,42,.07);
  box-shadow: 0 1px 0 rgba(15,23,42,.03), 0 12px 32px -16px rgba(15,23,42,.14);
}
.nav {
  display: flex; align-items: center;
  justify-content: space-between;
  min-height: 60px; gap: 16px; position: relative;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
/* Three-column grid on desktop so nav-links sit on the true center of the
   header, not just the center of whatever space is left between the logo
   and the buttons (those two sides are different widths, so a simple flex
   centering reads as off-center). Logo and actions each get an equal 1fr
   track; the nav itself is auto-width and centered between them. Mobile
   keeps the original flex layout (nav-links becomes a slide-down overlay
   there, unaffected by this). */
@media (min-width: 901px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .nav-links { justify-self: center; min-width: 0; }
  .nav-actions { justify-self: end; }
  /* Safety net: a lone header button that isn't wrapped in .nav-actions would
     otherwise be a direct grid child and stretch to fill its whole 1fr
     column (grid items default to justify-self: stretch). */
  .nav > .btn.header-cta, .nav > .btn.header-login { justify-self: end; }
}
.brand {
  display: flex; gap: 8px; align-items: center;
  text-decoration: none; color: var(--ink);
  font-weight: 650; letter-spacing: -.02em; font-size: 15.5px;
  transition: opacity .2s cubic-bezier(.22,1,.36,1);
}
.brand:hover { opacity: .72; }
.brand .site-logo { width: 26px; height: 26px; display: inline-block; vertical-align: middle; border-radius: 6.5px; }
.logo { width: 26px; height: 26px; }
.logo svg { display: block; }

/* Nav links */
.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-links a {
  color: #475569; text-decoration: none; font-weight: 500; font-size: 13.5px;
  letter-spacing: -.01em;
  padding-bottom: 6px; position: relative;
  transition: color .25s cubic-bezier(.22,1,.36,1);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  transform: scaleX(0); transform-origin: center;
  background: var(--brand);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* Active nav link — consistent color + underline across all pages */
.nav-links a.active { color: var(--brand) !important; }
.nav-item > a.active { color: var(--brand) !important; }
.nav-item > a.active::after { content: "" !important; display: block !important; transform: scaleX(1) !important; }

/* Dropdown nav items (marketing pages) */
.nav-item { position: relative; display: inline-flex; }
.nav-item > a { display: inline-flex; align-items: center; }
.nav-item > a::after { content: none !important; display: none !important; }
.nav-item:hover > a::after { content: none !important; }
.nav-drop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-3px) scale(.98);
  padding-top: 12px; background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1);
  z-index: 200;
}
.nav-item:hover .nav-drop {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-drop-inner {
  background: rgba(255,255,255,.88); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(15,23,42,.06); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 40px -12px rgba(15,23,42,.18);
  padding: 7px; min-width: 206px;
  display: flex; flex-direction: column;
}
.nav-drop-inner a { padding: 8px 12px; border-radius: 9px; color: var(--ink); font-weight: 500; font-size: 13.5px; transition: background .15s cubic-bezier(.22,1,.36,1); }
.nav-drop-inner .drop-section { padding: 7px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
a.drop-section { text-decoration: none; border-radius: 7px; transition: background .15s cubic-bezier(.22,1,.36,1), color .15s ease; }
a.drop-section:hover { background: rgba(34,218,243,.08); color: #0891b2; }
.nav-drop-inner a:hover { background: rgba(15,23,42,.045); }

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; padding: 6px;
  flex-direction: column; justify-content: center; gap: 5px; align-items: center;
  border-radius: 8px; transition: background .2s cubic-bezier(.22,1,.36,1);
}
.hamburger:hover { background: rgba(15,23,42,.05); }
.hamburger .hb-line {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink, #0f172a); border-radius: 2px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .2s ease, width .3s ease;
  transform-origin: center;
}
.hamburger[aria-expanded="true"] .hb-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hb-line:nth-child(2) { opacity: 0; width: 0; }
.hamburger[aria-expanded="true"] .hb-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Header buttons — compact, precise, smooth */
.site-header .btn.header-cta {
  background: #22DAF3 !important; color: #0b1120 !important;
  border: none !important; border-radius: 999px !important;
  padding: 0 16px !important; height: 32px !important; display: inline-flex !important; align-items: center !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: -.005em !important;
  transition: background .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1) !important;
}
.site-header .btn.header-cta:hover {
  background: #16bdd8 !important;
  box-shadow: 0 6px 20px -4px rgba(34,218,243,.45) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}
.site-header .btn.header-cta:active { transform: translateY(0) scale(.97); }
.site-header .btn.header-login {
  background: transparent !important; color: #334155 !important;
  border: 1px solid rgba(15,23,42,.12) !important; border-radius: 999px !important;
  padding: 0 16px !important; height: 32px !important; display: inline-flex !important; align-items: center !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: -.005em !important;
  transition: background .2s cubic-bezier(.22,1,.36,1), border-color .2s cubic-bezier(.22,1,.36,1), color .2s ease !important;
}
.site-header .btn.header-login:hover {
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.2) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.site-header .btn.header-login:active { transform: scale(.97); }

/* ── 7. Buttons ──────────────────────────────────────────── */
a.btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; line-height: 1;
  border-radius: 8px; border: 1px solid var(--border-strong);
  letter-spacing: .15px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none !important; position: relative; overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
  background: #fff; color: var(--ink);
}
a.btn:hover, .btn:hover {
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;
  transform: none !important;
  filter: none !important;
}
.btn:active { transform: translateY(1px) !important; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

/* Primary / demo / secondary / sign-in — cyan pill button */
.btn.primary, .btn.demo, .btn.secondary, .signin-btn {
  background: #22DAF3 !important;
  color: #0b1120 !important;
  border: 1px solid #22DAF3 !important;
  border-radius: 999px !important;
  height: auto !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.btn.primary:hover, .btn.demo:hover, .btn.secondary:hover, .signin-btn:hover {
  background: #16bdd8 !important;
  border-color: #16bdd8 !important;
  box-shadow: 0 6px 20px rgba(34,218,243,.30) !important;
  transform: translateY(-1px) !important;
}
/* Shine sweep on these */
.btn.primary::after, .btn.demo::after, .btn.secondary::after, .signin-btn::after {
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.20) 45%, transparent 60%);
  transform: translateX(-130%); transition: transform .9s ease; opacity: .55; pointer-events: none;
}
.btn.primary:hover::after, .btn.demo:hover::after,
.btn.secondary:hover::after, .signin-btn:hover::after { transform: translateX(130%); }
.btn.primary::before { content: none !important; } /* no static gloss */

/* Ghost */
.btn.ghost {
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid rgba(15,23,42,.18) !important; box-shadow: none !important;
  border-radius: 999px !important;
}
.btn.ghost:hover { background: rgba(15,23,42,.05) !important; }

/* Tiny (receipt card actions) */
.btn.tiny { font-size: 12px; height: auto; padding: 6px 10px; border-radius: 10px; }

/* Icon-only */
.btn.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
  border: 1px solid var(--border-strong); background: #fff;
}
.btn.icon:hover { box-shadow: 0 0 0 4px var(--ring) !important; }

/* Badge */
.badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(15,23,42,.08); font-size: 12px; }

/* ── 8. Cards ────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 8px 26px rgba(15,23,42,.06);
  transform: translateZ(0);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(2,6,23,.12); }

/* ── 9. Forms ────────────────────────────────────────────── */
input, textarea, select {
  background: #fff; border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em - 2px), calc(100% - 13px) calc(1em - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* ── 10. Sign-in dropdown ────────────────────────────────── */
.signin-wrap { position: relative; display: inline-block; }
.signin-wrap .menu {
  position: absolute; right: 0; top: 110%; min-width: 190px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(15,23,42,.12);
  padding: 8px; display: none; z-index: 1000;
  animation: menu-in .14s ease-out both;
}
.signin-wrap .menu.open { display: block; }
.signin-wrap .menu a { display: block; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.signin-wrap .menu a:hover { background: #f3f4f6; }

/* ── 11. Footer ──────────────────────────────────────────── */
.site-footer { background: #fff; border-top: 1px solid var(--border); margin-top: 26px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; padding: 26px 0; }
.fineprint { border-top: 1px dashed var(--border); padding: 10px 0 30px; color: var(--muted); }

/* ── 12. Sections & page spacing ────────────────────────── */
main section { padding: 68px 0; }
section.container { margin-bottom: 68px; }
.page-title { margin-top: 64px; margin-bottom: 28px; }
.container > .card:not(:first-child),
.container > .grid:not(:first-child) { margin-top: 24px; }
main > .container:first-of-type { margin-top: 60px; }

/* ── 13. Hero ────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(360px,1.1fr) 1fr;
  gap: 48px; align-items: center;
  animation: fade-in-up .38s ease .05s both;
}
.hero h1 { font-size: clamp(40px,5vw,56px); letter-spacing: -0.01em; }
.hero .lead { font-size: 18px; color: var(--muted); }
.hero .hero-art { display: flex; justify-content: center; justify-self: end; }

/* Realistic phone frame in hero */
.hero .phone {
  position: relative; max-width: 360px; aspect-ratio: 9/19.5;
  background: #0b0f14; border-radius: 40px; padding: 14px;
  box-shadow: 0 24px 70px rgba(17,24,39,.18); border: 1px solid var(--border);
}
.hero .phone::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 40%; height: 14px; border-radius: 10px; background: #0b0f14;
  border: 1px solid rgba(255,255,255,.08);
}
.hero .phone::after {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 22%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.12);
}
.hero .screen {
  background: #f9fafb; border-radius: 26px; width: 100%; height: 100%;
  overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(17,24,39,.08);
}

/* Demo-page phone (non-hero) */
.phone { width: 320px; height: 640px; background: #0b0f14; border-radius: 40px; padding: 14px; box-shadow: var(--shadow); position: relative; }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 120px; height: 6px; border-radius: 3px; background: #1a1f24; }
.screen { background: #f9fafb; border-radius: 28px; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.06); }
.appbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
.app-logo { width: 22px; height: 22px; }
.app-title { font-weight: 600; color: #0f172a; }
.list { padding: 8px 10px; overflow: auto; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.store { font-weight: 600; }
.meta { font-size: 12px; color: #64748b; }
.amt { font-weight: 700; }
.detail { margin-top: 10px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 14px; }
.receipt-img { height: 160px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.receipt-img img, .u-thumb img { max-width: 100%; height: auto; object-fit: contain; }
.receipt-svg { filter: drop-shadow(0 8px 22px rgba(15,23,42,.12)); }

/* ── 14. Grids ───────────────────────────────────────────── */
.grid.two   { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.grid.three { display: grid; grid-template-columns: repeat(3,1fr); gap: 46px; }

/* ── 15. Demo widgets ────────────────────────────────────── */
.list-tools { display: flex; gap: 10px; align-items: center; padding: 8px 10px; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 8px 10px; }
.search input { border: 0; outline: 0; background: transparent; width: 100%; }
.demo-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed rgba(146,64,14,.35); background: #fffbeb; border-radius: 12px; color: #7c2d12; }
.demo-badge { background: #fef3c7; color: #7c2d12; border: 1px solid #fde68a; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.demo-tab.active { background: var(--cyan-d) !important; border-color: var(--cyan-d) !important; }
.demo-tab:hover:not(.active) { border-color: var(--cyan) !important; color: var(--cyan) !important; }

/* ── 16. FAQ accordion ───────────────────────────────────── */
.accordion .acc {
  width: 100%; text-align: left; background: #fff;
  border: 1px solid rgba(0,0,0,.09); padding: 16px 20px; margin: 0 0 4px;
  border-radius: 12px; font-weight: 600; font-size: 15px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, border-radius .18s ease;
}
.accordion .acc::after {
  content: "▾"; font-size: 18px; font-weight: 400; color: #9ca3af; flex-shrink: 0;
  line-height: 1.5; transition: transform .3s cubic-bezier(.22,1,.36,1), color .18s ease;
  margin-top: 1px;
}
.accordion .acc[aria-expanded="true"] { border-radius: 12px 12px 0 0; }
.accordion .acc[aria-expanded="true"]::after { transform: rotate(180deg); }
.accordion .panel {
  display: none;
  padding: 18px 20px 22px;
  margin: 0 0 4px;
  border: 1px solid rgba(0,0,0,.09); border-top: none;
  border-radius: 0 0 12px 12px; background: #f9fafb;
}
.accordion .panel.open { display: block; animation: acc-fade .18s ease; }
.accordion .panel p, .accordion .panel li { margin: 0 0 10px; line-height: 1.78; font-size: 15px; color: #374151; }
.accordion .panel p:last-child, .accordion .panel li:last-child { margin-bottom: 0; }
@keyframes acc-fade { from { opacity: 0; } to { opacity: 1; } }
.ftab.on { background: var(--cyan) !important; color: #111827 !important; border-color: var(--cyan) !important; }
.ftab:hover:not(.on) { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.acc[aria-expanded="true"] { background: var(--cyan) !important; color: #111827 !important; }

/* ── 17. Stat card hover ────────────────────────────────── */
.stats-trio > div {
  transition: transform .2s ease, box-shadow .2s ease;
}
.stats-trio > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  z-index: 1; position: relative;
}

/* ── 18. Toast ───────────────────────────────────────────── */
.toast { position: fixed; right: 18px; bottom: 18px; background: #0f7b6c; color: #fff; padding: 12px 14px; border-radius: 10px; box-shadow: var(--shadow); display: none; z-index: 3000; }

/* ── 18. Chips / tags ────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  background: rgba(42,207,207,.12); color: #0b3f39;
  border: 1px solid rgba(42,207,207,.2); font-weight: 600;
}
.chip--muted { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.chip .x { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ── 19. General menus / dropdowns ───────────────────────── */
.menu {
  display: none; background: #fff !important;
  border: 1px solid rgba(15,23,42,.1) !important;
  border-radius: 8px !important; padding: 6px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.15) !important; z-index: 20;
  animation: menu-in .14s ease-out both;
}
.menu.open { display: block !important; }
.menu-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 1.4;
  background: none; border: none; text-align: left; cursor: pointer; border-radius: 6px;
}
.menu-item:hover { background: #f1f5f9; }
.menu-item svg.icon { width: 16px; height: 16px; }
.menu-sep { border: none; border-top: 1px solid #e5e7eb; margin: 6px 0; }

/* Kebab actions popover */
.actions { position: relative; }
.actions .menu {
  position: absolute; right: 0; top: 110%; min-width: 200px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 6px; box-shadow: 0 18px 44px rgba(15,23,42,.12);
  display: none; z-index: 1000;
}
.actions .menu.open { display: block; }
.actions .menu button, .actions .menu a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 8px; background: transparent;
  border: 0; cursor: pointer; color: var(--ink); text-decoration: none; font-weight: 600;
}
.actions .menu button:hover, .actions .menu a:hover { background: #f3f4f6; }

/* Icon helpers */
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.btn .icon, .btn.icon .icon { width: 18px; height: 18px; }
.rc-actions .icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 6px; border-radius: 8px; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }

/* ── 20. Receipt dashboard ───────────────────────────────── */

/* Header row */
.receipts-header {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.receipts-header > h2 { margin: 0; }
.receipt-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.filters-row, .bulk-row, .actions-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Uniform control height */
.receipts-header select,
.receipts-header input[type="search"],
.receipts-header button,
.receipts-header .btn {
  height: 36px; padding: 0 12px; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
}
.receipts-header .btn.icon { width: 36px; padding: 0; justify-content: center; }
.receipts-header .icon { width: 18px; height: 18px; }
#searchInput { min-width: 220px; flex: 1 1 260px; }
#bulkMenu { position: absolute; right: 0; top: calc(100% + 6px); }

/* Warranty/Returns header controls alignment */
#tfRange, #bulkToggle, #optsBtn { height: 36px !important; }
#tfRange { line-height: 36px !important; padding: 0 12px !important; border-radius: 12px; }
#bulkToggle { display: inline-flex !important; align-items: center !important; gap: 6px; padding: 0 12px !important; line-height: 1 !important; }
#optsBtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; padding: 0 !important; }
#optsBtn .icon { width: 18px !important; height: 18px !important; }

/* Receipt filters */
#receiptFilters input, #receiptFilters select { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; font: inherit; }

/* Receipt grid */
.receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr));
  gap: 14px; margin-top: 12px;
}

/* Receipt card */
.receipt-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 14px;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  min-width: 0; will-change: transform;
}
.receipt-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(2,6,23,.09); }
.receipt-card:active { transform: translateY(0); }

/* Card internals */
.rc-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; min-width: 0; }
.rc-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; color: #0b3f39;
  background: radial-gradient(120% 120% at 30% 25%, rgba(42,207,207,.35), rgba(18,178,158,.35) 60%, rgba(15,123,108,.25));
}
.rc-title { min-width: 0; flex: 1; }
.rc-store { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-meta  { color: #64748b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-amt   { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.rc-tags  { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.rc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* Receipt toolbar */
.receipt-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.receipt-toolbar .spacer { flex: 1; }

/* Empty state */
.empty-state { margin: 14px 0 4px; padding: 24px; border: 1px dashed #cbd5e1; border-radius: 12px; text-align: center; color: var(--muted); }
.empty-state .muted { margin: 6px 0 12px; }

/* Bulk actions bar */
.bulk-actions { display: none; gap: 8px; }
.bulk-actions.show { display: flex; }

/* Member pill */
.member-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 999px; border: 1px solid rgba(15,23,42,.16);
  background: #fff; color: #0f172a; font: inherit; font-weight: 600; cursor: pointer;
}
.member-pill:hover { box-shadow: 0 0 0 3px rgba(15,23,42,.10); }
.member-pill strong { letter-spacing: .5px; }

/* ── 21. Receipt modal ───────────────────────────────────── */
.receipt-modal[hidden] { display: none !important; }
.receipt-modal__backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.45); backdrop-filter: blur(2px); }
.receipt-modal__panel { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; }
.receipt-modal__panel > form,
.receipt-modal__panel > div[role="dialog"] {
  background: #fff; color: #0b0f14; width: min(640px,92vw);
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.2); position: relative;
}
.receipt-modal__close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.rm-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rm-table th, .rm-table td { padding: 8px 6px; border-bottom: 1px solid #e2e8f0; }
.rm-table thead th { text-align: left; color: #475569; font-weight: 600; font-size: 13px; }
.t-right { text-align: right; }
.t-center { text-align: center; }

/* ── 22. Charts ──────────────────────────────────────────── */
.chart-wrap { width: 100%; overflow: auto; }
.chart-wrap canvas { width: 100% !important; height: auto !important; display: block; }
.chart-legend { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; }
.chart-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }

/* ── 23. Progress bars ───────────────────────────────────── */
.progress-row { display: flex; gap: 10px; flex-wrap: wrap; }
.progress { position: relative; width: 100%; height: 10px; border-radius: 999px; background: #eef2f7; overflow: hidden; border: 1px solid var(--border); }
.progress > span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-d));
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}

/* ── 24. Eco grid ────────────────────────────────────────── */
.eco-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; }
.eco-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.eco { display: flex; gap: 16px; align-items: center; }
.eco .bar { flex: 1; height: 10px; background: #e2f2ee; border-radius: 999px; position: relative; }
.eco .bar > span { position: absolute; left: 0; top: 0; height: 10px; background: linear-gradient(90deg, var(--cyan), var(--cyan-d)); border-radius: 999px; }
#ecoBar { background: linear-gradient(90deg, var(--cyan), var(--cyan-d)); }

/* ── 25. Analytics controls ──────────────────────────────── */
.ana-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; max-width: 100%; min-width: 0; }
#tfCustomInputs { display: none; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; max-width: 100%; min-width: 0; }
#tfCustomInputs input { min-width: 0; }

/* ── 26. Warranty / Returns lists ────────────────────────── */
#retList, #warList { display: grid; gap: 8px; padding-left: 0; margin-top: 12px; list-style: none; }
#retList > li, #warList > li { padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,.08); }
#retList > li:last-child, #warList > li:last-child { border-bottom: none; }

/* ── 27. Skeleton loaders ────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; background: #eef2f7; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
.skel-line { height: 12px; border-radius: 6px; background: #eef2f7; }
.skel-line.sm { height: 8px; }
.skel-line.lg { height: 16px; }
.skel-avatar { width: 44px; height: 44px; border-radius: 50%; background: #eef2f7; }
.skel-row {
  height: 72px; border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%; animation: skel 1.2s ease-in-out infinite;
}
.chart-skel {
  display: grid; grid-template-columns: repeat(12,1fr);
  align-items: end; gap: 10px; height: 260px; padding: 16px 12px 34px;
}
.chart-skel > div {
  height: 40%; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%; animation: skel 1.2s ease-in-out infinite;
}
.chart-skel > div:nth-child(3n+1) { height: 55%; }
.chart-skel > div:nth-child(4n+2) { height: 30%; }
.chart-skel > div:nth-child(5n+3) { height: 70%; }
.chart-skeleton {
  height: 260px; border-radius: 12px;
  background:
    radial-gradient(120px 60px at 20% 60%, rgba(148,163,184,.25) 10%, transparent 60%),
    radial-gradient(160px 70px at 45% 45%, rgba(148,163,184,.2)  10%, transparent 60%),
    radial-gradient(120px 60px at 70% 65%, rgba(148,163,184,.18) 10%, transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  background-size: auto, auto, auto, 220% 100%;
  background-position: 0 0, 0 0, 0 0, -120% 0;
  animation: sweep 1.6s infinite;
}

/* No borders on skeleton cards/charts */
#receiptGridSkel .receipt-card,
.receipt-grid[aria-hidden="true"] .receipt-card,
#anaBreakdownSkel .receipt-card,
.receipt-card.skeleton,
#anaGridSkel .card,
.analytics-grid[aria-hidden="true"] .card,
.chart-skeleton, .chart-skel,
#retChartSkel.chart-skel, #warChartSkel.chart-skel,
#anaChartSkel.chart-skeleton {
  border: 0 !important; box-shadow: none !important; outline: none !important;
}
#receiptGridSkel .receipt-card,
.receipt-card.skeleton { background: #e5e7eb !important; }

#retListSkel, #warListSkel { display: grid; gap: 8px; padding-left: 0; margin-top: 12px; list-style: none; }

/* ── 28. Loading overlay & spinner ───────────────────────── */
.loading-overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.65); backdrop-filter: blur(2px);
  z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.loading-overlay.show { opacity: 1; pointer-events: auto; }
.loader {
  width: 44px; height: 44px; border-radius: 50%;
  background:
    conic-gradient(from 90deg at 50% 50%, rgba(42,207,207,0) 0 55%, rgba(42,207,207,.95) 56% 100%),
    radial-gradient(circle at 50% 50%, #fff 45%, transparent 46%);
  animation: spin .8s linear infinite;
  box-shadow: 0 6px 18px rgba(42,207,207,.25);
}

/* ── 29. Segment control (analytics tabs) ────────────────── */
.seg { border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; gap: 8px; }
.seg button + button { border-left: 0 !important; }
.seg button { border: 1px solid rgba(15,23,42,.16); border-radius: 999px; background: #fff; font: inherit; cursor: pointer; padding: 6px 12px; }
.seg button[aria-pressed="true"] { background: #eef2f7; border-color: rgba(15,23,42,.22); }
.seg button:focus { outline: none; }
.seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ── 30. Scroll-reveal utilities ────────────────────────── */
[data-anim] { opacity: 0; transform: translateY(28px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
[data-anim].in { opacity: 1; transform: translateY(0); }
[data-anim="fade"] { opacity: 0; transform: none; transition: opacity .55s ease; }
[data-anim="fade"].in { opacity: 1; }
[data-anim="up-big"] { opacity: 0; transform: translateY(56px); transition: opacity .78s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1); }
[data-anim="up-big"].in { opacity: 1; transform: translateY(0); }
[data-anim="scale-in"] { opacity: 0; transform: scale(.88); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
[data-anim="scale-in"].in { opacity: 1; transform: scale(1); }
[data-anim-d="1"] { transition-delay: .10s; }
[data-anim-d="2"] { transition-delay: .22s; }
[data-anim-d="3"] { transition-delay: .34s; }
[data-anim-d="4"] { transition-delay: .46s; }
[data-anim-d="5"] { transition-delay: .58s; }
.lift { transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.10), 0 0 0 1px rgba(34,218,243,.13), 0 0 24px rgba(34,218,243,.08); }

/* ── 34. Decorative layer ────────────────────────────────── */

/* Hero gradient orbs — two soft cyan blobs behind hero text */
.hero-wrap { position:relative; }
.hero-wrap > .container { position:relative; z-index:1; }
.hero-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 108% -15%, rgba(34,218,243,.09) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at -8% 110%, rgba(34,218,243,.06) 0%, transparent 50%);
}

/* Section labels — small cyan rule prefix */
.sec-lbl { display:inline-flex !important; align-items:center; gap:7px; margin-bottom:16px; }
.sec-lbl::before {
  content:''; display:block; flex-shrink:0;
  width:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #22DAF3, rgba(34,218,243,.15));
}

/* Highlighted metric card cyan top accent */
.sc.hi { border-top:3px solid #22DAF3 !important; }
.sr.hi { border-top:3px solid #22DAF3 !important; }

/* Product screenshots — subtle cyan glow halo */
.product-preview-img { filter:drop-shadow(0 0 48px rgba(34,218,243,.10)); }

/* Dark strip — internal radial glow */
.free-strip { position:relative; overflow:hidden; }
.free-strip::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 450px 280px at 85% 50%, rgba(34,218,243,.14) 0%, transparent 60%);
}
.free-strip > * { position:relative; z-index:1; }

/* Checkout lifestyle photo styling */
.checkout-photo {
  border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  object-fit:cover; display:block;
}

/* ── 31. Animation utilities ────────────────────────────── */
html.auth-booting body { opacity: 0; }
body { transition: opacity .28s ease, filter .28s ease; }
.fade-in    { animation: fade-in .32s ease both; }
.fade-in-up { animation: fade-in-up .36s cubic-bezier(.2,.7,.2,1) both; }
.pop        { animation: pop .18s ease-out both; }
.floaty     { animation: floaty 6s ease-in-out infinite; }
.stagger > * { opacity: 0; animation: fade-in-up .4s ease both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.anim-delay-1 { animation-delay: .06s !important; }
.anim-delay-2 { animation-delay: .12s !important; }
.anim-delay-3 { animation-delay: .18s !important; }

/* ── 32. Responsive breakpoints ─────────────────────────── */

/* Nav hamburger at 900px */
@media (max-width: 900px) {
  .nav { position: relative !important; }
  .hamburger { display: flex !important; }
  .nav-links {
    position: absolute !important; top: 68px; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 20px 48px rgba(15,23,42,.10);
    padding: 12px 16px;
    display: flex !important;
    flex-direction: column; gap: 10px; z-index: 1999;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: max-height 0.36s cubic-bezier(.22,1,.36,1),
                opacity 0.22s cubic-bezier(.22,1,.36,1),
                transform 0.22s cubic-bezier(.22,1,.36,1);
  }
  .nav-links.open {
    max-height: 700px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    overflow: visible;
  }
  /* Staggered mobile nav item entrance — opacity only, no translateY (panel already moves) */
  .nav-links > * {
    opacity: 0;
    transition: opacity .18s ease;
    transition-delay: 0s;
  }
  .nav-links.open > *:nth-child(1)  { opacity:1; transition-delay:.06s; }
  .nav-links.open > *:nth-child(2)  { opacity:1; transition-delay:.10s; }
  .nav-links.open > *:nth-child(3)  { opacity:1; transition-delay:.14s; }
  .nav-links.open > *:nth-child(4)  { opacity:1; transition-delay:.18s; }
  .nav-links.open > *:nth-child(5)  { opacity:1; transition-delay:.22s; }
  .nav-links.open > *:nth-child(6)  { opacity:1; transition-delay:.26s; }
  .nav-links.open > *:nth-child(7)  { opacity:1; transition-delay:.30s; }
  .nav-links.open > *:nth-child(8)  { opacity:1; transition-delay:.34s; }
  .nav-links.open > *:nth-child(9)  { opacity:1; transition-delay:.38s; }
  .nav-links.open > *:nth-child(10) { opacity:1; transition-delay:.42s; }
  /* Hide "Retailer inquiry" CTA — accessible via hamburger menu on mobile */
  .site-header .btn.header-cta { display: none !important; }
  /* Hide Log in button on mobile — moved into hamburger on marketing pages */
  .site-header .btn.header-login { display: none !important; }
  /* Hide standalone Log out in dashboard header on mobile — shown in hamburger */
  .site-header #signOutBtn { display: none !important; }
  /* Retailer inquiry link — styled as cyan accent in mobile nav */
  .mob-retailer-inquiry { display: block !important; font-weight: 700 !important; color: #0891b2 !important; border-top: 1px solid rgba(15,23,42,.08); margin-top: 6px; padding-top: 10px !important; }
  /* Log in / Dashboard / Portal link — teal accent in mobile nav */
  .mob-login-link { display: block !important; font-weight: 600 !important; color: #0891b2 !important; }
  /* Log out link — shown in hamburger on mobile (dashboard pages) */
  .mob-signout { display: block !important; font-weight: 600 !important; color: #dc2626 !important; border-top: 1px solid rgba(15,23,42,.08); margin-top: 6px; padding-top: 10px !important; cursor: pointer; }
}
/* Mobile-only links — hidden on desktop */
.mob-retailer-inquiry { display: none; }
.mob-login-link { display: none; }
.mob-signout { display: none; }

/* Mobile footer: 4-col grid collapses to 2-col on small screens */
@media (max-width: 680px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}

/* Hero collapses at 980px */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hero .hero-art { justify-self: start !important; }
}

/* Grids stack at 820px */
@media (max-width: 820px) {
  .grid.two, .grid.three { grid-template-columns: 1fr !important; }
}

/* Mobile portrait at 680px */
@media (max-width: 680px) {
  .hero { padding-top: 72px; gap: 22px; }
  .hero h1 { font-size: clamp(34px,9.5vw,44px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
  .hero .lead { font-size: 16px; line-height: 1.5; }
  .hero .hero-art { order: 2; justify-self: center; }
  .hero .phone { width: min(88vw,380px); aspect-ratio: 9/19.5; margin: 0 auto; }
  .hero .screen { border-radius: 22px; }
  main section { padding-top: 56px; padding-bottom: 56px; }
  .receipt-grid { grid-template-columns: 1fr !important; }
  .receipt-card { padding: 12px; }
  .rc-head { grid-template-columns: 40px 1fr auto; gap: 8px; }
  .receipts-header { flex-direction: column; align-items: flex-start; }
  .receipts-header .receipt-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  #searchInput { flex: 1 1 100%; min-width: 0; }
  .member-pill { order: 3; }
}

/* Small phones at 480px */
@media (max-width: 480px) {
  .site-header .btn.primary { font-size: 14px !important; padding: 8px 12px !important; }
  .nav-links a { font-size: 14px !important; }
  .receipt-grid { grid-template-columns: 1fr; }
  .ana-controls { margin-left: 0; width: 100%; }
  .ana-controls .btn, #tfCustomInputs .btn { padding: 8px 10px; height: 36px; }
}

/* Tiny phones at 380px */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(30px,9.8vw,40px); }
  a.btn, .btn { padding: 9px 12px; }
}

/* Ultra-narrow at 340px */
@media (max-width: 340px) {
  .receipt-grid { grid-template-columns: 1fr !important; }
}

/* ── 33. Accessibility ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .blob { opacity: 0 !important; }
  [data-anim], [data-anim].in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 35. Background animations ───────────────────────────── */
.anim-bg { position: relative; overflow: hidden; }
.anim-bg > :not(.blob):not(.particle):not(.wave-mask) { position: relative; z-index: 1; }

/* ─ 10 circular blobs ─ */
.blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

.blob-a { width:740px; height:660px; background:radial-gradient(circle, rgba(34,218,243,.30) 0%, rgba(34,218,243,.09) 45%, transparent 68%); top:8%;   left:3%;   animation:blob-drift-a  9s ease-in-out infinite; }
.blob-b { width:620px; height:560px; background:radial-gradient(circle, rgba(34,218,243,.22) 0%, rgba(34,218,243,.07) 45%, transparent 68%); bottom:6%; right:3%;  animation:blob-drift-b 12s ease-in-out infinite 1s; }
.blob-c { width:500px; height:460px; background:radial-gradient(circle, rgba(34,218,243,.18) 0%, rgba(34,218,243,.05) 45%, transparent 68%); top:38%;  left:42%;  transform:translate(-50%,-50%); animation:blob-drift-c 14s ease-in-out infinite 3s; }
.blob-d { width:400px; height:360px; background:radial-gradient(circle, rgba(34,218,243,.24) 0%, rgba(34,218,243,.07) 45%, transparent 68%); top:6%;   right:10%; animation:blob-drift-d 11s ease-in-out infinite 2s; }
.blob-e { width:320px; height:290px; background:radial-gradient(circle, rgba(34,218,243,.18) 0%, transparent 65%); bottom:10%; left:15%;  animation:blob-drift-a 15s ease-in-out infinite 5s; }
.blob-f { width:260px; height:240px; background:radial-gradient(circle, rgba(34,218,243,.22) 0%, transparent 65%); top:52%;   right:18%; animation:blob-drift-b 10s ease-in-out infinite 7s; }
.blob-g { width:460px; height:420px; background:radial-gradient(circle, rgba(34,218,243,.14) 0%, transparent 65%); top:25%;   left:55%;  animation:blob-drift-d 13s ease-in-out infinite 4s; }
.blob-h { width:350px; height:310px; background:radial-gradient(circle, rgba(34,218,243,.20) 0%, transparent 65%); bottom:20%; right:30%; animation:blob-drift-a 11s ease-in-out infinite 9s; }
.blob-i { width:280px; height:260px; background:radial-gradient(circle, rgba(34,218,243,.16) 0%, transparent 65%); top:65%;   left:28%;  animation:blob-drift-c 16s ease-in-out infinite 2s; }
.blob-j { width:340px; height:300px; background:radial-gradient(circle, rgba(34,218,243,.12) 0%, transparent 65%); top:18%;   left:38%;  animation:blob-drift-b 18s ease-in-out infinite 6s; }



/* ─ Keyframes ─ */
@keyframes blob-drift-a {
  0%   { transform:translate(0,     0)     scale(1);    }
  25%  { transform:translate(140px, 90px)  scale(1.12); }
  50%  { transform:translate(70px,  180px) scale(.91);  }
  75%  { transform:translate(-95px, 100px) scale(1.09); }
  100% { transform:translate(0,     0)     scale(1);    }
}
@keyframes blob-drift-b {
  0%   { transform:translate(0,       0)      scale(1);    }
  30%  { transform:translate(-120px, -80px)   scale(1.11); }
  60%  { transform:translate(-55px,  -170px)  scale(.92);  }
  80%  { transform:translate(80px,   -90px)   scale(1.08); }
  100% { transform:translate(0,       0)      scale(1);    }
}
@keyframes blob-drift-c {
  0%   { transform:translate(-50%,-50%) scale(1);    }
  33%  { transform:translate(-66%,-34%) scale(1.14); }
  66%  { transform:translate(-34%,-66%) scale(.88);  }
  100% { transform:translate(-50%,-50%) scale(1);    }
}
@keyframes blob-drift-d {
  0%   { transform:translate(0,     0)     scale(1);    }
  40%  { transform:translate(-80px, 110px) scale(1.10); }
  70%  { transform:translate(65px,  75px)  scale(.93);  }
  100% { transform:translate(0,     0)     scale(1);    }
}

/* ── Scroll progress bar ──────────────────────────────── */
#scroll-progress{position:fixed;top:0;left:0;z-index:9999;height:3px;width:0%;background:linear-gradient(90deg,#22DAF3 0%,#0891b2 100%);pointer-events:none;transition:width .08s linear;border-radius:0 2px 2px 0}

/* ── Cursor glow ──────────────────────────────────────── */
#cursor-glow{position:fixed;top:0;left:0;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(34,218,243,.07) 0%,rgba(34,218,243,.025) 40%,transparent 65%);pointer-events:none;z-index:9997;will-change:transform}

/* ── Glassmorphism cards inside anim-bg sections ─────── */
.anim-bg .fcard{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.anim-bg .card{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* ── Wave mask (lives INSIDE the hero, creates wavy bottom boundary) */
.wave-mask{position:absolute;bottom:0;left:0;right:0;height:90px;z-index:2;overflow:hidden;pointer-events:none;line-height:0}
.wave-mask svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.wave-mask svg.wave-back{opacity:.55;animation:wave-slide 13s linear infinite}
.wave-mask svg.wave-front{animation:wave-slide 8s linear infinite reverse}
@keyframes wave-slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ── Logo marquee ─────────────────────────────────────── */
.marquee-track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent 0%,#fff 8%,#fff 92%,transparent 100%);mask:linear-gradient(90deg,transparent 0%,#fff 8%,#fff 92%,transparent 100%)}
.marquee-inner{display:inline-flex;align-items:center;gap:clamp(22px,3vw,50px);animation:wave-slide 26s linear infinite;user-select:none;will-change:transform}
.marquee-inner:hover{animation-play-state:paused}
.marquee-logo{font-size:14px;font-weight:700;color:#9ca3af;letter-spacing:-.01em;white-space:nowrap}

/* ── App store badge hover ─────────────────────────────── */
.app-badge{transition:transform .18s ease,box-shadow .18s ease !important}
.app-badge:hover{transform:translateY(-2px) !important;box-shadow:0 8px 28px rgba(0,0,0,.28) !important}

/* ── Dark footer ─────────────────────────────────────────── */
.site-footer { background:#0b1120!important; border-top:1px solid rgba(255,255,255,.08)!important; }
.site-footer a, .site-footer a span { color:rgba(255,255,255,.7)!important; }
.site-footer a:hover, .site-footer a:hover span { color:#22DAF3!important; }
.site-footer p { color:rgba(255,255,255,.55)!important; } /* a11y: .42 failed WCAG contrast (4.08:1) on #0b1120; .55 = 6.2:1 */
.site-footer li a { color:rgba(255,255,255,.65)!important; }
.site-footer li a:hover { color:#22DAF3!important; }

/* ── CTA button idle glow pulse ──────────────────────────── */
@keyframes btn-glow-idle {
  0%, 55%, 100% { box-shadow: none; }
  78% { box-shadow: 0 0 22px 4px rgba(34,218,243,.22); }
}
.btn.primary:not(:hover) {
  animation: btn-glow-idle 3.8s ease-in-out infinite;
}

/* ── Back to top ─────────────────────────────────────────── */
#back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 1400;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(11,17,32,.85); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(34,218,243,.25); color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
  transform: translateY(6px);
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#back-to-top:hover {
  background: rgba(34,218,243,.12);
  border-color: rgba(34,218,243,.5);
  box-shadow: 0 4px 16px rgba(34,218,243,.18);
}
#back-to-top svg { display: block; }

/* ── Footer social links ────────────────────────────────── */
.footer-social-link {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s; text-decoration: none !important;
  flex-shrink: 0;
}
.footer-social-link:hover {
  background: rgba(34,218,243,.15) !important;
  border-color: rgba(34,218,243,.4) !important;
}

/* ── Page transitions (View Transitions API) ────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }

/* ── App store badges (coming soon state) ───────────────── */
.app-badge { pointer-events: none; opacity: 0.68; cursor: default; }

/* ── Accessibility ───────────────────────────────────────── */
.skip-link {
  position: absolute; top: -48px; left: 16px; z-index: 9999;
  background: #22DAF3; color: #0b1120; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; }
a:focus-visible {
  outline: 2px solid #22DAF3;
  outline-offset: 2px;
  border-radius: 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Dropdown nav: keyboard + closed-state fix, plus a clean drop-in motion.
   The per-page rules only toggle opacity, so both live here with !important. */
.nav-drop {
  visibility: hidden;
  transform: translateX(-50%) translateY(7px) !important;
  transition: opacity .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1), visibility 0s linear .2s !important;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
  transition: opacity .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1) !important;
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop, .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
    transition: none !important; transform: translateX(-50%) !important;
  }
}

/* ── Engineered accents (marketing) ──────────────────────
   Mono system labels. Restrained on purpose. */
.hero-eyebrow, .sec-lbl {
  font-family: 'SF Mono', 'Fira Code', ui-monospace, Menlo, monospace !important;
  letter-spacing: .16em !important;
}
.sc-n, .sr-n { font-variant-numeric: tabular-nums; }
.code-wrap { position: relative; padding-top: 44px !important; }
.code-wrap::before {
  content: ''; position: absolute; top: 17px; left: 22px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff5f57; box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840; opacity: .85;
}
.pos-chip span:not(.soon)::before { animation: novri-live 2.4s ease-in-out infinite; }
@keyframes novri-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,218,243,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(34,218,243,0); }
}

/* ── Desktop perf: cap the extreme glass blurs. blur(200px) costs a lot of
   GPU per frame and looks near-identical to blur(40px) at these opacities. */
@media (min-width: 769px) {
  html body .card, html body .fcard {
    backdrop-filter: blur(40px) saturate(220%) brightness(1.12) contrast(1.04) !important;
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.12) contrast(1.04) !important;
  }
  html body .bt {
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  }
  html body .nav-drop-inner {
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  }
}
/* Five ambient blobs are enough - the second five doubled the animation
   cost for no visible gain. */
.blob-f, .blob-g, .blob-h, .blob-i, .blob-j { display: none !important; }

/* Mobile: heavy liquid-glass blurs are too expensive on phone GPUs. The
   per-page glass styles use !important, so these need higher specificity. */
@media (max-width: 768px) {
  html body .card, html body .fcard, html body .sc, html body .bt,
  html body .site-header, html body .nav-drop-inner, html body .nav-links {
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  }
  html, body { background-attachment: scroll !important; }
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lb-trigger { cursor: zoom-in; display: block; }
.lb-trigger:hover { opacity: .92; }
#lb-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; opacity: 0;
  transition: opacity .22s ease;
}
#lb-overlay.lb-active { display: flex; }
#lb-overlay.lb-open   { opacity: 1; }
#lb-overlay img {
  max-width: min(92vw, 1200px); max-height: 88vh;
  border-radius: 12px; box-shadow: 0 32px 96px rgba(0,0,0,.55);
  object-fit: contain; cursor: zoom-out;
  transform: scale(.94); transition: transform .22s cubic-bezier(.22,1,.36,1);
}
#lb-overlay.lb-open img { transform: scale(1); }
#lb-close {
  position: fixed; top: 18px; right: 22px;
  background: rgba(255,255,255,.14); border: none; border-radius: 50%;
  width: 42px; height: 42px; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
#lb-close:hover { background: rgba(255,255,255,.28); }

/* ── Receipt savings calculator ───────────────────────────────── */
.calc-block { margin: 28px 0 32px; padding: 28px 32px; background: #f8fafc; border: 1px solid rgba(34,218,243,.2); border-radius: 16px; }
.calc-header { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #0bb8cc; margin: 0 0 18px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 15px; color: #374151; }
.calc-row strong { font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.03em; }
.calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #e2e8f0; outline: none; margin: 4px 0 8px; cursor: pointer; }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #22DAF3; cursor: pointer; box-shadow: 0 2px 8px rgba(34,218,243,.4); border: 2px solid #fff; transition: transform .15s ease; }
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #22DAF3; cursor: pointer; border: 2px solid #fff; }
.calc-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; margin-bottom: 22px; }
.calc-results { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media(max-width:600px) { .calc-results { grid-template-columns: 1fr; } }
.calc-r { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; }
.calc-r.highlight { background: #0b1120; border-color: #22DAF3; }
.calc-r-lbl { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.calc-r.highlight .calc-r-lbl { color: #94a3b8; }
.calc-r-val { font-size: 22px; font-weight: 800; color: #111827; letter-spacing: -.03em; line-height: 1.1; }
.calc-r.highlight .calc-r-val { color: #22DAF3; }
.calc-r-sub { font-size: 13px; color: #94a3b8; margin-top: 4px; }
.calc-note { font-size: 11px; color: #9ca3af; margin: 14px 0 0; line-height: 1.5; }
.calc-slider-dark { background: rgba(255,255,255,.1); }
.calc-slider-dark::-webkit-slider-thumb { box-shadow: 0 2px 12px rgba(34,218,243,.5); }