:root{
  --brand:#116b5f; /* teal */
  --brand-ink:#0b3f39;
  --ink:#0f172a;  /* slate-900 */
  --muted:#475569;/* slate-600 */
  --bg:#f6faf9;   /* soft mint bg */
  --card:#ffffff;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --demo:#92400e; /* amber-800 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 10% -10%, rgba(17,107,95,.08), transparent 40%),
    var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid rgba(15,23,42,.06); z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:20px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.2px}
.logo{width:30px;height:30px}
.logo svg{display:block}
.nav-links{display:flex;gap:18px;align-items:center}
/* Mobile dropdown animation */
@keyframes dropdown { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }
.nav-links a{color:var(--muted);text-decoration:none;font-weight:700}
.nav-links a.active{color:var(--ink)}
.hamburger{display:none;border:0;background:transparent;font-size:24px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--ink);text-decoration:none;font-weight:800;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:#fff;border-color:rgba(15,23,42,.2);color:var(--ink)}
.btn.secondary{border-color:var(--brand);color:var(--brand);background:#fff}
.btn.demo{background:var(--demo);border-color:var(--demo);color:#fff}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,.08);font-size:12px}

/* Sections */
main section{padding:60px 0}
h1{font-size:clamp(28px, 4vw, 46px);line-height:1.05;margin:0 0 12px}
h2{font-size:clamp(22px, 3vw, 32px);margin:0 0 10px}
p.lead{font-size:18px;color:var(--muted)}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero-art{display:flex;justify-content:center}

/* Phone mockup */
.phone{width:320px;height:640px;background:#0b0f14;border-radius:40px; padding:14px; box-shadow: var(--shadow); position:relative;color:#0a0a0a}
.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:#ffffff;border-bottom:1px solid rgba(0,0,0,.06)}
.app-logo{width:22px;height:22px}
.app-title{font-weight:800;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:800}
.meta{font-size:12px;color:#64748b}
.amt{font-weight:900}

.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}

/* Cards & grids */
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.card{background:var(--card);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}

/* Demo page 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%}
.chip{font-size:12px;color:#0f172a;background:#eef7f5;border:1px solid #cfe7e3;border-radius:999px;padding:4px 8px}

/* Eco meter (demo only) */
.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,#12b29e,#0f7b6c);border-radius:999px}

/* FAQ */
.accordion .acc{width:100%;text-align:left;background:#fff;border:1px solid rgba(15,23,42,.1);padding:14px 16px;margin:10px 0;border-radius:12px;font-weight:800}
.accordion .panel{display:none; padding:8px 12px 16px 12px;color:var(--muted)}

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

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

/* Demo banner */
.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:800;font-size:12px}

/* Responsive / mobile menu */
@media (max-width: 1000px){
  .hero{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .nav{position:relative}
  .nav-links{display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid rgba(15,23,42,.08); box-shadow: var(--shadow); flex-direction:column; gap:0; padding:8px 12px; z-index:60}
  .nav-links a{padding:12px 8px; border-radius:10px}
  .nav-links.open{display:flex; animation: dropdown .22s ease-out}
  .hamburger{display:block}
  /* Smaller buttons on mobile */
  .site-header .btn.primary{padding:8px 10px; font-size:13px}
  .hero .btn.primary{padding:10px 12px; font-size:14px}
}

section.container{margin-bottom:60px}

.page-title{margin-top:60px;margin-bottom:40px}

.container > .card:not(:first-child), .container > .grid:not(:first-child){margin-top:24px}
.site-footer{margin-top:26px}

/* Sign-in dropdown */
.signin-wrap{ position:relative; display:inline-block }
.signin-wrap .menu{
  position:absolute; right:0; top:110%; min-width:180px;
  background:#fff; border:1px solid rgba(15,23,42,.12);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:8px; display:none; z-index:1000
}
.signin-wrap .menu.open{ display:block }
.signin-wrap .menu a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#111827; font-weight:500 }
.signin-wrap .menu a:hover{ background:#f3f4f6 }

.container > .card:not(:first-child), .container > .grid:not(:first-child){margin-top:24px}

section.container{margin-bottom:60px}

.hero .hero-art{justify-self:end}

.hero .phone{max-width:320px}

main > .container:first-of-type{margin-top:60px}


/* === Visual polish & fixes (20250819103309) === */
.signin-wrap{ position:relative; display:inline-block }
.signin-wrap .menu{
  position:absolute; right:0; top:110%; min-width:180px;
  background:#fff; border:1px solid rgba(15,23,42,.12);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:8px; display:none; z-index:1000; animation: dropdown .16s ease;
}
.signin-wrap .menu.open{ display:block }
.signin-wrap .menu a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#111827; font-weight:600 }
.signin-wrap .menu a:hover{ background:#f3f4f6 }

@media (max-width: 480px){
  .site-header .btn.primary{ font-size:14px; padding:8px 12px }
}

/* Ensure hero stays two columns and buttons sit beside phone */
.hero{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center }
.hero .hero-art{ justify-self:end }
.hero .phone{ max-width:320px }

/* Maintain generous spacing */
main section{ padding:60px 0 }
.page-title{ margin-top:60px; margin-bottom:40px }
.container > .card:not(:first-child), .container > .grid:not(:first-child){ margin-top:24px }
section.container{ margin-bottom:60px }
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
.grid.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px }


/* === Premium Shine Upgrade (fix) =================================== */
@media (max-width: 480px){
  .site-header .btn.primary{ font-size: 14px; padding: 8px 12px }
}
/* ================================================================ */


/* === Tabsy Light Redesign (visual-only) — 20250819104445 =========================
   A fresh, bright look: airy spacing, soft borders, gentle shadows,
   pill buttons, crisp typography. No functional changes.
===================================================================== */

/* Palette */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.12);
  --text: #0f172a;
  --muted: #5b6b7f;
  --accent: #18b0a9;   /* fresh teal */
  --accent-600: #0c8f8a;
  --ring: rgba(24,176,169,.22);
}

/* Reset base */
html, body { background: var(--bg); color: var(--text) }

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }

/* Layout spacing */
main section { padding: 68px 0 }
section.container { margin-bottom: 68px }
.page-title { margin-top: 64px; margin-bottom: 28px }

/* Containers & 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 }

/* Header: clean, sticky, light */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav a, .nav-links a { color: #1f2937 }
.nav-links a.active { color: var(--accent) }
.nav-links a:hover { color: var(--accent) }

/* Hero layout: two columns, larger headline */
.hero { display:grid; grid-template-columns: minmax(360px, 1.1fr) 1fr; gap: 48px; align-items:center }
.hero h1 { font-size: clamp(40px, 5vw, 56px); letter-spacing: -0.01em }
.hero .lead { font-size: 18px; color: var(--muted) }
.hero .phone { max-width: 360px; border-radius: 24px; border:1px solid var(--border); box-shadow: 0 10px 40px rgba(15,23,42,.08) }
.hero .screen { border-radius: 18px; border:1px solid var(--border) }

/* Cards: very light with defined borders */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15,23,42,.06);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(15,23,42,.08) }

/* Buttons: pill, subtle gradient, crisp focus */
.btn { border-radius: 999px; padding: 10px 16px; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; position:relative; overflow:hidden }
.btn.primary {
  background: linear-gradient(180deg, #24c7bf, #18b0a9);
  color: #042c2a;
  box-shadow: 0 8px 20px rgba(24,176,169,.20), inset 0 1px 0 rgba(255,255,255,.55);
  border: 1px solid rgba(24,176,169,.25);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(24,176,169,.28) }
.btn.secondary {
  background: #fff; color:#0f172a; border:1px solid var(--border-strong);
  box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
.btn.ghost { background: #fff; color:#0f172a; border:1px solid var(--border); }
.btn.demo { background: linear-gradient(180deg, #2bd1c8, #12a39c); color:#042c2a; border:1px solid rgba(24,176,169,.25) }

.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring) }

/* Inputs & forms */
input, textarea, select {
  background: #fff;
  border:1px solid var(--border-strong);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring) }

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

/* Footer */
.site-footer { background: #fff; border-top:1px solid var(--border) }
.site-footer .muted, .muted { color: var(--muted) }

/* FAQ accordion buttons (if present) */
.accordion .acc { background:#fff; border:1px solid var(--border-strong); border-radius:12px; padding:12px 14px }
.accordion .panel { border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 12px; padding: 14px }

/* Demo eco bar */
#ecoBar { background: linear-gradient(90deg, #2bd1c8, #18b0a9) }

/* Mobile tweaks */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px }
  .hero .hero-art { justify-self: start }
}
@media (max-width: 480px) {
  .site-header .btn.primary { font-size: 14px; padding: 8px 12px }
  .nav-links a { font-size: 14px }
}
/* ================================================================ */


@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 28px; } .hero .hero-art { justify-self: start; } }
@media (max-width: 480px) { .site-header .btn.primary { font-size: 14px; padding: 8px 12px; } .nav-links a { font-size: 14px; } }


/* === Frosted Glass Redesign — 20250819110043 =======================================
   Light, glossy, glassy UI with organic gradient shapes & micro-animations.
   Visual-only: no HTML/JS changes.
========================================================================= */

/* Palette & base */
:root{
  --bg: #fcfeff;
  --ink: #0f172a;
  --muted: #63748a;
  --teal: #15c4b3;
  --cyan: #62e3e3;
  --blue: #69a8ff;
  --glass: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.8);
  --ring: rgba(21,196,179,.25);
}
html, body{ background: var(--bg); color: var(--ink) }
body{ font-size:17px; line-height:1.6 }

