:root{
  --brand:#4E6B34; /* main green from text/bag */
  --accent:#6AB2C3; /* light blue background */
  --text:#2B2B2B;
  --bg:#F2EDE0; /* better match for logo off-white */
  --muted:#6B7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --radius:16px;
  --success:#10b981;
  --error:#ef4444;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;color:var(--text);background:var(--bg);line-height:1.6;}
.container{max-width:1000px;margin:0 auto;padding:16px;}

/* Header */
.site-header{position:sticky;top:0;background:#2E5E2E;border-bottom:1px solid #1a3a1a;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.15);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;font-weight:600;}
.brand .brand-tagline{
  font-family: 'Poppins', 'Montserrat', 'Lato', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  color: white;
  letter-spacing: 1.2px;
  font-size: 14px;
  text-transform: none;
  margin-left: 8px;
}
.brand .logo{height:120px;width:auto;max-width:120px;object-fit:contain;vertical-align:middle;background:transparent;padding:4px;}
.nav{display:flex;align-items:center;gap:12px;}
.nav a{text-decoration:none;color:white;padding:8px 12px;border-radius:8px;transition:background 0.2s;}
.nav a:hover{background:rgba(255,255,255,0.1)}
.nav .btn-primary{margin-left:8px}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:20px 0;color:var(--muted)}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;}
.admin-link{color:var(--muted);text-decoration:none;font-size:14px;}

