/* ============================================================
   UNLAD Digital — demo-pages.css
   Shared styles for all four individual demo business websites.

   Loaded alongside ../styles.css on each demo page.
   Each page overrides :root CSS variables in a <style> block
   to apply its own business colour theme.

   TABLE OF CONTENTS:
   1.  Demo Top Banner (UNLAD branding strip)
   2.  Business Nav
   3.  Business Hero
   4.  Inline Form Card (quote / booking)
   5.  Stats / Trust Bar
   6.  Section Helpers
   7.  Image Placeholders
   8.  Review Cards
   9.  Service Area Tags
   10. Before / After Panels
   11. Gallery Grid
   12. Menu Items (Restaurant)
   13. Schedule Table (Restaurant)
   14. Package Cards (Tech)
   15. Tech Diagram
   16. Team Cards (Salon)
   17. Service Pricing List (Salon)
   18. First-Time Offer Banner (Salon)
   19. Hours & Location Box
   20. Problem / Solution Section (Tech)
   21. UNLAD Digital CTA Strip
   22. Business Footer
   23. Mobile Sticky CTA
   24. Responsive
============================================================ */


/* ── 1. DEMO TOP BANNER ──────────────────────────────────────
   Fixed at the top of the viewport on all demo pages.
   Always uses UNLAD brand colours — never inherits the
   business theme. Gives visitors a clear way to exit the demo.
─────────────────────────────────────────────────────────── */

/* Height variable — used by biz-nav offset and body padding */
:root { --demo-bar-h: 46px; }

.demo-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: var(--demo-bar-h);
  background: #0c2444;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/* Push page content below the fixed demo bar */
body { padding-top: var(--demo-bar-h); }

/* Override scroll-padding-top for demo pages:
   46px (demo bar) + 68px (biz-nav) = 114px */
html { scroll-padding-top: 114px; }

.demo-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.demo-top-bar-text {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* allow shrinking */
}
.demo-top-bar-text strong { color: #fff; }
.demo-top-bar-text a {
  color: #fbbf24;
  font-weight: 600;
  text-decoration: none;
}
.demo-top-bar-text a:hover { text-decoration: underline; }

.demo-top-bar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.demo-top-bar-actions a {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  line-height: 1;
}
.btn-demo-back {
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.28);
}
.btn-demo-back:hover { background: rgba(255,255,255,0.12); color: #fff; }

.btn-demo-want {
  background: #f97316;
  color: #fff;
  border: 1px solid #f97316;
}
.btn-demo-want:hover { background: #ea6c0a; color: #fff; }


/* ── 2. BUSINESS NAV ─────────────────────────────────────────
   Sticky below the fixed demo bar.
   Uses --primary and --accent from each page's :root override.
─────────────────────────────────────────────────────────── */
.biz-nav {
  position: sticky;
  top: var(--demo-bar-h); /* offset below the fixed demo bar */
  z-index: 998;
  height: 68px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.biz-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.biz-logo {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--primary);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color 0.2s;
}
.biz-logo:hover { color: var(--accent); }

.biz-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.biz-nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-body);
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.biz-nav-links a:hover {
  color: var(--primary);
  background: var(--bg);
}
/* Primary CTA in the business nav */
.biz-nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 18px !important;
  margin-left: 4px;
}
.biz-nav-cta:hover {
  background: var(--accent-dark) !important;
}

/* Hamburger — hidden on desktop */
.biz-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  z-index: 1001;
}
.biz-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.biz-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.biz-hamburger.open span:nth-child(2) { opacity: 0; }
.biz-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── 3. BUSINESS HERO ────────────────────────────────────────
   Dark gradient, uses --primary and --primary-dark.
─────────────────────────────────────────────────────────── */
.biz-hero {
  position: relative;
  background: linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 80px 0 72px;
  overflow: hidden;
}
.biz-hero-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.biz-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.biz-shape-1 { width: 600px; height: 600px; top: -200px; right: -150px; }
.biz-shape-2 { width: 400px; height: 400px; bottom: -150px; left: -120px; }

.biz-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Split hero: content on left, card on right */
.biz-hero-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}

/* Centred hero variant */
.biz-hero-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.biz-hero-centered .biz-hero-btns { justify-content: center; }
.biz-hero-centered .biz-hero-trust { justify-content: center; }