/* Container width */
.container{ max-width: 1160px; margin:0 auto; padding:0 22px }

/* Global motion */
*{ transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease }

/* Sticky glass header */
.site-header{
  position: sticky; top:0; z-index:60;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.nav-links a{ color:#1c2a3b; padding-bottom:6px; position:relative }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  transform:scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1) }

/* HERO — alternative layout (single-column center), organic blobs */
.hero{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:28px;
  text-align:center; align-items:center; justify-items:center;
  padding: 98px 0 84px;
}
.hero::before, .hero::after{
  content:""; position:absolute; inset:auto; z-index:-1; filter: blur(30px);
  width: 58vw; height: 58vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(ellipse at 30% 30%, rgba(98,227,227,.55), transparent 60%),
              radial-gradient(ellipse at 70% 40%, rgba(105,168,255,.45), transparent 62%),
              radial-gradient(ellipse at 50% 70%, rgba(21,196,179,.40), transparent 62%);
  border-radius: 50%;
  opacity:.7; pointer-events:none;
}
.hero::before{ top:-12vw; left:-12vw; animation: blob 16s ease-in-out infinite alternate }
.hero::after{ bottom:-18vw; right:-14vw; animation: blob 22s ease-in-out infinite alternate-reverse }
@keyframes blob{ 0%{transform: translate(0,0) scale(1)} 100%{transform: translate(2vw,-1.5vw) scale(1.06)} }

/* Hide the old phone mockup for a new look, keep DOM intact */
.hero .hero-art{ display:none }

/* Buttons row centered */
.hero .btn{ border-radius: 999px; font-weight:800; letter-spacing:.2px }
.hero .btn.primary{ background: linear-gradient(180deg, #53e0d3, #15c4b3); color:#053a36;
  border:1px solid rgba(21,196,179,.35); box-shadow: 0 10px 26px rgba(21,196,179,.30), inset 0 1px 0 rgba(255,255,255,.7); position:relative; overflow:hidden }
.hero .btn.primary::after{ content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.65) 45%, transparent 60%);
  transform: translateX(-130%); transition: transform .9s ease }
.hero .btn.primary:hover::after{ transform: translateX(130%) }
.hero .btn.secondary{ background: var(--glass); border:1px solid var(--glass-border); box-shadow: 0 8px 24px rgba(15,23,42,.08); color:var(--ink) }
.hero .btn.ghost, .hero .btn.demo{ background: var(--glass); border:1px solid var(--glass-border); color:var(--ink) }
.hero .btn:hover{ transform: translateY(-2px) }

/* Glass cards */
.card{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
.card:hover{ transform: translateY(-2px) }

/* Section spacing rhythm */
main section{ padding: 72px 0 }
section.container{ margin-bottom: 60px }
.page-title{ margin-top: 80px; margin-bottom: 36px }

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

/* Inputs (glass) */
input, textarea, select{
  background: rgba(255,255,255,.78);
  border:1px solid var(--glass-border);
  border-radius:14px; padding:11px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--ring) }

/* Sign-in menu theme */
.signin-wrap .menu{
  background: rgba(255,255,255,.92);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
}
.signin-wrap .menu a{ color: var(--ink) }

/* Demo list: hover glass effect */
#receiptList .item{ border-radius:12px; border:1px solid rgba(15,23,42,.08); padding:10px; background: rgba(255,255,255,.7) }
#receiptList .item:hover{ background: rgba(255,255,255,.9) }

/* Receipt preview drop shadow */
.receipt-svg{ filter: drop-shadow(0 8px 22px rgba(15,23,42,.12)) }

/* Footer glass */
.site-footer{ background: rgba(255,255,255,.72); backdrop-filter: blur(8px); border-top:1px solid rgba(15,23,42,.06) }

/* Micro float animation utility (optional) */
.floaty{ animation: floaty 6s ease-in-out infinite }
@keyframes floaty{ 0%{transform: translateY(0)} 50%{transform: translateY(-6px)} 100%{transform: translateY(0)} }

/* Mobile */
@media (max-width: 980px){
  .hero{ padding-top: 88px; }
}
@media (max-width: 480px){
  .site-header .btn.primary{ font-size:14px; padding:8px 12px }
  .nav-links a{ font-size:14px }
}
/* ===================================================================== */


/* === Glass v2 adjustments — 20250819110513 ========================================= */
/* Accent palette switch (cool blue) */
:root{
  --accentA: #5aa0ff;
  --accentB: #3B6EF6;
  --accentRing: rgba(59,110,246,.22);
}

/* Hero back to two columns with phone visible */
.hero{ grid-template-columns: minmax(380px,1.05fr) 1fr; text-align:left; justify-items:start; }
.hero .hero-art{ display:block; justify-self:end }
.hero h1{ font-size: clamp(42px,5.4vw,60px) }

/* Organic blobs recolored (cool blue tones) */
.hero::before, .hero::after{ 
  background: radial-gradient(ellipse at 30% 30%, rgba(90,160,255,.45), transparent 60%),
              radial-gradient(ellipse at 70% 40%, rgba(59,110,246,.35), transparent 62%),
              radial-gradient(ellipse at 50% 70%, rgba(140,185,255,.32), transparent 62%);
}

/* Realistic phone frame */
.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 rgba(17,24,39,.12);
}
.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);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.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;
  border:1px solid rgba(17,24,39,.08);
  overflow: hidden;
}

