:root{
	--brand:#0D9488;
	--brand-accent:#14B8A6;
	--brand-deep:#134E4A;
	--brand-contrast:#ffffff;
	--ink:#0F172A;
	--text:#0F172A;
	--muted:#64748b;
	--bg:#F0FDFA;
	--surface:#ffffff;
	--surface-tint:#e6faf7;
	--border:#d1ede8;
	--border-strong:#a7d9d0;
	--shadow-sm:0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
	--shadow:0 4px 16px var(--brand-a08), 0 1px 4px rgba(15,23,42,0.06);
	--shadow-lg:0 20px 48px var(--brand-a14), 0 4px 12px rgba(15,23,42,0.08);
	--radius:16px;
	--radius-sm:10px;
	--radius-lg:22px;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color:var(--ink);
	background:var(--bg);
	background-image:radial-gradient(ellipse at 0% 0%, var(--brand-a14, rgba(20,184,166,0.12)) 0%, transparent 50%),
	                  radial-gradient(ellipse at 100% 100%, var(--brand-a08, var(--brand-a05)) 0%, transparent 40%);
	background-attachment:fixed;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	min-height:100vh;
}
a{color:var(--brand-deep); text-decoration:none}
a:hover{text-decoration:underline}
img{display:block; max-width:100%; height:auto}

/* ===== TYPOGRAPHY ===== */
h1{font-size:2rem; font-weight:800; line-height:1.2; letter-spacing:-0.03em; color:var(--ink)}
h2{font-size:1.35rem; font-weight:700; line-height:1.3; letter-spacing:-0.02em; color:var(--ink)}
h3{font-size:1.1rem; font-weight:700; line-height:1.4; color:var(--ink)}
h4{font-size:0.95rem; font-weight:600; color:var(--ink)}
p{color:var(--ink); line-height:1.65}
strong{font-weight:700}
small{font-size:0.825rem}
.eyebrow{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand-deep); margin:0 0 6px 0; font-weight:700; opacity:0.9}
.muted{color:var(--muted); font-size:0.925rem}
.error{color:#dc2626; font-size:0.9rem; font-weight:500; padding:10px 14px; background:#fef2f2; border:1px solid #fecaca; border-radius:var(--radius-sm)}

/* ===== LAYOUT ===== */
main{padding:32px 16px 60px}
.container{max-width:1100px; margin:0 auto}
.page-center{min-height:calc(100vh - 140px); display:flex; align-items:center; justify-content:center; padding:32px 16px}
.page-center .card{width:100%; max-width:440px}
.split-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:20px; align-items:start}
.split-layout--join{grid-template-columns:1.1fr 0.9fr}
.split-layout--settings{grid-template-columns:1.2fr 0.8fr}

/* ===== HEADER ===== */
header{background:rgba(255,255,255,0.9); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:sticky; top:0; z-index:100}
header .container{max-width:1100px; margin:0 auto; padding:0 16px; height:60px; display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:800; font-size:1.05rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px}
.brand:hover{text-decoration:none}
.brand .logo{width:34px; height:34px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-weight:800; font-size:15px; flex-shrink:0}

nav.links{display:flex; gap:4px; align-items:center}
nav.links a{color:var(--muted); text-decoration:none; padding:7px 12px; border-radius:var(--radius-sm); font-size:0.9rem; font-weight:500; transition:color 0.15s, background 0.15s}
nav.links a:hover{color:var(--ink); background:var(--surface-tint); text-decoration:none}
nav.links a.primary{background:var(--brand); color:var(--card-text); font-weight:600; padding:8px 16px; border-radius:var(--radius-sm)}
nav.links a.primary:hover{background:var(--brand-deep)}
.nav-user{color:var(--muted); font-size:0.875rem; padding:0 6px; white-space:nowrap}

/* ===== FOOTER ===== */
footer{padding:24px 16px; border-top:1px solid var(--border); background:rgba(255,255,255,0.6)}
footer .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px}
footer small{color:var(--muted)}
footer a{color:var(--muted); font-size:0.825rem}