.biz-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}
.biz-hero h1 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.13;
  margin-bottom: 18px;
}
.biz-hero-sub {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  line-height: 1.72;
  margin-bottom: 30px;
}
.biz-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.biz-hero-trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.biz-trust-item {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.68);
  display: flex;
  align-items: center;
  gap: 5px;
}
.biz-trust-item::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
}


/* ── 4. INLINE FORM CARD ─────────────────────────────────────
   White card used in the hero split and standalone sections.
─────────────────────────────────────────────────────────── */
.biz-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.biz-form-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.biz-form-subtitle {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.biz-form-card .form-group { margin-bottom: 14px; }
.biz-form-card label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.biz-form-card input,
.biz-form-card select,
.biz-form-card textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.93rem;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.biz-form-card input:focus,
.biz-form-card select:focus,
.biz-form-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.biz-form-card textarea { resize: vertical; min-height: 80px; }
.biz-form-card select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.biz-form-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}


/* ── 5. STATS / TRUST BAR ────────────────────────────────────*/
.biz-stats-bar { background: var(--primary); padding: 0; }
.biz-stats-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.biz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 32px;
  border-right: 1px solid rgba(255,255,255,0.12);
  gap: 3px;
}
.biz-stat:last-child { border-right: none; }
.biz-stat-icon { font-size: 1.5rem; }
.biz-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.biz-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}


/* ── 6. SECTION HELPERS ──────────────────────────────────────*/
.biz-section { padding: 80px 0; }
.biz-section-alt { background: var(--bg); }
.biz-section-dark { background: var(--primary); }
.biz-section-dark h2 { color: #fff; }
.biz-section-dark .section-label {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}
.biz-section-dark p { color: rgba(255,255,255,0.72); }

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

/* Reuse .section-header from styles.css but left-aligned variant */
.section-header-left {
  max-width: 600px;
  margin-bottom: 44px;
}
.section-header-left h2 { margin-bottom: 12px; }
.section-header-left p { font-size: 1rem; color: var(--text-body); }


/* ── 7. IMAGE PLACEHOLDERS ───────────────────────────────────
   Replace the .img-ph div with a real <img> tag later.
─────────────────────────────────────────────────────────── */
.img-ph {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--border) 100%);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  min-height: 200px;
  padding: 16px;
}
.img-ph-icon { font-size: 2.2rem; opacity: 0.45; }
/* Warm accent gradient variant */
.img-ph-warm {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--primary-light) 100%);
}
/* Dark variant */
.img-ph-dark {
  background: linear-gradient(135deg, #1e3a5c 0%, #0a2540 100%);
  color: rgba(255,255,255,0.35);
}
/* Food photo variant */
.img-ph-food {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  color: #92400e;
}
/* Salon/beauty variant */
.img-ph-salon {
  background: linear-gradient(135deg, var(--accent-light) 0%, #fdf4ff 100%);
}


/* ── 8. REVIEW CARDS ─────────────────────────────────────────*/
.review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.review-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-text {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-body);
  font-style: italic;
  flex: 1;
  margin-bottom: 16px;
}
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.review-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
}
.review-location {
  font-size: 0.75rem;
  color: var(--text-muted);
}


/* ── 9. SERVICE AREA TAGS ────────────────────────────────────*/
.service-area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.area-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  transition: background 0.2s, border-color 0.2s;
}
.area-tag:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.area-tag::before { content: '📍'; font-size: 0.82rem; }


/* ── 10. BEFORE / AFTER ──────────────────────────────────────*/
.ba-card-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.ba-panel {
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.ba-panel .img-ph,
.ba-panel .ba-img { border-radius: 0; flex: 1; }
.ba-panel-label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  z-index: 2;
}
.ba-panel-label.label-before { background: rgba(220,38,38,0.88); color: #fff; }
.ba-panel-label.label-after  { background: rgba(22,163,74,0.88);  color: #fff; }
.ba-swap-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.ba-caption {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}


/* ── 11. GALLERY GRID ────────────────────────────────────────*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gallery-item .img-ph { min-height: unset; height: 100%; border-radius: 0; }
.gallery-item-tall { aspect-ratio: 3/4; }
.gallery-item-wide { aspect-ratio: 16/9; grid-column: span 2; }


/* ── 12. MENU ITEMS (Restaurant) ─────────────────────────────*/
.menu-category-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}
.menu-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: box-shadow 0.2s;
}
.menu-item:hover { box-shadow: var(--shadow); }
.menu-item-emoji {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-light), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.menu-item-desc {
  font-size: 0.8rem;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 6px;
}
.menu-item-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
}