/* Button hover: remove text underline, use glow + lift */
a.btn, .btn{ text-decoration:none !important }
a.btn:hover, .btn:hover{ text-decoration:none !important; transform: translateY(-2px) }
.btn.primary{ background: linear-gradient(180deg, var(--accentA), var(--accentB)); color:#ffffff; border:1px solid rgba(59,110,246,.25); box-shadow: 0 12px 30px rgba(59,110,246,.32), inset 0 1px 0 rgba(255,255,255,.7) }
.btn.primary::after{ background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 45%, transparent 60%) }
.btn.secondary{ background: rgba(255,255,255,.7); border:1px solid rgba(17,24,39,.12) }
.btn.demo{ background: linear-gradient(180deg, #88b9ff, #5aa0ff); color:#0b1a3a; border:1px solid rgba(90,160,255,.25) }

/* Inputs focus ring tuned to new accents */
input:focus, textarea:focus, select:focus{ box-shadow: 0 0 0 4px var(--accentRing); border-color: var(--accentB) }

/* Nav underline keeps currentColor; ensure hover on buttons doesn't underline */
.nav-links a{ text-decoration:none }
/* ========================================================================= */

a.btn:hover, .btn:hover{ text-decoration:none }


/* === Charcoal + Ice White overrides — 20250819131604 ================================
   Visual-only theme: premium neutral palette, flat buttons (no 3D),
   subtle shine, frosted glass cards. No changes to JS or HTML.
============================================================================ */

/* Palette */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border: rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.16);
  --ink: #0f172a;            /* charcoal ink */
  --muted: #617083;          /* cool grey */
  --accentA: #1f2937;        /* charcoal */
  --accentB: #0f172a;        /* deeper charcoal */
  --ice: #f3f6fb;            /* ice white */
  --ring: rgba(15,23,42,.16);/* subtle focus ring */
}

