@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Poppins:wght@700;800&display=swap');
:root{--bg:#ffffff;--s1:#f8f8fc;--s2:#f0f0f8;--bd:#ddddf0;--ac:#0080FE;--ac2:#0066cc;--tx:#111122;--mu:#6666aa;--er:#e03030;--ok:#16a34a;--white:#ffffff;--transparent:transparent;--blue-500:#3b82f6;--indigo-300:#5aa8ff;--blue-300:#93c5fd;--violet-200:#bfe0ff;--blue-400:#60a5fa;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#f8f8fc;color:var(--tx);font-family:'DM Sans',sans-serif;min-height:100vh;padding:0;}
.wrap{max-width:100%;margin:0;padding:0 1rem;}
.wordmark{font-size:36px;font-weight:700;margin-bottom:6px;text-align:center;display:flex;align-items:center;justify-content:center;}
.sub{font-size:18px;font-weight:500;color:var(--mu);margin-bottom:2rem;text-align:center;}
.apirow{margin-bottom:1rem;}

.apiinput{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:8px 12px;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;}
.apiinput:focus{border-color:var(--ac);}
.upload-row{display:flex;gap:10px;margin-bottom:10px;}
.ubox{flex:1;height:65vh;margin-top:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;border-radius:12px;cursor:pointer;background:var(--ac);transition:opacity .2s;}
.ubox:hover{opacity:0.85;}
.ico{width:220px;height:220px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;}
.ico svg{width:200px;height:200px;fill:none;stroke-width:0.8;stroke-linecap:round;stroke-linejoin:round;}
.udt{font-size:20px;margin-bottom:6px;}
.uds{font-size:14px;color:var(--mu);}
#addedMsg{font-size:12px;color:var(--ac);min-height:16px;margin-bottom:8px;}
#gallery{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.tw{position:relative;}
.th{width:70px;height:70px;object-fit:cover;border-radius:8px;border:2px solid var(--bd);display:block;}
.trm{position:absolute;top:-5px;right:-5px;width:16px;height:16px;background:var(--er);border-radius:50%;border:none;color:#111122;font-size:10px;cursor:pointer;line-height:16px;text-align:center;padding:0;}
.sbtn{width:100%;padding:14px 20px;background:linear-gradient(135deg,#0080FE,#0066cc);color:#fff;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;margin-bottom:1rem;transition:opacity .2s;display:none;}
.sbtn:hover{opacity:.85;}

.tagline{text-align:center;font-size:20px;font-weight:700;color:#111122;letter-spacing:0.02em;padding:2rem 0 1rem;}
#feed{display:flex;flex-direction:column;gap:6px;margin-top:1rem;}
#sess{font-size:12px;color:var(--mu);text-align:center;margin-top:1rem;}
#sess b{color:var(--ac);font-weight:400;}
.p2cols{display:flex;flex-direction:column;gap:0;min-height:100vh;}
.imgcol{width:100%;max-height:40vh;position:relative;background:#f0f0f8;}
.imgcol img{width:100%;height:100%;max-height:40vh;object-fit:contain;display:block;}
.infocol{width:100%;display:flex;flex-direction:column;padding:1rem;overflow-y:auto;}

#identifying{display:none;padding:1rem 0;}
.progrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
#identifyingMsg{font-size:13px;color:var(--mu);}
.progtrack{height:4px;background:var(--s2);border-radius:2px;overflow:hidden;}
#progressBar{height:100%;background:linear-gradient(90deg,#0080FE,#0066cc);border-radius:2px;width:0%;transition:width 0.4s ease;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.25rem;align-items:start;}
.fld{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;}
.flbl{font-size:11px;color:var(--mu);margin-bottom:4px;}
.fin{width:100%;background:transparent;border:none;box-shadow:none;-webkit-appearance:none;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;padding:0;}
.fin::placeholder{color:var(--mu);}
input[type="date"]::-webkit-calendar-picker-indicator{display:none;}
input[type="date"]{-webkit-appearance:none;appearance:none;text-align:left;}
/* iOS/WebKit centers the date value by default -- force it left like the other fields */
input[type="date"]::-webkit-date-and-time-value{text-align:left;}
select.fin{background:var(--s2);color:var(--tx);cursor:pointer;-webkit-appearance:none;appearance:none;}
select.fin option{background:#fff;color:#111122;}
/* horizontal swipe row for the less-used payment methods -- hide the scrollbar */
.payscroll{scrollbar-width:none;-ms-overflow-style:none;}
.payscroll::-webkit-scrollbar{display:none;}
/* Skeleton loaders (shimmer) -- reusable placeholder while data loads */
@keyframes cbskel{100%{background-position:-100% 0;}}
.skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--s2) 0%,var(--s1) 50%,var(--s2) 100%);background-size:200% 100%;background-position:100% 0;animation:cbskel 1.1s ease-in-out infinite;}
#logBtn{width:100%;padding:13px;background:linear-gradient(135deg,#0080FE,#0066cc);color:#fff;border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:15px;cursor:pointer;transition:opacity .2s;margin-bottom:1rem;}
#logBtn:hover{opacity:.85;}
#logBtn:disabled{opacity:.3;cursor:not-allowed;}
.sheetedlbl{font-size:11px;color:var(--mu);margin-bottom:6px;letter-spacing:0.05em;}
#sheetedList{display:flex;flex-direction:column;gap:6px;}
.sitem{background:rgba(3,192,74,0.1);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--tx);border-left:2px solid #0080FE;}
.spin2{width:16px;height:16px;border:2px solid rgba(3,192,74,.3);border-top-color:var(--ac);border-radius:50%;animation:sp .7s linear infinite;display:inline-block;}
@keyframes sp{to{transform:rotate(360deg);}}
@keyframes cbShimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
.cb-skel{background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 37%,var(--s1) 63%);background-size:800px 100%;animation:cbShimmer 3.5s linear infinite;border-radius:10px;}
.cb-skel-card{aspect-ratio:3/4;border-radius:10px;}
.cb-skel-line{height:12px;border-radius:6px;}
@keyframes cbGlow{
  0%,100%{opacity:1;filter:drop-shadow(0 0 0px rgba(165,180,252,0));}
  25%{opacity:0.85;filter:drop-shadow(0 0 12px rgba(165,180,252,0.8));}
  50%{opacity:1;filter:drop-shadow(0 0 18px rgba(192,132,252,0.9));}
  75%{opacity:0.85;filter:drop-shadow(0 0 12px rgba(165,180,252,0.8));}
}
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes bounceDown{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}
@keyframes cbShimmer{
  0%{background-position:-200% center;}
  100%{background-position:200% center;}
}
.cb-animated,.cb-shimmer{
  color:var(--ac);
}
.cb-shimmer-img{}
.cb-logo-animated{filter:brightness(0) saturate(100%) invert(44%) sepia(97%) saturate(540%) hue-rotate(103deg) brightness(96%) contrast(101%);}
.feature-card{background:#f9f9fc;border:1px solid #ebebf5;border-radius:16px;padding:1.5rem 1.25rem;text-align:center;transition:border-color .2s,transform .2s,box-shadow .2s;cursor:default;min-height:100px;display:flex;flex-direction:column;justify-content:center;}
.feature-card:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,128,254,0.10);}
button:not(:disabled){transition:transform .2s;}
button:not(:disabled):hover{opacity:0.9;}
@keyframes spin{to{transform:rotate(360deg);}}
.auth-spinner{width:24px;height:24px;border:3px solid rgba(17,17,34,0.2);border-top-color:#111122;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes cbLogoGlow{
  0%{filter:drop-shadow(0 0 2px rgba(165,180,252,0.3)) brightness(1);}
  25%{filter:drop-shadow(0 0 6px rgba(192,132,252,0.6)) brightness(1.15);}
  50%{filter:drop-shadow(0 0 10px rgba(216,180,254,0.7)) brightness(1.25);}
  75%{filter:drop-shadow(0 0 6px rgba(192,132,252,0.6)) brightness(1.15);}
  100%{filter:drop-shadow(0 0 2px rgba(165,180,252,0.3)) brightness(1);}
}
.ent{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dok{background:var(--ok);}
.der{background:var(--er);}
.etx{font-size:13px;color:var(--mu);}
.etx b{color:var(--tx);font-weight:400;}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap');

.cb-animated{color:var(--ac);font-weight:800;}

.screen{display:none;width:100%;max-width:640px;flex-direction:column;gap:1rem;align-items:center;text-align:center;position:relative;}
.arrow-back{position:absolute;top:50%;left:0;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:var(--mu);padding:4px;line-height:0;transition:color .15s,transform .15s;}
.arrow-back:hover{color:var(--tx);transform:translateY(-50%) scale(1.15);}
.screen.active{display:flex;}

.wordmark{font-size:48px;font-weight:800;color:var(--ac);}
.heading{font-size:32px;font-weight:700;}
.subtext{font-size:16px;color:var(--mu);line-height:1.6;}

.info-box{width:100%;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:1.25rem 1.5rem;font-size:15px;color:var(--mu);line-height:1.6;text-align:left;}
.info-box code{font-family:monospace;color:var(--tx);}

input[type=text]{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:18px 22px;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:15px;outline:none;box-sizing:border-box;transition:border .15s;}
input[type=text]:focus{border-color:var(--ac);}

.hint{font-size:12px;color:var(--er);min-height:16px;width:100%;text-align:left;}

.btn-primary{width:100%;padding:18px;background:linear-gradient(135deg,#0080FE,#0066cc);border:none;border-radius:10px;color:#ffffff;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;cursor:pointer;transition:transform .15s,opacity .15s;}
.btn-primary:hover{opacity:0.9;}
.btn-primary:disabled{background:#e8e8f8;color:#aaaacc;cursor:not-allowed;transform:none;}

.btn-skip{background:transparent;border:none;color:var(--mu);font-family:'DM Sans',sans-serif;font-size:14px;cursor:pointer;transition:color .15s;}.btn-skip:hover{color:var(--tx);}
.btn-back{width:100%;padding:18px;background:var(--s2);border:1px solid var(--bd);border-radius:10px;color:var(--mu);font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s;}
.btn-back:hover{opacity:0.9;}

.email-box{width:100%;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:0.75rem 1rem;display:flex;flex-direction:row;align-items:center;gap:10px;}
.email-text{font-size:11px;font-weight:700;word-break:break-all;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.btn-copy{padding:0 20px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;align-self:stretch;display:flex;align-items:center;flex-shrink:0;}
.btn-copy:hover{background:var(--bd);}
.copy-hint{font-size:11px;color:var(--mu);min-height:14px;display:none;}

.checkmark{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#0080FE,#0066cc);display:flex;align-items:center;justify-content:center;}

/* Step indicator */
.steps{display:flex;align-items:center;gap:8px;margin-bottom:0.5rem;}
.step-dot{width:10px;height:10px;border-radius:50%;background:var(--bd);transition:background .3s;}
.step-dot.active{background:var(--ac);}
.step-dot.done{background:var(--ac);opacity:0.5;}

/* Screen fade transitions */
.cb-screen-fade{animation:cbFadeIn .22s ease;}
@keyframes cbFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.exp-btn{padding:14px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;text-align:left;transition:background .15s;width:100%;}
.exp-btn:hover{background:var(--s2);}
.exp-sub{font-size:12px;font-weight:400;margin-top:3px;color:var(--mu);}

/* ── UI CONSISTENCY SYSTEM ─────────────────────────────── */

/* Base button reset */
button{font-family:'DM Sans',sans-serif;cursor:pointer;transition:opacity .15s,transform .15s,background .15s,border-color .15s;}

/* Primary green button */
.cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;background:linear-gradient(135deg,var(--ac),var(--ac2));border:1.5px solid transparent;border-radius:9px;box-sizing:border-box;color:#ffffff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .15s;white-space:nowrap;}
.cb-btn:hover{opacity:.88;}
.cb-btn:disabled{background:#e8e8f8;color:#aaaacc;cursor:not-allowed;transform:none;opacity:1;}

/* Ghost / outline button */
.cb-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;background:transparent;border:1.5px solid var(--bd);border-radius:9px;box-sizing:border-box;color:var(--mu);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap;}
.cb-btn-ghost:hover{background:var(--s2);border-color:var(--mu);}

/* Green outline button (sync etc) */
.cb-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;background:transparent;border:1.5px solid var(--ac);border-radius:9px;color:var(--ac);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap;}
.cb-btn-outline:hover{background:rgba(0,128,254,0.08);}

/* Danger / close button */
.cb-btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;background:transparent;border:1.5px solid rgba(200,50,50,0.4);border-radius:9px;color:#ff5f5f;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap;}
.cb-btn-danger:hover{background:rgba(255,95,95,0.08);}

/* Small variants */
.cb-btn-sm{padding:6px 14px;font-size:13px;border-radius:8px;}

/* Text/link style button */
.cb-btn-text{background:none;border:none;color:var(--mu);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;padding:4px 0;transition:color .15s;}
.cb-btn-text:hover{color:var(--tx);}

/* Back button consistent style */
.cb-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--mu);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;padding:6px 0;transition:color .15s;}
.cb-back:hover{color:var(--tx);}

/* Screen sticky header consistent */
.cb-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;flex-shrink:0;}
.cb-header-title{font-size:17px;font-weight:700;color:var(--tx);}
.cb-header-center{position:absolute;left:50%;transform:translateX(-50%);}

/* Delete button in inventory rows */
.cb-btn-delete{padding:6px 14px;background:transparent;border:1.5px solid rgba(200,50,50,0.35);border-radius:8px;color:#ff5f5f;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap;flex-shrink:0;}
.cb-btn-delete:hover{background:rgba(255,95,95,0.08);}

/* ── END UI CONSISTENCY ────────────────────────────────── */

#landingSignInBtn{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:10001;
  padding:11px 30px;
  background:linear-gradient(135deg,#0080FE,#0066cc);
  border:none;
  border-radius:10px;
  color:#ffffff;
  font-family:'DM Sans',sans-serif;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 24px rgba(0,128,254,0.35);
  transition:transform .2s;
}
#landingSignInBtn:hover{opacity:0.9;}

/* ── NEW LANDING PAGE ─────────────────────────────────── */
.lp-wrap{font-family:'DM Sans',sans-serif;color:#0d1b2a;}
.lp-hero{position:relative;overflow:hidden;padding:6rem 1.5rem 4rem;background:
  radial-gradient(1200px 500px at 50% -10%, rgba(0,128,254,0.14), transparent 60%),
  linear-gradient(180deg,#f4f9ff 0%, #ffffff 70%);}
.lp-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,128,254,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,128,254,0.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);pointer-events:none;}
.lp-hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;}
.lp-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:rgba(0,128,254,0.08);border:1px solid rgba(0,128,254,0.2);color:#0066cc;font-size:13px;font-weight:600;margin-bottom:1.75rem;}
.lp-badge .dot{width:7px;height:7px;border-radius:50%;background:#0080FE;box-shadow:0 0 0 0 rgba(0,128,254,0.5);animation:lpPulse 2s infinite;}
@keyframes lpPulse{0%{box-shadow:0 0 0 0 rgba(0,128,254,0.5);}70%{box-shadow:0 0 0 8px rgba(0,128,254,0);}100%{box-shadow:0 0 0 0 rgba(0,128,254,0);}}
.lp-h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(2.6rem,6.5vw,5rem);line-height:1.04;letter-spacing:-0.02em;margin:0 0 1.5rem;color:#0d1b2a;}
.lp-h1 .accent{background:linear-gradient(120deg,#0080FE,#0066cc);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lp-sub{font-size:clamp(1.05rem,2.2vw,1.3rem);color:#46566b;line-height:1.6;max-width:620px;margin:0 auto 2.5rem;}
.lp-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.lp-btn-primary{padding:16px 40px;font-size:17px;font-weight:700;font-family:'DM Sans',sans-serif;color:#fff;background:linear-gradient(135deg,#0080FE,#0066cc);border:none;border-radius:12px;cursor:pointer;box-shadow:0 6px 18px rgba(0,128,254,0.18);transition:transform .15s,box-shadow .15s;}
.lp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,128,254,0.24);}
.lp-btn-ghost{padding:16px 32px;font-size:17px;font-weight:600;font-family:'DM Sans',sans-serif;color:#0d1b2a;background:#fff;border:1.5px solid #d6e4f5;border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;}
.lp-btn-ghost:hover{border-color:#0080FE;background:#f4f9ff;}
.lp-mock{position:relative;max-width:880px;margin:3.5rem auto 0;border-radius:18px;background:#fff;border:1px solid #e6eefb;box-shadow:0 30px 80px -20px rgba(13,27,42,0.25);overflow:hidden;}
.lp-mock-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid #eef3fb;background:#fbfcff;}
.lp-mock-bar i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.lp-mock-body{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px;}
.lp-mock-card{border:1px solid #eef3fb;border-radius:12px;overflow:hidden;background:#fff;transition:transform .3s;}
.lp-mock-card:hover{transform:translateY(-4px);}
.lp-mock-thumb{height:120px;background:linear-gradient(135deg,#e8f2ff,#cfe3ff);position:relative;overflow:hidden;}
.lp-mock-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(0,128,254,0.28),transparent 60%);}
.lp-mock-badge{position:absolute;top:8px;right:8px;z-index:1;font-size:9px;font-weight:800;letter-spacing:0.04em;color:#fff;background:rgba(13,27,42,0.55);backdrop-filter:blur(4px);padding:3px 7px;border-radius:6px;}
.lp-mock-meta{padding:10px 12px;}
.lp-mock-name{font-size:13px;font-weight:700;color:#0d1b2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-mock-set{font-size:11px;color:#8a99ae;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-mock-val{font-size:13px;font-weight:800;color:#0080FE;margin-top:6px;}
.lp-stats{display:flex;justify-content:center;align-items:flex-start;gap:2.5rem;flex-wrap:wrap;padding:3rem 1.5rem;border-top:1px solid #eef3fb;border-bottom:1px solid #eef3fb;background:#fbfcff;}
.lp-stat{text-align:center;max-width:150px;}
.lp-stat .num{font-family:'Poppins',sans-serif;font-size:2.4rem;font-weight:800;color:#0080FE;line-height:1;}
.lp-stat .lbl{font-size:0.9rem;color:#6a7990;margin-top:6px;line-height:1.35;}
.lp-statline{max-width:640px;margin:0 auto;text-align:center;font-family:'DM Sans',sans-serif;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:500;line-height:1.5;color:#0d1b2a;}
.lp-statline .hl{color:#0080FE;font-weight:700;}
.lp-section{padding:5rem 1.5rem;max-width:1080px;margin:0 auto;}
.lp-eyebrow{text-align:center;color:#0080FE;font-weight:700;font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem;}
.lp-h2{font-family:'Poppins',sans-serif;text-align:center;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-0.02em;margin:0 0 0.75rem;color:#0d1b2a;}
.lp-h2-sub{text-align:center;color:#46566b;font-size:1.05rem;max-width:560px;margin:0 auto 3rem;line-height:1.6;}
.lp-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:760px;margin:0 auto;}
.lp-feat{padding:1.75rem;border-radius:16px;background:#fff;border:1px solid #eaf1fb;box-shadow:0 6px 18px rgba(0,128,254,0.18);transition:transform .15s,box-shadow .15s;}
.lp-feat:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,128,254,0.22);}
.lp-feat:hover .lp-feat-ic{background:linear-gradient(135deg,rgba(0,128,254,0.22),rgba(0,128,254,0.08));}
.lp-feat-ic{transition:background .25s ease;}
.lp-feat-ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(0,128,254,0.12),rgba(0,128,254,0.04));display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;color:#0080FE;}
.lp-feat h3{font-size:1.1rem;font-weight:700;margin:0 0 0.5rem;color:#0d1b2a;}
.lp-feat p{font-size:0.95rem;color:#5d6c82;line-height:1.6;margin:0;}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step;}
.lp-step{position:relative;padding:1.75rem;border-radius:16px;background:#fbfcff;border:1px solid #eef3fb;overflow:hidden;box-shadow:0 6px 18px rgba(0,128,254,0.18);transition:transform .15s,box-shadow .15s;}
.lp-step:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,128,254,0.22);}
.lp-step .stepnum{font-family:'Poppins',sans-serif;font-size:2.4rem;font-weight:800;color:rgba(0,128,254,0.18);line-height:1;margin-bottom:0.5rem;transition:color .25s ease;}
.lp-step:hover .stepnum{color:rgba(0,128,254,0.55);}
.lp-step h3{font-size:1.05rem;font-weight:700;margin:0 0 0.4rem;color:#0d1b2a;}
.lp-step p{font-size:0.92rem;color:#5d6c82;line-height:1.55;margin:0;}
.lp-finalcta{margin:1rem 1.5rem 4rem;max-width:1080px;margin-left:auto;margin-right:auto;border-radius:24px;padding:4rem 2rem;text-align:center;background:linear-gradient(135deg,#0080FE,#0059b3);position:relative;overflow:hidden;}
.lp-finalcta h2{position:relative;font-family:'Poppins',sans-serif;color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin:0 0 0.75rem;letter-spacing:-0.02em;}
.lp-finalcta p{position:relative;color:rgba(255,255,255,0.85);font-size:1.05rem;margin:0 0 2rem;}
.lp-finalcta button{position:relative;padding:16px 44px;font-size:17px;font-weight:700;font-family:'DM Sans',sans-serif;color:#0066cc;background:#fff;border:none;border-radius:12px;cursor:pointer;transition:transform .15s;}
.lp-finalcta button:hover{transform:translateY(-2px);}
.lp-foot{text-align:center;padding:2rem 1.5rem 3rem;color:#90a0b5;font-size:0.85rem;}
.lp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.lp-reveal.in{opacity:1;transform:none;}
@media (max-width:760px){
  .lp-hero{padding:4.5rem 1.25rem 3rem;}
  .lp-mock-body{grid-template-columns:1fr 1fr;}
  .lp-feature-grid{grid-template-columns:1fr;}
  .lp-steps{grid-template-columns:1fr;}
  .lp-stats{gap:1.5rem;flex-direction:column;align-items:center;}
  .lp-stat{max-width:none;}
  /* Inventory header declutter on mobile */
  .inv-header-bar .inv-tabs{display:none !important;}
  .inv-header-bar .inv-actions{display:none !important;}
  .inv-mobile-bar{display:flex !important;}
  /* Inventory filters: stack above cards on mobile instead of a cramped left column */
  .inv-filter-side{position:static !important;width:100% !important;flex-direction:column !important;gap:10px !important;margin-bottom:1rem;}
  .inv-filter-side #sportFilterBar{flex-direction:row !important;flex-wrap:wrap;gap:6px;}
  .inv-price-filter{flex-direction:row !important;align-items:center;flex-wrap:wrap;}
  .inv-price-filter input{width:auto !important;flex:1;min-width:80px;}
  .lp-stat .num{font-size:2rem;}
}
/* ── END NEW LANDING ──────────────────────────────────── */

/* ── MOBILE RESPONSIVE (@media max-width: 640px) ──────── */
@media (min-width: 601px) {
  .cardLayout{ display:flex !important; flex-direction:row !important; height:calc(100vh - 64px) !important; }
  .cardLayout > div:first-child{ width:50% !important; }
  .cardLayout > div:last-child{ width:50% !important; }
}
@media (max-width: 600px) {
  .cardLayout{ flex-direction:column !important; height:auto !important; }
  .cardLayout > div:first-child{ width:100% !important; height:auto !important; }
  .cardLayout > div:first-child img{ max-height:42vh !important; }
  .cardLayout > div:last-child{ width:100% !important; height:auto !important; }
}
@media (max-width: 640px) {

  /* Global */
  body{font-size:15px;}

  /* Landing screen */
  #landingScreen{overflow-x:hidden;}
  #heroMockupWrap{display:none;}
  #landingHero{gap:1rem;padding:1rem;}

  /* Landing feature grid: 3-col → 1-col */
  #landingScreen [style*="grid-template-columns:repeat(3,1fr)"],
  #landingScreen [style*="grid-template-columns:repeat(2,1fr)"],
  #landingScreen [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Sign In button mobile */

  /* Gate/login screen */
  #gateScreen [style*="max-width:480px"]{
    padding:1.5rem 1rem !important;
    border-radius:16px !important;
  }

  /* Paywall */
  #paywallScreen [style*="max-width:780px"]{
    padding:1rem !important;
  }
  /* Paywall features bar: 3-col → 2-col */
  #paywallScreen [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
  /* Paywall plan cards: 3+2 → 1-col */
  #paywallScreen [style*="grid-template-columns:repeat(3,1fr)"],
  #paywallScreen [style*="justify-content:center;gap:14px"]{
    grid-template-columns:1fr !important;
    flex-direction:column !important;
  }
  #paywallScreen [style*="flex:0 0 calc"]{
    flex:none !important;
    width:100% !important;
  }

  /* Page 1 home screen header */

  /* Home screen grids → 1-col */
  #page1 [style*="grid-template-columns:repeat(2,1fr)"],
  #page1 [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Inventory screen */
  #inventoryScreen [style*="display:flex;align-items:flex-start"]{
    flex-direction:column !important;
  }
  /* Scan/upload result stacking handled in its own narrower breakpoint below */
  #sportFilterBar{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    position:static !important;
    width:100% !important;
    padding:0.5rem 1rem !important;
    gap:6px !important;
  }
  #inventoryScreen [style*="position:relative;padding"]{
    padding:0.5rem 1rem 1rem !important;
  }

  /* Inventory header buttons */
  #inventoryScreen .cb-header{gap:6px;padding:0 0.75rem;}
  #syncBtn,
  #inventoryScreen .cb-btn,
  #inventoryScreen .cb-btn-danger{
    padding:7px 10px !important;
    font-size:13px !important;
  }

  /* Card row in inventory */
  #inventoryList > div{padding:10px 12px !important;}

  /* Settings screen */
  #settingsScreen [style*="max-width:600px"]{padding:1rem !important;}
  /* Settings rows: label+button side by side but smaller */
  #settingsScreen [style*="display:flex;align-items:center;justify-content:space-between"]{
    gap:8px !important;
    flex-wrap:nowrap !important;
  }
  #settingsScreen button[style*="width:90px"],
  #settingsScreen button[style*="min-width:90px"]{
    min-width:70px !important;
    width:70px !important;
    font-size:12px !important;
    padding:8px 6px !important;
  }

  /* Card search / find user headers */
  #cardSearchScreen .cb-header,
  #userSearchScreen .cb-header{padding:0 0.75rem;}
  #cardSearchScreen .cb-header-center span,
  #userSearchScreen .cb-header-center span{font-size:22px !important;}

  /* Mobile: show the page title, hide the centered cardbank.io logo (branding lives on landing/login) */
  .cb-header-center{display:none !important;}

  /* Search input */
  #cardSearchScreen [style*="max-width"],
  #userSearchScreen [style*="max-width"]{
    padding:0 1rem !important;
  }

  /* Profit tracker */
  #profitScreen .cb-header{padding:0 0.75rem;}

  /* FAQ screen */
  #faqScreen .cb-header{padding:0 0.75rem;}

  /* Image upload screen */
  #imageUploadScreen [style*="max-width"]{
    padding:1rem !important;
  }

  /* Modals */
  #cbPublicCardModal > div,
  #cbCardSearchModal > div{
    max-width:95vw !important;
    margin:0 auto;
  }

  /* Scan/review screen */
  #reviewScreen [style*="max-width"]{
    padding:1rem !important;
  }

  /* Input fields */
  .fin{font-size:16px !important;} /* prevents iOS zoom on focus */
  input[type=text],input[type=email],input[type=password],input[type=number]{
    font-size:16px !important; /* prevents iOS zoom */
  }

  /* Landing hero text sizes */
  #landingScreen .wordmark,
  #landingScreen [style*="font-size:72px"]{font-size:52px !important;letter-spacing:-2px !important;}
  #landingScreen [style*="font-size:96px"]{font-size:52px !important;}
  #landingScreen [style*="font-size:48px"]{font-size:36px !important;}

  /* Feature cards more compact */
  #landingScreen [style*="border-radius:20px"],
  #landingScreen [style*="border-radius:24px"]{
    padding:1rem 1.25rem !important;
  }

  /* Arrow chevron overlap fix */
  #landingScreen [style*="font-size:3rem"],
  #landingScreen svg[style*="chevron"]{display:none !important;}

  /* Landing nav */
  #landingScreen [style*="position:fixed;top:0;left:0;width:100%;height:60px"]{
    height:50px !important;
  }

  /* Get Started button full width on mobile */
  #landingScreen [style*="padding:16px 48px"]{
    width:90% !important;
    padding:14px !important;
    font-size:16px !important;
  }

  /* Home screen -- smaller cardbank.io wordmark */

  /* Home screen quick action buttons */
  #page1 [style*="grid-template-columns:repeat(2,1fr)"] button,
  #page1 [style*="grid-template-columns:1fr 1fr"] button{
    padding:14px !important;
    font-size:14px !important;
  }

  /* Home screen stats grid stays 2-col but more compact */
  #page1 [style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  #page1 [style*="font-size:26px"]{font-size:20px !important;}
  #page1 [style*="padding:1.5rem 1.25rem"]{padding:1rem !important;}

  /* Quick action buttons full height */
  #page1 [style*="padding:20px 16px"]{
    padding:16px 12px !important;
    font-size:14px !important;
    border-radius:12px !important;
  }

  /* Inventory header - stack if needed */
  #inventoryScreen .cb-header{
    flex-wrap:wrap;
    height:auto !important;
    padding:8px 0.75rem !important;
    gap:6px;
  }
  #inventoryScreen .cb-header > div:first-child{
    flex:1;
  }
  #inventoryScreen .cb-header > div:last-child{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }

  /* Image upload screen */
  #imageUploadScreen [style*="padding:2rem"]{padding:1rem !important;}
  .ubox{height:45vh !important;}
  /* Arrow -- smaller on mobile, keep animation */



  /* Fix cbFeatures margin-top overlap on mobile */
  #cbFeatures{margin-top:2rem !important;min-height:auto !important;}
  #cbFeatures > div > p{display:none !important;}

  /* Feature card grids */
  #cbFeatures [style*="grid-template-columns:repeat(3,1fr)"],
  #cbFeatures [style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:1fr !important;
    gap:0.75rem !important;
  }
  #cbFeatures .feature-card{padding:1rem !important;}

  /* Mobile feature cards -- all 1 col */
  #cbFeatures [style*="grid-template-columns:repeat(3,1fr)"],
  #cbFeatures [style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:1fr !important;
    max-width:100% !important;
    gap:0.75rem !important;
  }

  /* Sign In button mobile only */
  #landingSignInBtn{color:#111122 !important;top:0.4rem !important;border-radius:8px !important;}

  /* ── Newer screens (added after original mobile pass) ── */
  /* Requests: stack Incoming / Outgoing */
  #requestsScreen [style*="flex-direction:row"]{flex-direction:column !important;}
  #requestsScreen .cb-header{padding:0 0.75rem;}
  #requestsScreen .cb-header-center span,
  #requestsScreen [style*="font-size:30px"]{font-size:22px !important;}
  /* Headers across newer screens: shrink the wordmark to fit */
  #userProfileOverlay [style*="font-size:30px"],
  #publicInventoryOverlay [style*="font-size:30px"],
  #watchlistScreen .cb-animated,
  #messagesScreen [style*="font-size:30px"],
  #termsScreen [style*="font-size:30px"]{font-size:22px !important;}
  /* Public inventory header: keep title left, logo can hide if cramped */
  #publicInventoryOverlay [style*="font-size:30px"]{display:none !important;}
  /* Offer / popup modals fit small screens */
  #cbOfferModal > div{max-width:92vw !important;}
  /* Watchlist + requests inner widths */
  #watchlistScreen [style*="max-width:600px"]{padding:0.5rem 1rem 2rem !important;}

} /* ── END MOBILE ──────────────────────────────────────── */


/* ── landing/hero animations ── */
#landingHero > div, #landingHero > h1, #landingHero > p, #landingHero > button {
  animation:heroFadeUp 1s ease forwards;
  opacity:0;
}
#landingHero > div { animation-delay:0.3s; }
#landingHero > h1 { animation-delay:0.5s; }
#landingHero > p { animation-delay:0.7s; }
#landingHero > button { animation-delay:0.9s; }
@keyframes cbPop{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:scale(1);}}
@keyframes heroFadeUp {
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}