/* ── 13. SCHEDULE TABLE (Restaurant) ─────────────────────────*/
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.schedule-table th {
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 18px;
  text-align: left;
}
.schedule-table td {
  padding: 13px 18px;
  font-size: 0.9rem;
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
}
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr.today td {
  background: var(--accent-light);
  font-weight: 600;
  color: var(--text-dark);
}
.schedule-table tr.closed td { color: var(--text-muted); font-style: italic; }
.schedule-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.status-open  { background: var(--success-bg); color: var(--success); }
.status-closed { background: var(--error-bg); color: var(--error); }


/* ── 14. PACKAGE CARDS (Tech) ────────────────────────────────*/
.package-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.package-card.pkg-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.pkg-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.pkg-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.pkg-price {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 2px;
}
.pkg-price-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.pkg-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 18px;
}
.pkg-features {
  list-style: none;
  flex: 1;
  margin-bottom: 22px;
}
.pkg-features li {
  font-size: 0.87rem;
  color: var(--text-body);
  padding: 6px 0 6px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pkg-features li:last-child { border-bottom: none; }
.pkg-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}


/* ── 15. TECH DIAGRAM ────────────────────────────────────────*/
.tech-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 32px 24px;
  background: var(--primary-light);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.diagram-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  min-width: 110px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s;
}
.diagram-node:hover { border-color: var(--accent); }
.diagram-node-icon { font-size: 1.8rem; }
.diagram-node-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-dark);
  line-height: 1.35;
}
.diagram-arrow {
  font-size: 1.4rem;
  color: var(--accent);
  padding: 0 6px;
  font-weight: 700;
  flex-shrink: 0;
}


/* ── 16. TEAM CARDS (Salon) ──────────────────────────────────*/
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.team-photo {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.team-info { padding: 20px 18px; }
.team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.team-title {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.team-bio {
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.62;
}


/* ── 17. SERVICE PRICING LIST (Salon) ────────────────────────*/
.pricing-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pricing-list-header {
  background: var(--primary);
  color: #fff;
  padding: 13px 22px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.pricing-row:last-child { border-bottom: none; }
.pricing-service-name {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text-dark);
}
.pricing-service-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.pricing-service-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── 18. FIRST-TIME OFFER BANNER (Salon) ─────────────────────*/
.offer-banner {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.offer-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 6px;
  display: inline-block;
}
.offer-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
.offer-subtitle { font-size: 0.9rem; opacity: 0.85; }
.offer-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.offer-cta-btn:hover { background: rgba(255,255,255,0.9); color: var(--accent-dark); }


/* ── 19. HOURS & LOCATION BOX ────────────────────────────────*/
.hours-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.info-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
}
.hours-row:last-child { border-bottom: none; }
.hours-day { font-weight: 600; color: var(--text-dark); }
.hours-row.today-row {
  background: var(--accent-light);
  margin: 0 -8px;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.hours-row.today-row .hours-day { color: var(--accent); }
.location-line {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 14px;
}
.map-ph {
  background: linear-gradient(135deg, var(--primary-light), var(--border));
  border-radius: 8px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  gap: 6px;
}


/* ── 20. PROBLEM / SOLUTION SECTION (Tech) ───────────────────*/
.prob-sol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.prob-card, .sol-card {
  border-radius: var(--radius);
  padding: 28px 24px;
}
.prob-card {
  background: var(--error-bg);
  border: 1px solid #fca5a5;
}
.sol-card {
  background: var(--success-bg);
  border: 1px solid #86efac;
}
.prob-sol-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.prob-sol-label.prob-label { color: var(--error); }
.prob-sol-label.sol-label  { color: var(--success); }
.prob-sol-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prob-sol-list li {
  font-size: 0.9rem;
  color: var(--text-body);
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.prob-card .prob-sol-list li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--error);
  font-weight: 700;
}
.sol-card .prob-sol-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}