/* Base */
html, body{ background: var(--bg); color: var(--ink) }

/* Header (light, premium) */
.site-header{ background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--border) }

/* Nav links: keep active underline; hover = color change only (no underline on buttons) */
.nav-links a{ color:#1f2937; text-decoration:none }
.nav-links a:hover, .nav-links a.active{ color: var(--accentA) }

/* Hero text treatment */
.hero h1{ color: var(--ink); letter-spacing:-.01em }
.hero .lead{ color: var(--muted) }

/* Cards: frosted/clean */
.card{
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 8px 26px rgba(15,23,42,.08);
}
.card:hover{ transform: translateY(-1px); box-shadow: 0 12px 36px rgba(15,23,42,.10) }

/* Buttons: flat premium charcoal, subtle shine sweep, NO 3D */
a.btn, .btn{ text-decoration:none !important; border-radius:999px; font-weight:800; letter-spacing:.15px; position:relative; overflow:hidden; box-shadow:none }
.btn.primary{
  background: linear-gradient(180deg, var(--accentA), var(--accentB));
  color:#ffffff;
  border:1px solid rgba(15,23,42,.25);
}
.btn.primary::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 60%);
  transform: translateX(-130%); transition: transform .9s ease; opacity:.6;
}
.btn.primary:hover::after{ transform: translateX(130%) }
.btn.primary:hover{ filter: brightness(1.02) }