/* ===== CARDS ===== */
.card{background:var(--surface); padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow); border:1px solid var(--brand-a05)}
.card + .card{margin-top:0}
.card--tinted{background:linear-gradient(160deg, var(--surface-tint) 0%, #ffffff 60%); border-color:var(--brand-a08)}
.card--subtle{background:#f8fffe; border:1px solid var(--border); box-shadow:none; padding:16px}
.card.warning{border-left:3px solid #f59e0b}
.card--hero{padding:28px 32px}

/* ===== HERO SECTION (landing) ===== */
.hero{background:linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 60%, var(--brand-light) 100%); padding:52px 40px; border-radius:var(--radius-lg); margin-bottom:24px; color:#fff; position:relative; overflow:hidden}
.hero::after{content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events:none}
.hero .eyebrow{color:rgba(255,255,255,0.75); opacity:1}
.hero h1{color:#fff; font-size:2.5rem; margin:8px 0 16px; max-width:600px}
.hero p{color:rgba(255,255,255,0.85); font-size:1.05rem; max-width:540px; margin-bottom:28px}
.hero .inline-actions{position:relative; z-index:1}

/* ===== BUTTONS ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; background:var(--brand); color:var(--card-text); border:none; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; font-weight:600; font-size:0.9rem; transition:background 0.15s, transform 0.1s, box-shadow 0.15s; box-shadow:0 2px 8px var(--brand-a28)}
.btn:hover{background:var(--brand-deep); text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 14px var(--brand-a28)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,0.92); color:var(--brand-deep); border:1px solid rgba(255,255,255,0.4); box-shadow:none}
.btn.ghost:hover{background:#fff; transform:translateY(-1px)}
.hero .btn.ghost{border-color:rgba(255,255,255,0.5)}
.inline-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}

/* ===== FORMS ===== */
form{display:flex; flex-direction:column; gap:14px; max-width:520px}
form.form-full{max-width:none}
form.form-full .btn{align-self:flex-start}
label{display:block; font-size:0.85rem; font-weight:600; color:var(--muted); line-height:1.4; margin-bottom:4px}
input, textarea, select{
	display:block; width:100%;
	padding:12px 14px;
	border:1.5px solid var(--border);
	border-radius:var(--radius-sm);
	background:#fcfffe;
	color:var(--ink);
	font-family:inherit;
	font-size:0.95rem;
	transition:border-color 0.15s, box-shadow 0.15s;
}
select{
	appearance:none;
	-webkit-appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	padding-right:36px;
	cursor:pointer;
}
input:focus, textarea:focus, select:focus{
	outline:none;
	border-color:var(--brand);
	box-shadow:0 0 0 3px var(--brand-a14);
}
input::placeholder{color:#a0adb8}
textarea{min-height:120px; resize:vertical; line-height:1.5}
.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
.form-hint{font-size:0.8rem; color:var(--muted); line-height:1.5}

/* ===== TABLES ===== */
.table{width:100%; border-collapse:collapse; margin-top:12px; font-size:0.9rem}
.table th, .table td{padding:11px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle}
.table th{font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); background:#f8fffe}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--surface-tint)}

/* ===== MEMBER CARD ===== */
.member-card{
	background:linear-gradient(145deg, var(--brand-deep) 0%, var(--brand-accent) 50%, var(--brand) 100%);
	color:#fff;
	border-radius:var(--radius-lg);
	padding:28px;
	box-shadow:var(--shadow-lg);
	position:relative;
	overflow:hidden;
}
.member-card::before{
	content:'';
	position:absolute;
	top:-40px; right:-40px;
	width:180px; height:180px;
	border-radius:50%;
	background:rgba(255,255,255,0.05);
	pointer-events:none;
}
.member-card--live{}
.member-card--preview{min-height:260px; opacity:0.9}
.member-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px}
.member-card__top h1, .member-card__top h2{margin:0; color:#fff; letter-spacing:-0.02em}
.member-card h1{color:#fff}
.member-card .eyebrow{color:rgba(255,255,255,0.6); opacity:1}
.member-card .muted{color:rgba(255,255,255,0.65); font-size:0.875rem}
.member-card__points{font-size:3.2rem; font-weight:800; margin:20px 0 6px; letter-spacing:-0.03em; line-height:1}
.rank-badge{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:12px; font-weight:700; letter-spacing:0.05em}

/* Avatar */
.avatar{width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.18); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; border:2px solid rgba(255,255,255,0.25); flex-shrink:0}

/* Progress bar */
.progress{width:100%; height:8px; background:rgba(255,255,255,0.18); border-radius:999px; overflow:hidden; margin:12px 0}
.progress__bar{height:100%; background:linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); border-radius:999px; min-width:4px}

/* Card metrics (on dark bg) */
.metric-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:16px 0}
.metric-card{background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.12); padding:14px; border-radius:var(--radius-sm)}
.metric-card strong{display:block; font-size:1.8rem; font-weight:800; color:#fff; margin-top:4px; letter-spacing:-0.02em}
.metric-card__label{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.65); font-weight:600}

/* Reward badge on card */
.reward{background:rgba(255,255,255,0.18); color:#fff; padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:14px; font-weight:600; font-size:0.9rem; border:1px solid rgba(255,255,255,0.2)}

/* ===== STAT CARDS (owner dashboard) ===== */
.stats-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px}
.marketing-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
.stat-card{padding:20px; border-radius:var(--radius)}
.stat-card span{display:block; color:var(--muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-bottom:8px}
.stat-card strong{display:block; font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1.1}

/* ===== QR ===== */
.qr img{max-width:260px; width:100%; height:auto}
.qr-panel{display:flex; flex-direction:column; gap:16px}
.qr--business img{max-width:200px; margin:0 auto}

/* ===== ACTIVITY + REWARD LISTS ===== */
.activity-list{display:flex; flex-direction:column}
.activity-item{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-item strong{display:block; font-size:0.9rem; font-weight:600}
.activity-item p{margin:3px 0 0; color:var(--muted); font-size:0.82rem}
.activity-item span{white-space:nowrap; color:var(--brand-deep); font-weight:700; font-size:0.85rem}

.reward-list{display:flex; flex-direction:column; gap:8px}
.reward-item{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius); background:#fafffe}
.reward-item--active{border-color:var(--brand-a28); background:var(--brand-a08)}
.reward-item strong{display:block; font-size:0.9rem}
.reward-item p{margin:3px 0 0; color:var(--muted); font-size:0.82rem}
.reward-item span{white-space:nowrap; font-weight:700; font-size:0.85rem; color:var(--brand-deep); background:var(--brand-a08); padding:4px 10px; border-radius:999px; flex-shrink:0}

/* ===== LOYALTY CARD (customer page) ===== */
.loyalty-wrap{max-width:460px; margin:0 auto; padding-bottom:40px}
.loyalty-card{background:linear-gradient(145deg,var(--brand-deep) 0%,var(--brand-accent) 50%,var(--brand) 100%); color:var(--card-text); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.loyalty-card::before{content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.05); pointer-events:none}
.loyalty-card__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.loyalty-card__biz{color:var(--card-text-a65); font-size:0.82rem; font-weight:600}
.loyalty-card__name{font-size:1.8rem; font-weight:800; color:var(--card-text); margin:0 0 4px; letter-spacing:-0.02em}
.loyalty-card__pts-row{display:flex; align-items:baseline; gap:8px}
.loyalty-card__pts{font-size:3rem; font-weight:800; line-height:1; letter-spacing:-0.03em; color:var(--card-text)}
.loyalty-card__pts-label{font-size:1rem; font-weight:600; color:var(--card-text-a70)}
.loyalty-card__qr{background:#fff; border-radius:14px; padding:20px 20px 14px; text-align:center; margin:20px 0 0; box-shadow:0 4px 20px rgba(0,0,0,0.14)}
.loyalty-card__qr img{width:180px; height:180px; object-fit:contain; display:block; margin:0 auto; border-radius:8px}
.loyalty-card__code{font-size:1rem; font-weight:700; letter-spacing:0.14em; color:var(--ink); margin:10px 0 2px}
.loyalty-card__hint{font-size:0.78rem; color:var(--muted); margin:0}
.loyalty-card__stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
.loyalty-stat{text-align:center; padding:12px 8px; background:var(--card-text-a20); border-radius:10px; border:1px solid var(--card-text-a30); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}

.loyalty-stat strong{display:block; font-size:1.6rem; font-weight:800; color:var(--card-text); line-height:1}
.loyalty-stat span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--card-text-a65); font-weight:600; margin-top:4px}
.loyalty-rewards{margin-top:28px}
.loyalty-rewards h3{font-size:1.15rem; font-weight:700; margin:0 0 14px; color:var(--ink)}

/* ===== PAGE HEADER ===== */
.page-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px}
.page-header h1{margin-bottom:0}
.page-back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:0.875rem; font-weight:600; padding:6px 0; margin-bottom:6px}
.page-back:hover{color:var(--ink)}

/* ===== SCAN RESULT ===== */
.scan-result{display:none; padding:16px 20px; border-radius:var(--radius); margin-bottom:20px; font-weight:600; font-size:1rem; line-height:1.4}
.scan-result:not(:empty){display:block}
.scan-result--success{background:rgba(16,185,129,0.12); border:1.5px solid rgba(16,185,129,0.3); color:#065f46}
.scan-result--error{background:rgba(239,68,68,0.10); border:1.5px solid rgba(239,68,68,0.25); color:#991b1b}
.scan-result--info{background:var(--brand-a08); border:1.5px solid var(--brand-a20); color:var(--brand-deep)}

/* ===== MISC ===== */
.hero-panel{background:linear-gradient(135deg, var(--brand-a08), var(--brand-a05)); border:1px solid var(--brand-a14)}
.scanner-mode-banner{margin-bottom:14px; padding:12px 16px; border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--brand-a08), var(--brand-a05)); color:var(--brand-deep); border:1px solid var(--brand-a14); font-weight:600; font-size:0.9rem}
.inline-actions{display:flex; flex-wrap:wrap; gap:10px}
.join-preview{display:flex; flex-direction:column; gap:18px}
.journey-list{margin:12px 0; padding-left:18px; display:flex; flex-direction:column; gap:10px}
.qr-settings-card{}
.dev-note{background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:12px; font-size:0.875rem}
hr{border:none; border-top:1px solid var(--border); margin:16px 0}

/* ===== CUSTOMER FLOW SCREENS ===== */
body.flow-body{background:var(--bg); min-height:100vh; display:flex; flex-direction:column}
.flow-main{flex:1; display:flex; align-items:center; justify-content:center; padding:40px 16px}
.flow-container{width:100%; max-width:400px}

.flow-brand{display:flex; align-items:center; gap:14px; margin-bottom:36px}
.flow-brand__avatar{width:42px; height:42px; border-radius:12px; background:var(--brand); color:#fff; font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px var(--brand-a28)}
.flow-brand__name{font-weight:700; font-size:15px; color:var(--ink)}
.flow-brand__label{font-size:12px; color:var(--muted); margin-top:1px}

.step-dots{display:flex; gap:6px; margin-bottom:36px}
.step-dot{flex:1; height:4px; border-radius:99px; background:var(--border); transition:background 0.25s}
.step-dot--active{background:var(--brand)}
.step-dot--done{background:var(--brand); opacity:0.4}

.flow-step{display:block}
.flow-step--hidden{display:none}
.flow-step--active{display:block}
.flow-step__icon{font-size:36px; margin-bottom:14px; line-height:1}
.flow-step__title{font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; color:var(--ink); margin:0 0 8px}
.flow-step__sub{color:var(--muted); font-size:0.95rem; margin:0 0 24px; line-height:1.6}
.flow-step__hint{text-align:center; color:var(--muted); font-size:0.8rem; margin-top:16px; line-height:1.5}
.flow-step__hint a{color:var(--brand-deep); font-weight:600}
.flow-step__btns{display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:0}

.flow-input{
	display:block; width:100%; margin-bottom:12px;
	padding:15px 18px; font-size:1.05rem;
	border:2px solid var(--border);
	border-radius:var(--radius);
	outline:none; background:#fff;
	font-family:inherit;
	color:var(--ink);
	transition:border-color 0.2s, box-shadow 0.2s;
}
.flow-input:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-a08)}
.flow-input::placeholder{color:#a0adb8}
.flow-input--code{font-size:2rem; letter-spacing:12px; text-align:center; font-weight:700; padding:20px 18px}

.flow-btn{
	display:block; width:100%; padding:16px 24px;
	font-size:1rem; font-weight:700;
	background:var(--brand); color:#fff;
	border:none; border-radius:var(--radius);
	cursor:pointer; text-align:center;
	transition:background 0.15s, transform 0.1s;
	font-family:inherit;
}
.flow-btn:hover{background:var(--brand-deep); transform:translateY(-1px)}
.flow-btn:active{transform:translateY(0)}
.flow-btn.flow-btn--ghost{background:transparent; color:var(--muted); border:2px solid var(--border); font-weight:600}
.flow-btn.flow-btn--ghost:hover{background:var(--surface-tint); color:var(--ink); transform:none}

.flow-rule-box{background:var(--surface-tint); border:1px solid var(--brand-a20); border-radius:var(--radius-sm); padding:13px 16px; font-size:0.875rem; color:var(--brand-deep); margin-bottom:20px; line-height:1.5}
.flow-phone-display{background:var(--surface-tint); border:2px solid var(--brand); border-radius:var(--radius); padding:14px 18px; font-size:1.3rem; font-weight:700; text-align:center; color:var(--brand-deep); margin-bottom:20px; letter-spacing:0.5px}
.flow-dev-note{background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px; font-size:0.825rem; text-align:center}

/* ===== WELCOME OVERLAY ===== */
.welcome-overlay{position:fixed; inset:0; background:linear-gradient(145deg, var(--brand-deep) 0%, var(--brand-accent) 60%, var(--brand) 100%); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; transition:opacity 0.5s, visibility 0.5s}
.welcome-overlay--hidden{opacity:0; visibility:hidden; pointer-events:none}
.welcome-overlay__inner{text-align:center; max-width:340px; width:100%}
.welcome-overlay__icon{font-size:64px; margin-bottom:20px; line-height:1; animation:pop 0.5s cubic-bezier(0.34,1.56,0.64,1)}
.welcome-overlay__title{font-size:2rem; font-weight:800; color:#fff; margin:0 0 10px; letter-spacing:-0.03em}
.welcome-overlay__sub{font-size:1rem; color:rgba(255,255,255,0.8); margin:0 0 28px; line-height:1.65}
@keyframes pop{0%{transform:scale(0.4); opacity:0} 100%{transform:scale(1); opacity:1}}

.ios-install-guide{background:rgba(255,255,255,0.12); border-radius:var(--radius); padding:16px 20px; margin-bottom:16px; text-align:left}
.ios-step{display:flex; align-items:center; gap:14px; color:#fff; font-size:0.9rem; padding:10px 0}
.ios-step:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.12)}
.ios-step__num{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.22); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff}

/* ===== SETTINGS SETUP GUIDE ===== */
.setup-guide{background:linear-gradient(90deg, var(--brand-a05), var(--brand-a05)); border:1.5px solid var(--brand-a20); border-radius:var(--radius-lg); padding:24px 28px}
.setup-guide--done{border-color:var(--brand-a28); color:var(--brand-deep); font-weight:600; padding:16px 20px; border-radius:var(--radius)}
.setup-checklist{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.setup-check{display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:var(--radius); background:#fff; border:1px solid var(--border)}
.setup-check--done{opacity:0.55}
.setup-check--todo{border-color:var(--brand-a20); background:var(--brand-a08)}
.setup-check__icon{width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px}
.setup-check--done .setup-check__icon{background:#10b981}
.setup-check strong{font-size:0.9rem; display:block}
.setup-check__hint{margin:4px 0 0; font-size:0.8rem; color:var(--muted); line-height:1.4}

/* ===== RESPONSIVE ===== */
@media (max-width:860px){
	.stats-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:640px){
	header .container{padding:0 12px}
	.container{padding-left:12px; padding-right:12px}
	nav.links a:not(.primary){display:none}
	h1{font-size:1.6rem}
	.hero{padding:32px 24px}
	.hero h1{font-size:1.8rem}
	.split-layout, .split-layout--join, .split-layout--settings{grid-template-columns:1fr}
	.form-grid{grid-template-columns:1fr}
	.metric-grid{grid-template-columns:1fr 1fr}
	.stats-grid{grid-template-columns:1fr 1fr}
	.marketing-grid{grid-template-columns:1fr}
	.activity-item{flex-wrap:wrap}
	.flow-step__title{font-size:1.5rem}
	.flow-input--code{font-size:1.6rem; letter-spacing:8px}
	.flow-step__btns{grid-template-columns:1fr 1fr}
}


*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; padding:0; color:var(--ink); background:radial-gradient(circle at top left, var(--brand-a14, var(--brand-a08)), transparent 28%), var(--bg); -webkit-font-smoothing:antialiased}
a{color:var(--brand-deep)}

header{background:rgba(255,255,255,0.86); border-bottom:1px solid var(--border); backdrop-filter:blur(8px)}
header .container{max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:700; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px}
.brand .logo{width:36px; height:36px; background:var(--brand); color:var(--brand-contrast); display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-weight:700}

nav.links{display:flex; gap:12px; align-items:center}
nav.links a{color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:8px}
nav.links a.primary{background:var(--brand); color:var(--brand-contrast)}

main{padding:24px 16px}
.container{max-width:1100px; margin:0 auto}

.hero{background:linear-gradient(135deg, var(--brand-a08), var(--brand-a05)); padding:24px; border-radius:18px; margin-bottom:16px; border:1px solid var(--border)}

.card{background:var(--surface); padding:18px; border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--brand-a05)}
.card.warning{border-left:4px solid #f59e0b}
.card--tinted{background:linear-gradient(180deg, var(--brand-a08), #ffffff)}
.card--subtle{background:#f7fffd; border:1px solid var(--border); box-shadow:none; margin-top:14px}

form{display:flex; flex-direction:column; gap:12px; max-width:520px}
form.form-full{max-width:none}
form.form-full .btn{align-self:flex-start}
label{display:block; font-size:14px; color:var(--muted)}
input, textarea, select{padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fcfffe; color:var(--ink)}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 4px var(--brand-a08)}
textarea{min-height:120px; resize:vertical}

.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; background:var(--brand); color:var(--brand-contrast); border:none; border-radius:12px; cursor:pointer; text-decoration:none; font-weight:600}
.btn.ghost{background:transparent; color:var(--brand-deep); border:1px solid var(--brand-a20)}

.table{width:100%; border-collapse:collapse; margin-top:12px}
.table th, .table td{padding:10px 12px; border-bottom:1px solid #eef3f4; text-align:left; vertical-align:top}
.table th{font-weight:600; font-size:13px; color:#334155}

.reward{background:#eefdf6; color:#065f46; padding:10px; border-radius:10px; margin-bottom:12px}

.qr img{max-width:280px; width:100%; height:auto; display:block}

.eyebrow{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand-deep); margin:0 0 8px 0; font-weight:700}
.muted{color:var(--muted)}
.form-hint{font-size:13px; color:var(--muted); margin:0}

.split-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:18px; align-items:start}
.split-layout--join{grid-template-columns:1.1fr 0.9fr}
.split-layout--settings{grid-template-columns:1.15fr 0.85fr}

.journey-list{margin:0; padding-left:18px; color:var(--ink); display:flex; flex-direction:column; gap:10px}

.member-card{background:linear-gradient(180deg, var(--brand-deep), var(--brand)); color:#fff; border-radius:22px; padding:22px; box-shadow:0 20px 40px var(--brand-a28)}
.member-card--preview{min-height:280px}
.member-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.member-card__top h1, .member-card__top h2{margin:0; color:#fff}
.member-card__points{font-size:40px; font-weight:800; margin:28px 0 10px 0}
.rank-badge{display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:13px; font-weight:700}

.avatar{width:52px; height:52px; border-radius:999px; background:rgba(255,255,255,0.18); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; border:1px solid rgba(255,255,255,0.26)}

.progress{width:100%; height:12px; background:rgba(15,23,42,0.08); border-radius:999px; overflow:hidden; margin:10px 0 12px 0}
.progress__bar{height:100%; background:linear-gradient(90deg, var(--brand-accent), var(--brand-light)); border-radius:999px}
.member-card .progress{background:rgba(255,255,255,0.16)}

.metric-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:18px 0}
.metric-card{background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); padding:14px; border-radius:14px}
.metric-card strong{display:block; font-size:28px; margin-top:6px}
.metric-card__label{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.82}

.join-preview{display:flex; flex-direction:column; gap:18px}
.welcome-banner{background:linear-gradient(90deg, var(--brand-a14), var(--brand-a08)); border:1px solid var(--border); color:var(--brand-deep); border-radius:16px; padding:14px 16px; margin-bottom:18px; font-weight:600}
.inline-actions{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 14px 0}
.qr-panel{display:flex; flex-direction:column}
.qr--business img{max-width:220px; margin:0 auto}
.scanner-mode-banner{margin-bottom:14px; padding:12px 14px; border-radius:14px; background:linear-gradient(90deg, var(--brand-a08), var(--brand-a05)); color:var(--brand-deep); border:1px solid var(--border); font-weight:600}

.hero-panel{background:linear-gradient(135deg, var(--brand-a08), var(--brand-a05)); border:1px solid var(--border)}
.stats-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px}
.marketing-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
.stat-card span{display:block; color:var(--muted); font-size:13px; margin-bottom:10px}
.stat-card strong{display:block; font-size:30px; line-height:1.1}

.activity-list{display:flex; flex-direction:column; gap:10px}
.activity-item{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #eef3f4}
.activity-item:last-child{border-bottom:none}
.activity-item strong{display:block}
.activity-item p{margin:4px 0 0 0; color:var(--muted)}
.activity-item span{white-space:nowrap; color:var(--brand-deep); font-weight:600}

.reward-list{display:flex; flex-direction:column; gap:10px}
.reward-item{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fbfffe}
.reward-item--active{border-color:var(--brand-a28); background:var(--brand-a08)}
.reward-item strong{display:block}
.reward-item p{margin:5px 0 0 0; color:var(--muted)}
.reward-item span{white-space:nowrap; font-weight:700; color:var(--brand-deep)}

.dev-note{background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:12px; padding:12px 14px; margin-bottom:12px}

footer{margin-top:40px; padding:20px 0; background:transparent}
footer .container{display:flex; justify-content:space-between; align-items:center}
footer small{color:var(--muted)}

.error{color:#b91c1c}

/* ===== CUSTOMER FLOW SCREENS ===== */
body.flow-body{background:var(--bg); min-height:100vh; display:flex; flex-direction:column}
.flow-main{flex:1; display:flex; align-items:center; justify-content:center; padding:40px 16px}
.flow-container{width:100%; max-width:420px}

.flow-brand{display:flex; align-items:center; gap:14px; margin-bottom:32px}
.flow-brand__avatar{width:44px; height:44px; border-radius:14px; background:var(--brand); color:#fff; font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.flow-brand__name{font-weight:700; font-size:16px; color:var(--text)}
.flow-brand__label{font-size:12px; color:var(--muted); margin-top:2px}

.step-dots{display:flex; gap:8px; margin-bottom:32px}
.step-dot{width:32px; height:6px; border-radius:99px; background:var(--border); transition:background 0.3s}
.step-dot--active{background:var(--brand)}
.step-dot--done{background:var(--brand); opacity:0.5}

.flow-step{display:block}
.flow-step--hidden{display:none}
.flow-step--active{display:block}
.flow-step__icon{font-size:40px; margin-bottom:16px; line-height:1}
.flow-step__title{font-size:28px; font-weight:800; letter-spacing:-0.5px; color:var(--text); margin:0 0 10px 0}
.flow-step__sub{color:var(--muted); font-size:15px; margin:0 0 24px 0; line-height:1.5}
.flow-step__hint{text-align:center; color:var(--muted); font-size:13px; margin-top:14px}
.flow-step__hint a{color:var(--brand-deep); font-weight:600}
.flow-step__btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:0}

.flow-input{display:block; width:100%; margin-bottom:14px; padding:16px 18px; font-size:17px; border:2px solid var(--border); border-radius:16px; outline:none; background:#fff; transition:border-color 0.2s; box-sizing:border-box}
.flow-input:focus{border-color:var(--brand)}
.flow-input--code{font-size:28px; letter-spacing:10px; text-align:center; font-weight:700; padding:20px 18px}

.flow-btn{display:block; width:100%; padding:17px 24px; font-size:16px; font-weight:700; background:var(--brand); color:#fff; border:none; border-radius:16px; cursor:pointer; text-align:center; transition:background 0.2s; margin-bottom:0}
.flow-btn:hover{background:var(--brand-deep)}
.flow-btn.flow-btn--ghost{background:transparent; color:var(--brand-deep); border:2px solid var(--border)}
.flow-btn.flow-btn--ghost:hover{background:var(--border)}
.flow-btn .arrow{transition:transform 0.2s}
.flow-btn:hover .arrow{transform:translateX(3px)}

.flow-rule-box{background:linear-gradient(90deg, var(--brand-a08), var(--brand-a05)); border:1px solid var(--brand-a20); border-radius:14px; padding:14px 16px; font-size:14px; color:var(--brand-deep); margin-bottom:20px; line-height:1.5}

.flow-card-preview{background:linear-gradient(135deg, var(--brand-deep), var(--brand-accent)); border-radius:20px; padding:20px; color:#fff; margin-bottom:20px}
.fcp__top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px}
.fcp__business{font-size:16px; font-weight:700; color:#fff; margin:0}
.fcp__avatar{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.2); color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center}
.fcp__name{font-size:20px; font-weight:800; color:#fff; margin:0 0 4px 0}
.fcp__points{font-size:14px; color:rgba(255,255,255,0.7); margin:0}

.flow-phone-display{background:var(--brand-a08); border:2px solid var(--brand); border-radius:14px; padding:14px 18px; font-size:20px; font-weight:700; text-align:center; color:var(--brand-deep); margin-bottom:20px; letter-spacing:0.3px}
.flow-dev-note{background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:14px; text-align:center}

/* ===== WELCOME OVERLAY ===== */
.welcome-overlay{position:fixed; inset:0; background:linear-gradient(135deg, var(--brand-deep), var(--brand-accent)); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; transition:opacity 0.5s, visibility 0.5s}
.welcome-overlay--hidden{opacity:0; visibility:hidden; pointer-events:none}
.welcome-overlay__inner{text-align:center; max-width:360px; width:100%}
.welcome-overlay__icon{font-size:72px; margin-bottom:24px; line-height:1; animation:pop 0.6s ease-out}
.welcome-overlay__title{font-size:32px; font-weight:800; color:#fff; margin:0 0 12px 0; letter-spacing:-0.5px}
.welcome-overlay__sub{font-size:16px; color:rgba(255,255,255,0.8); margin:0 0 32px 0; line-height:1.6}
@keyframes pop{0%{transform:scale(0.5); opacity:0} 80%{transform:scale(1.1)} 100%{transform:scale(1); opacity:1}}

/* iOS install guide */
.ios-install-guide{background:rgba(255,255,255,0.12); border-radius:16px; padding:16px 20px; margin-bottom:16px; text-align:left}
.ios-step{display:flex; align-items:center; gap:14px; color:#fff; font-size:15px; padding:8px 0}
.ios-step:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.12)}
.ios-step__num{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.25); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff}

/* ===== SETTINGS SETUP GUIDE ===== */
.setup-guide{background:linear-gradient(90deg, var(--brand-a08), var(--brand-a05)); border:1.5px solid var(--brand-a20); border-radius:20px; padding:24px 28px}
.setup-guide--done{background:linear-gradient(90deg, var(--brand-a14), var(--brand-a08)); border-color:var(--brand-a28); color:var(--brand-deep); font-weight:600; padding:16px 20px}
.setup-checklist{display:flex; flex-direction:column; gap:12px}
.setup-check{display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--border)}
.setup-check--done{opacity:0.6}
.setup-check--todo{border-color:var(--brand-a20); background:var(--brand-a05)}
.setup-check__icon{width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.setup-check--done .setup-check__icon{background:#10b981}
.setup-check__hint{margin:4px 0 0 0; font-size:13px; color:var(--muted)}

@media (max-width:640px){
	header .container, .container{padding-left:12px; padding-right:12px}
	nav.links{display:flex; gap:6px}
	nav.links a:not(.primary){display:none}
	.nav-user{display:none}
	.split-layout, .split-layout--join, .split-layout--settings{grid-template-columns:1fr}
	.form-grid{grid-template-columns:1fr}
	.metric-grid{grid-template-columns:1fr 1fr}
	.stats-grid{grid-template-columns:1fr 1fr}
	.marketing-grid{grid-template-columns:1fr}
	.activity-item{flex-direction:column}
	.flow-step__title{font-size:22px}
	.flow-input--code{font-size:22px; letter-spacing:6px}
}

/* ===================================================================
   LANDING PAGE  (all classes prefixed .lp-)
   =================================================================== */

.lp-main{padding:0}
.lp-main .container{padding-left:20px; padding-right:20px; max-width:1100px; margin:0 auto}

/* ---- Hero ---- */
.lp-hero{background:linear-gradient(140deg,#0c6e65 0%,#0D9488 55%,#14b8a6 100%); padding:88px 0 0; position:relative}
.lp-hero__inner{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-bottom:80px}
.lp-badge{display:inline-block; padding:5px 14px; border-radius:999px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.22); color:rgba(255,255,255,0.9); font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; margin-bottom:24px}
.lp-hero__h1{font-size:3.8rem; font-weight:900; line-height:1.05; letter-spacing:-0.04em; color:#fff; margin:0 0 20px}
.lp-hero__sub{font-size:1.1rem; color:rgba(255,255,255,0.8); line-height:1.65; max-width:460px; margin:0 0 36px}
.lp-hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.lp-btn-white{display:inline-flex; align-items:center; gap:6px; padding:14px 28px; background:#fff; color:var(--brand-deep); border:none; border-radius:var(--radius-sm); font-weight:700; font-size:1rem; text-decoration:none; box-shadow:0 4px 20px rgba(0,0,0,0.14); transition:transform 0.15s, box-shadow 0.15s}
.lp-btn-white:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.18); background:var(--brand-a08); text-decoration:none; color:var(--brand-deep)}
.lp-btn-ghost{display:inline-flex; align-items:center; padding:14px 28px; background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.3); border-radius:var(--radius-sm); font-weight:600; font-size:1rem; text-decoration:none; transition:background 0.15s}
.lp-btn-ghost:hover{background:rgba(255,255,255,0.2); text-decoration:none; color:#fff}
.lp-hero__note{color:rgba(255,255,255,0.45); font-size:0.8rem; margin:16px 0 0}

/* Card mockup in hero */
.lp-hero__visual{position:relative; display:flex; align-items:center; justify-content:center}
.lp-card-mock{background:#fff; border-radius:24px; padding:20px; width:280px; box-shadow:0 48px 96px rgba(0,0,0,0.28), 0 12px 32px rgba(0,0,0,0.16); transform:rotate(3deg); position:relative; z-index:1}
.lp-mc-card{background:linear-gradient(145deg,#0c6e65,#0D9488); border-radius:16px; padding:20px; color:#fff; margin-bottom:14px}
.lp-mc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.lp-mc-biz{font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.6)}
.lp-mc-badge{font-size:9px; font-weight:700; padding:2px 8px; background:rgba(255,255,255,0.18); border-radius:999px; color:#fff; border:1px solid rgba(255,255,255,0.25)}
.lp-mc-name{font-size:1.15rem; font-weight:800; color:#fff; margin:0 0 2px; letter-spacing:-0.01em}
.lp-mc-pts{font-size:2rem; font-weight:900; color:#fff; line-height:1; letter-spacing:-0.03em; margin:0 0 14px}
.lp-mc-pts span{font-size:0.85rem; font-weight:500; opacity:0.65}
.lp-mc-bar{height:5px; background:rgba(255,255,255,0.2); border-radius:999px; overflow:hidden}
.lp-mc-fill{height:100%; width:76%; background:rgba(255,255,255,0.65); border-radius:999px}
.lp-mc-qr{text-align:center; padding:4px 0 2px}
.lp-mc-qr svg{display:block; margin:0 auto}
.lp-mc-qr p{font-size:9px; font-weight:700; color:#94a3b8; letter-spacing:0.05em; text-transform:uppercase; margin:8px 0 0}
/* Floating chips */
.lp-chip{position:absolute; background:#fff; border-radius:12px; padding:10px 16px; font-weight:700; color:var(--ink); box-shadow:0 8px 28px rgba(0,0,0,0.13); white-space:nowrap; z-index:2; line-height:1.2; font-size:0.82rem}
.lp-chip__sub{display:block; font-size:0.7rem; font-weight:500; color:var(--muted); margin-top:1px}
.lp-chip--1{top:4%; left:0; color:#059669}
.lp-chip--2{bottom:18%; left:-8%; color:var(--brand-deep)}

/* Trust strip (bottom of hero) */
.lp-trust{background:rgba(0,0,0,0.12); border-top:1px solid rgba(255,255,255,0.1); padding:16px 0}
.lp-trust .container{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.lp-trust__label{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.45); white-space:nowrap; flex-shrink:0}
.lp-trust__logos{display:flex; gap:28px; flex-wrap:wrap}
.lp-trust__logos span{font-size:0.875rem; font-weight:700; color:rgba(255,255,255,0.55)}

/* ---- How it works ---- */
.lp-section{padding:88px 0}
.lp-section__eyebrow{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand-deep); font-weight:700; text-align:center; margin:0 0 12px}
.lp-section__h2{font-size:2.4rem; font-weight:900; text-align:center; margin:0 0 0; letter-spacing:-0.035em; color:var(--ink)}
.lp-section__sub{text-align:center; color:var(--muted); font-size:1rem; max-width:500px; margin:14px auto 0; line-height:1.65}
.lp-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:64px; position:relative}
.lp-steps::before{content:''; position:absolute; top:28px; left:calc(16.67% + 28px); right:calc(16.67% + 28px); height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-accent)); opacity:0.25}
.lp-step{text-align:center; padding:0 24px}
.lp-step__num{width:56px; height:56px; border-radius:50%; background:var(--brand); color:#fff; font-size:1.4rem; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 8px 24px var(--brand-a28), 0 0 0 8px var(--brand-a08)}
.lp-step h3{margin:0 0 10px; font-size:1.05rem; font-weight:700}
.lp-step p{color:var(--muted); font-size:0.9rem; line-height:1.65; margin:0}

/* ---- Features (dark section) ---- */
.lp-features{background:linear-gradient(160deg,#0a3d3a 0%,#134e4a 100%); padding:88px 0}
.lp-features__eyebrow{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); font-weight:700; margin:0 0 12px}
.lp-features__h2{font-size:2.4rem; font-weight:900; color:#fff; margin:0 0 56px; letter-spacing:-0.035em; max-width:500px}
.lp-features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.lp-feature{padding:28px 24px; border-radius:var(--radius-lg); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); transition:background 0.2s, border-color 0.2s}
.lp-feature:hover{background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.14)}
.lp-feature__icon{font-size:2rem; margin-bottom:16px; line-height:1}
.lp-feature h3{color:#fff; margin:0 0 8px; font-size:1rem; font-weight:700}
.lp-feature p{color:rgba(255,255,255,0.58); font-size:0.875rem; line-height:1.65; margin:0}

/* ---- Pricing ---- */
.lp-pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; align-items:start}
.lp-plan{background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column}
.lp-plan--featured{background:linear-gradient(160deg,var(--brand) 0%,#0c6e65 100%); border-color:transparent; box-shadow:0 32px 64px rgba(13,148,136,0.22), 0 8px 24px rgba(13,148,136,0.14); transform:scale(1.04)}
.lp-plan__tag{display:inline-block; background:rgba(255,255,255,0.2); color:#fff; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:4px 12px; border-radius:999px; margin-bottom:16px; align-self:flex-start}
.lp-plan__name{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin:0 0 14px}
.lp-plan--featured .lp-plan__name{color:rgba(255,255,255,0.65)}
.lp-plan__price{font-size:3rem; font-weight:900; letter-spacing:-0.04em; color:var(--ink); line-height:1; margin:0 0 4px}
.lp-plan--featured .lp-plan__price{color:#fff}
.lp-plan__price span{font-size:1rem; font-weight:600; opacity:0.55; letter-spacing:0}
.lp-plan__desc{color:var(--muted); font-size:0.875rem; margin:8px 0 0; padding-bottom:24px; border-bottom:1px solid var(--border)}
.lp-plan--featured .lp-plan__desc{color:rgba(255,255,255,0.6); border-color:rgba(255,255,255,0.18)}
.lp-plan__list{list-style:none; padding:0; margin:24px 0 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.lp-plan__list li{font-size:0.875rem; color:var(--ink); padding-left:22px; position:relative; line-height:1.5}
.lp-plan__list li::before{content:'✓'; position:absolute; left:0; color:var(--brand); font-weight:800; font-size:0.85rem}
.lp-plan--featured .lp-plan__list li{color:rgba(255,255,255,0.88)}
.lp-plan--featured .lp-plan__list li::before{color:rgba(255,255,255,0.6)}
.lp-plan__btn{display:flex; justify-content:center; align-items:center; padding:13px; border-radius:var(--radius-sm); font-weight:700; font-size:0.95rem; text-decoration:none; border:1.5px solid var(--border); color:var(--brand-deep); background:#fff; transition:all 0.15s}
.lp-plan__btn:hover{border-color:var(--brand); background:var(--surface-tint); text-decoration:none}
.lp-plan--featured .lp-plan__btn{background:#fff; color:var(--brand-deep); border-color:transparent; box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.lp-plan--featured .lp-plan__btn:hover{background:#ecfdf5}

/* ---- Bottom CTA strip ---- */
.lp-cta-strip{background:linear-gradient(135deg,#0a3d3a 0%,#134e4a 100%); padding:80px 0}
.lp-cta-strip__inner{display:flex; gap:40px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.lp-cta-strip h2{color:#fff; margin:0 0 8px; font-size:2rem; letter-spacing:-0.03em; font-weight:800}
.lp-cta-strip p{color:rgba(255,255,255,0.65); margin:0; font-size:1rem}

/* ---- Landing responsive ---- */
@media (max-width:920px){
  .lp-hero__inner{grid-template-columns:1fr; gap:0}
  .lp-hero__visual{display:none}
  .lp-features-grid{grid-template-columns:1fr 1fr}
  .lp-pricing{grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto}
  .lp-plan--featured{transform:none}
  .lp-steps::before{display:none}
}
@media (max-width:640px){
  .lp-hero{padding-top:56px}
  .lp-hero__inner{padding-bottom:52px}
  .lp-hero__h1{font-size:2.6rem}
  .lp-steps{grid-template-columns:1fr; gap:36px; margin-top:44px}
  .lp-features-grid{grid-template-columns:1fr}
  .lp-section{padding:64px 0}
  .lp-features{padding:64px 0}
  .lp-cta-strip{padding:56px 0}
  .lp-section__h2, .lp-features__h2{font-size:1.9rem}
  .lp-cta-strip h2{font-size:1.6rem}
  .lp-cta-strip__inner{flex-direction:column; text-align:center}
}


/* ── Reward wizard ── */
.btn--ghost{background:transparent; color:var(--muted); border:2px solid var(--border); font-weight:600; box-shadow:none}
.btn--ghost:hover{background:var(--surface-tint); color:var(--ink); transform:none}
.btn--primary{background:var(--brand); color:#fff}

#reward-wizard{padding:4px 0 8px}
.rw-steps{display:flex; align-items:flex-start; gap:0; margin-bottom:32px; position:relative}
.rw-steps::before{content:''; position:absolute; top:15px; left:calc(8% + 8px); right:calc(8% + 8px); height:1px; background:var(--border); z-index:0}
.rw-step{display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; position:relative; z-index:1}
.rw-step span{width:30px; height:30px; border-radius:50%; background:var(--surface); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; color:var(--muted); transition:background 0.2s, border-color 0.2s, color 0.2s}
.rw-step small{font-size:0.68rem; color:var(--muted); font-weight:500; letter-spacing:0.01em}
.rw-step.active span{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 3px var(--brand-a14)}
.rw-step.active small{color:var(--brand); font-weight:700}
.rw-step.done span{background:var(--brand); border-color:var(--brand); color:#fff}
.rw-step.done small{color:var(--brand)}

.rw-panel{animation:rwFadeIn 0.2s ease}
@keyframes rwFadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.rw-title{font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:4px}
.rw-sub{font-size:0.82rem; color:var(--muted); margin-bottom:16px}
.rw-input{width:100%; padding:10px 14px; border:2px solid var(--border); border-radius:var(--radius-sm); font-size:0.95rem; color:var(--ink); background:var(--surface); transition:border-color 0.15s; font-family:inherit; box-sizing:border-box}
.rw-input:focus{outline:none; border-color:var(--brand)}
textarea.rw-input{resize:vertical; min-height:80px}
.rw-img-preview{margin-top:12px; border-radius:var(--radius-sm); overflow:hidden; max-width:200px; border:2px solid var(--border)}
.rw-img-preview img{width:100%; height:140px; object-fit:cover; display:block}

.rw-tag-pills{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:24px}
.rw-tag{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:var(--brand); color:#fff; border-radius:999px; font-size:0.8rem; font-weight:600}
.rw-tag button{background:none; border:none; color:#fff; cursor:pointer; font-size:1rem; line-height:1; padding:0; opacity:0.8}
.rw-tag button:hover{opacity:1}
.rw-cat-suggestions{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; min-height:20px}
.rw-sugg-pill{padding:4px 12px; border-radius:999px; border:2px solid var(--border); background:var(--surface-tint); color:var(--ink); font-size:0.8rem; cursor:pointer; font-weight:500; transition:background 0.15s, border-color 0.15s}
.rw-sugg-pill:hover{background:var(--brand); border-color:var(--brand); color:#fff}

.rw-nav{display:flex; align-items:center; justify-content:flex-end; margin-top:20px; gap:10px}
.rw-nav--split{justify-content:space-between}

/* ── Reward image dropzone ── */
.rw-dropzone{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; border:2px dashed var(--border); border-radius:12px; min-height:140px; width:100%; box-sizing:border-box; cursor:pointer; transition:border-color 0.15s, background 0.15s; background:var(--surface); text-align:center; padding:28px; overflow:hidden; position:relative}
.rw-dropzone:hover, .rw-dropzone--over{border-color:var(--brand); background:var(--brand-a05)}
.rw-dropzone--filled{border-style:solid; border-color:var(--brand); padding:0; min-height:180px}
#rw-dz-placeholder{display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
#rw-dz-placeholder svg{color:var(--brand); opacity:0.5}
#rw-dz-placeholder span{font-size:0.85rem; color:var(--muted); font-weight:500}

/* ── Reward list images (settings/owner only, scoped to .mgmt-reward-list) ── */
.mgmt-reward-list{margin-left:-4px; margin-right:-4px}
.mgmt-reward-list .reward-item{display:flex; align-items:center; gap:12px; padding:14px 0; border:none; border-bottom:1px solid var(--border); border-radius:0; background:transparent; flex-wrap:wrap}
.mgmt-reward-list .reward-item:last-child{border-bottom:none}
.mgmt-reward-list .reward-item > div:first-of-type{flex:1; min-width:0}
.mgmt-reward-list .reward-item > div:last-child{flex-shrink:0; display:flex; gap:8px; align-items:center; padding-right:4px}
.reward-item__img{width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--surface-tint)}
.reward-item__img--placeholder{width:44px; height:44px; border-radius:8px; flex-shrink:0; background:var(--surface-tint); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:#94a3b8}

/* ── Modal ── */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:999; align-items:center; justify-content:center; padding:16px}
.modal-box{background:var(--surface); border-radius:16px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.25); animation:modalIn 0.18s ease}
@keyframes modalIn{from{opacity:0;transform:scale(0.96) translateY(8px)} to{opacity:1;transform:none}}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0}
.modal-box form{padding:20px 24px 24px}
.modal-close{background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--muted); padding:0; transition:color 0.1s}
.modal-close:hover{color:var(--ink)}