/* ── 21. UNLAD DIGITAL CTA STRIP ─────────────────────────────
   Always uses UNLAD brand colours — not the business theme.
─────────────────────────────────────────────────────────── */
.unlad-cta-strip {
  background: #0f2d52;
  padding: 52px 0;
  text-align: center;
}
.unlad-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}
.unlad-cta-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.unlad-cta-strip h2 {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.unlad-cta-strip p {
  color: rgba(255,255,255,0.68);
  font-size: 0.97rem;
  line-height: 1.68;
  margin-bottom: 28px;
}
.unlad-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Fixed orange — never inherits business theme */
.btn-unlad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-unlad-orange {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
}
.btn-unlad-orange:hover {
  background: #ea6c0a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249,115,22,0.35);
}
.btn-unlad-ghost {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}
.btn-unlad-ghost:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}


/* ── 22. BUSINESS FOOTER ─────────────────────────────────────*/
.biz-footer { background: var(--bg-dark); }
.biz-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 44px;
}
.biz-footer-brand .biz-logo { color: #fff; font-size: 1.15rem; }
.biz-footer-brand p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.48);
  max-width: 270px;
  line-height: 1.65;
  margin-top: 12px;
}
.biz-footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 16px;
}
.biz-footer-col ul { display: flex; flex-direction: column; gap: 9px; list-style: none; }
.biz-footer-col a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.2s;
}
.biz-footer-col a:hover { color: #fff; }
.biz-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 18px 24px;
}
.biz-footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.28); }
.biz-footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; }
.biz-footer-bottom a:hover { color: #fff; }


/* ── 23. MOBILE STICKY CTA ───────────────────────────────────
   Shown only on small screens.
─────────────────────────────────────────────────────────── */
.demo-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}
.demo-sticky-inner {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.demo-sticky .btn { flex: 1; padding: 13px 12px; font-size: 0.88rem; }


/* ── 24. RESPONSIVE ──────────────────────────────────────────*/
@media (max-width: 900px) {
  .biz-hero-split { grid-template-columns: 1fr; gap: 36px; }
  .prob-sol-grid { grid-template-columns: 1fr; }
  .hours-location-grid { grid-template-columns: 1fr; }
  .biz-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .biz-footer-brand { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item-wide { grid-column: span 1; aspect-ratio: 4/3; }
}

@media (max-width: 640px) {
  .biz-hero { padding: 52px 0 52px; }
  .biz-section { padding: 56px 0; }

  /* Mobile nav */
  .biz-hamburger { display: flex; }
  .biz-nav-links {
    position: fixed;
    top: var(--demo-bar-h); /* sit below the demo top bar */
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 999; /* above biz-nav (998); demo-top-bar (1001) stays visible above */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.28s, transform 0.28s;
  }
  .biz-nav-links.open { opacity: 1; pointer-events: all; transform: translateY(0); }
  .biz-nav-links a { font-size: 1.05rem; padding: 11px 26px; }
  .biz-nav-cta { margin-left: 0; margin-top: 6px; }

  /* Collapse grids */
  .menu-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .biz-footer-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 32px; }
  .biz-footer-brand { grid-column: auto; }

  /* Stats bar */
  .biz-stats-inner { flex-direction: column; }
  .biz-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    width: 100%;
    padding: 14px 24px;
  }
  .biz-stat:last-child { border-bottom: none; }

  /* Hero */
  .biz-hero-btns { flex-direction: column; align-items: flex-start; }
  .biz-hero-centered .biz-hero-btns { align-items: center; }

  /* Misc */
  .offer-banner { flex-direction: column; text-align: center; }
  .schedule-table th, .schedule-table td { padding: 10px 12px; font-size: 0.82rem; }
  .tech-diagram { flex-direction: column; gap: 4px; }
  .diagram-arrow { transform: rotate(90deg); }
  .unlad-cta-strip h2 { font-size: 1.4rem; }

  /* Show mobile sticky CTA bar */
  .demo-sticky { display: flex; }
  body { padding-bottom: 76px; }

  /* Keep demo bar single-line on small screens:
     hide the description, centre the action buttons */
  .demo-top-bar-text { display: none; }
  .demo-top-bar-inner { justify-content: center; }
}