.btn.secondary{ background:#ffffff; color:var(--ink); border:1px solid var(--border-strong) }
.btn.demo{ background: linear-gradient(180deg, #374151, #1f2937); color:#ffffff; border:1px solid rgba(15,23,42,.25) }

/* Button hover: subtle glow ring (not 3D, not underline) */
a.btn:hover, .btn:hover{ transform:none; box-shadow: 0 0 0 4px var(--ring) }

/* Inputs */
input, textarea, select{
  background:#ffffff;
  border:1px solid var(--border-strong);
  color:var(--ink);
  border-radius:12px; padding:10px 12px;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--accentA); box-shadow: 0 0 0 3px rgba(15,23,42,.16) }

/* Sign-in menu */
.signin-wrap .menu{ background:#ffffff; color:var(--ink); border:1px solid var(--border-strong); box-shadow:0 22px 60px rgba(15,23,42,.12) }
.signin-wrap .menu a{ color:var(--ink) }
.signin-wrap .menu a:hover{ background:#eef2f7 }

/* Hero phone (if present): keep realistic style, neutral frame */
.hero .phone{ box-shadow: 0 22px 60px rgba(15,23,42,.14); border:1px solid var(--border) }
.hero .screen{ background:#f8fafc; border:1px solid var(--border) }

/* Organic background shapes: remove candy blue; go to ice/charcoal tints */
.hero::before, .hero::after{
  background: radial-gradient(ellipse at 30% 30%, rgba(31,41,55,.12), transparent 60%),
              radial-gradient(ellipse at 70% 40%, rgba(15,23,42,.10), transparent 62%),
              radial-gradient(ellipse at 50% 70%, rgba(243,246,251,.50), transparent 62%);
}

/* Eco bar & subtle accents */
#ecoBar{ background: linear-gradient(90deg, #475569, #1f2937) }

/* Footer */
.site-footer{ background:#ffffff; border-top:1px solid var(--border) }

/* Mobile CTA sizing preserved */
@media (max-width: 480px){
  .site-header .btn.primary{ font-size:14px; padding:8px 12px }
}
/* ========================================================================= */


/* === Paler CTA + No Hover Outline — 20250819132127 ================================ */
/* Softer primary CTA (Get a quote) + consistent, outline-free hover states */

/* Pale sapphire for CTAs */
:root {
  --ctaA: #cfe1ff;   /* pale sapphire top */
  --ctaB: #9dbdf7;   /* soft sapphire base */
  --ctaText: #0b1a3a; /* dark ink for contrast on pale buttons */
}

/* Primary button (affects "Get a quote" and any .btn.primary) */
.btn.primary {
  background: linear-gradient(180deg, var(--ctaA), var(--ctaB));
  color: var(--ctaText);
  border: 1px solid rgba(68, 99, 160, .28);
  box-shadow: none;
}
.btn.primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 8px 22px rgba(33, 56, 112, .16);
}
.btn.primary::after {
  /* keep the shine, but softer on pale color */
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.20) 45%, transparent 60%);
  opacity: .5;
}

/* Demo & Ghost buttons (e.g., "How it works", "Run API demo") — remove ring outline */
.btn.demo, .btn.ghost, .btn.secondary {
  box-shadow: none;
}
.btn.demo:hover, .btn.ghost:hover, .btn.secondary:hover {
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

/* Remove any global hover ring/outline on buttons if previously set */
a.btn:hover, .btn:hover {
  background: #24b7b7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none !important;
  box-shadow: none;
}

/* Keep link hover underline behavior for regular nav links only (not buttons) */
.nav-links a:hover {
  text-decoration: none;
}
/* ======================================================================= */


/* === Remove static top reflection on primary buttons — 20250819133235 =============== */
/* Keep the diagonal sweep (::after) but remove any 'candy' top highlight. */
.btn.primary {
  /* Keep the pale sapphire gradient if defined; otherwise fall back to a soft pair */
  background: linear-gradient(180deg, var(--ctaA, #cfe1ff), var(--ctaB, #9dbdf7));
  /* Remove any inset glossy highlight or heavy outer shadow */
  box-shadow: none !important;
}
/* Some earlier themes may have added an inset white highlight via box-shadow.
   The line above nullifies it; also ensure no static top gloss pseudo-element exists. */
.btn.primary::before {
  content: none !important;
}
/* Keep the diagonal sweep shine (::after) if present; if not, define it softly. */
.btn.primary::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: .5;
}
.btn.primary:hover::after {
  transform: translateX(130%);
}
/* Subtle hover without outlines or 3D look */
.btn.primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}
/* Ensure buttons never show underlines */
a.btn, .btn { text-decoration: none !important; }
/* ======================================================================== */


/* === Cyan-turquoise unified buttons + soft glow — 20250819134252 ==================== */
:root {
  --cyan: #2acfcf;         /* unified primary */
  --cyan-d: #24b7b7;       /* hover shade */
  --cyan-glow: rgba(42,207,207,.35);
  --cyan-text: #0b1a3a;    /* dark ink on pale cyan */
}

/* Base button cleanup (no outlines/underlines) */
a.btn, .btn { text-decoration: none !important; position: relative; overflow: hidden; }

/* Apply cyan to all main actions: primary, demo, secondary, and header sign-in */
.btn.primary,
.btn.demo,
.btn.secondary,
.signin-btn {
  background: var(--cyan) !important;
  color: var(--cyan-text) !important;
  border: 1px solid rgba(20, 120, 120, .28) !important;
  box-shadow: none !important;
}

/* Keep diagonal sweep animation, gentle and premium */
.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;
}
.btn.primary:hover::after,
.btn.demo:hover::after,
.btn.secondary:hover::after,
.signin-btn:hover::after {
  transform: translateX(130%);
}

/* Soft glow hover (no 3D, no outline) */
.btn.primary:hover,
.btn.demo:hover,
.btn.secondary:hover,
.signin-btn:hover {
  background: var(--cyan-d) !important;
  box-shadow: 0 10px 28px var(--cyan-glow) !important;
  filter: none !important;
}

/* Ensure nav link hovers don't add underlines that look like button outlines */
.nav-links a:hover { text-decoration: none; }

/* If ghost buttons exist, make them cyan outlined to match */
.btn.ghost {
  background: transparent !important;
  color: var(--cyan-text) !important;
  border: 1px solid var(--cyan) !important;
}
.btn.ghost:hover {
  background: var(--cyan) !important;
  color: var(--cyan-text) !important;
  box-shadow: 0 10px 28px var(--cyan-glow) !important;
}
/* ======================================================================== */


/* Header logo sizing (injected) */
.brand .site-logo{ height:44px; width:44px; display:inline-block; vertical-align:middle; margin-right:8px; }
@media (max-width:480px){ .brand .site-logo{ height:36px; width:36px; } }

/* === Mobile portrait fixes === */
@media (max-width: 680px) {
  /* Layout & spacing */
  .container { padding: 0 16px; }
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: left;
    padding-top: 72px; /* space from header */
  }

  /* Bigger, more impactful title */
  .hero h1 {
    font-size: clamp(34px, 9.5vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 900;
    margin-bottom: 8px;
  }
  .hero .lead { font-size: 16px; line-height: 1.5; }

  /* Phone mockup: keep proper proportions and center it */
  .hero .hero-art { order: 2; justify-self: center; }
  .hero .phone {
    width: min(88vw, 380px);
    aspect-ratio: 9 / 19.5;
    margin: 0 auto;
    transform: none;
  }
  .hero .screen { border-radius: 22px; }

  /* Ensure SVG text in the receipt preview doesn't collapse into one line */
  .receipt-svg text { white-space: pre; }

  /* Buttons: no full-width stretch on mobile; allow wrapping nicely */
  a.btn, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;           /* prevent 100% width */
    max-width: 100%;
    padding: 10px 14px;
    white-space: nowrap;   /* keep short labels on one line */
  }

  /* If the buttons live together in the hero, make the row wrap with gaps */
  .hero .btn + .btn { margin-left: 10px; }
  .hero .cta-row,
  .hero .actions,
  .hero > div > a.btn:first-child { /* covers inline buttons block */
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Footer/section breathing room */
  main section { padding-top: 56px; padding-bottom: 56px; }
}

/* Slight tweak for very small phones */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(30px, 9.8vw, 40px); }
  a.btn, .btn { padding: 9px 12px; }
}
/* === Mobile: stack info cards (Linking a shopper account, What gets sent, etc.) === */
@media (max-width: 680px) {
  /* Any two/three-column grids collapse to single column */
  .grid.two,
  .grid.three {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px; /* tighter gap for mobile */
  }

  /* Make sure cards stretch nicely when stacked */
  .grid.two .card,
  .grid.three .card {
    width: 100%;
  }
}

/* Optional: slightly earlier breakpoint for small tablets too */
@media (max-width: 820px) {
  .grid.two,
  .grid.three {
    grid-template-columns: 1fr  !important;
  }
}