/* Hero */
.hero{padding:60px 0;background:linear-gradient(135deg, var(--accent), #5a9fb8);color:#fff;text-align:center;border-radius:var(--radius);margin-bottom:40px;}
.hero h1{font-size:2.5rem;margin-bottom:16px;font-weight:700;}
.hero p{font-size:1.25rem;margin-bottom:32px;opacity:0.9;}
.hero .btn-lg{padding:16px 32px;font-size:18px;font-weight:600;}

/* Grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:32px 0;}

/* Mobile stack layout */
.mobile-stack {
  display: flex;
  gap: 30px;
  margin: 32px 0;
}

@media screen and (max-width:900px){
  .mobile-stack {
    flex-direction: column !important;
  }
  .mobile-stack > div {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .hero h1{font-size:2rem}
  .hero{padding:40px 0}
}

/* Fallback for grid classes */
@media screen and (max-width:900px){
  .grid-3,.grid-2{
    display:flex !important;
    flex-direction:column !important;
    gap:30px !important;
  }
  .grid-2 > div, .grid-3 > div {
    width:100% !important;
    margin-bottom:20px !important;
  }
}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:box-shadow 0.2s;}
.card:hover{box-shadow:0 6px 16px rgba(0,0,0,.1);}
.card h3{margin-top:0;color:var(--brand);}

.plan{text-align:center;position:relative;}
.plan.highlight{border:2px solid var(--brand);transform:scale(1.02);}
.plan.highlight::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:white;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;}
.plan.special{border:2px solid #ff6b35;background:linear-gradient(135deg, #fff9f0, #fef3e8);}
.plan.special::before{content:'Best Value';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#ff6b35;color:white;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;}

/* Grid adjustments for 4-column layout */
@media (max-width:1200px){
  .grid-2[style*="repeat(4, 1fr)"]{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:768px){
  .grid-2[style*="repeat(4, 1fr)"]{grid-template-columns:1fr !important}
}

.price{font-size:2rem;margin:16px 0;font-weight:700;color:var(--brand);}
.plan ul{list-style:none;padding:0;margin:16px 0;}
.plan li{padding:4px 0;color:var(--muted);}

/* Buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text);background:#fff;transition:all 0.2s;font-weight:500;cursor:pointer;font-size:14px;}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.1);}

.btn-primary{background:#6AB2C3;border-color:#6AB2C3;color:white;}
.btn-primary:hover{background:#5a9fb8;transform:translateY(-1px);}

.btn-outline{background:#fff;border-color:var(--brand);color:var(--brand);}
.btn-outline:hover{background:var(--brand);color:white;}

.btn-small{padding:8px 12px;font-size:12px;}
.btn-lg{padding:16px 28px;font-size:16px;}

/* Hero button specific styling */
.hero .btn-primary{background:#4E6B34;border-color:#4E6B34;color:white;}
.hero .btn-primary:hover{background:#3b5126;}

/* Forms */
.form{max-width:600px;}
.form label{display:block;margin-bottom:16px;font-weight:500;}
.form input,.form select,.form textarea{width:100%;padding:12px;border:2px solid var(--border);border-radius:8px;font-size:14px;transition:border-color 0.2s;margin-top:4px;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);}
.form textarea{resize:vertical;min-height:80px;}

.form-actions{display:flex;align-items:center;gap:16px;margin-top:24px;}
.form-actions .btn{margin:0;}

.addons{margin:16px 0;}
.addons label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:normal;}
.addons input[type="checkbox"]{width:auto;margin:0;}

.pricing-display{background:#f8fafc;border:2px solid var(--brand);border-radius:12px;padding:20px;margin:20px 0;text-align:center;}
.pricing-display h3{margin:0 0 8px 0;color:var(--brand);}
.pricing-display .total{font-size:2rem;font-weight:700;color:var(--brand);margin-bottom:4px;}
.pricing-display .billing-note{font-size:14px;color:var(--muted);font-weight:500;margin-bottom:12px;}
.pricing-breakdown{font-size:14px;color:var(--muted);margin-top:12px;}
.pricing-breakdown div{display:flex;justify-content:space-between;padding:2px 0;}

/* Pricing page billing notes */
.card.plan .billing-note{font-size:14px;color:var(--muted);font-weight:500;margin:4px 0 12px 0;}

/* Flash messages */
.flash-list{list-style:none;padding:0;margin:16px 0;}
.flash{padding:12px 16px;border-radius:8px;margin-bottom:8px;font-weight:500;}
.flash-success{background:#ecfdf5;border:1px solid var(--success);color:#065f46;}
.flash-error{background:#fef2f2;border:1px solid var(--error);color:#991b1b;}

/* Badges */
.badge{display:inline-block;padding:4px 10px;border-radius:12px;background:#eef2ff;border:1px solid #c7d2fe;font-size:12px;font-weight:500;}
.badge.scheduled{background:#fef3c7;border-color:#f59e0b;color:#92400e;}
.badge.completed{background:#dcfce7;border-color:#22c55e;color:#166534;}
.badge.in-progress{background:#dbeafe;border-color:#3b82f6;color:#1e40af;}
.badge.no-show{background:#fee2e2;border-color:#ef4444;color:#991b1b;}

/* Tables */
.table{width:100%;border-collapse:collapse;margin-top:16px;}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.table th{background:#f9fafb;font-weight:600;color:var(--brand);}
.table tr:hover{background:#f9fafb;}

/* Responsive adjustments */
@media (max-width:600px){
  .container{padding:12px;}
  .brand .logo{height:80px;max-width:80px;}
  .brand .brand-tagline{font-size:12px;letter-spacing:0.8px;}
  .hero{margin:0 -12px 24px -12px;border-radius:0;}
  .header-inner{padding:8px 12px;flex-direction:column;gap:8px;}
  .nav{flex-wrap:wrap;gap:8px;}
  .nav a{padding:6px 10px;font-size:14px;}
  .form{max-width:100%;}
  .pricing-display{margin:16px -12px;}
}

/* How it works section */
.how-it-works{margin:40px 0;}
.how-it-works h2{text-align:center;margin-bottom:32px;color:var(--brand);font-size:2rem;}

/* Hints and help text */
.hint{color:var(--muted);font-size:14px;margin-top:8px;}

/* Lists */
.list{list-style:none;padding:0;}
.list li{padding:8px 0;border-bottom:1px solid var(--border);}
.list li:last-child{border-bottom:none;}