/* ---------------------------------------------------------------------------
   STEP 18: Final Testing / Bug Fixing
   Compatibility aliases for variables used across all previous steps.
--------------------------------------------------------------------------- */
:root {
  --surface-2: var(--surface2);
  --primary-2: var(--primary2);
  --primary-soft: var(--soft);
  --secondary: var(--orange);
  --secondary-soft: rgba(249, 115, 22, .13);
  --danger-soft: rgba(239, 68, 68, .12);
  --shadow-soft: var(--shadow2);
  --value: 0%;
}

[data-theme="dark"] {
  --surface-2: var(--surface2);
  --primary-2: var(--primary2);
  --primary-soft: var(--soft);
  --secondary: var(--orange);
  --secondary-soft: rgba(251, 146, 60, .15);
  --danger-soft: rgba(239, 68, 68, .16);
  --shadow-soft: var(--shadow2);
}

:root {
      --bg: #f6f8fb;
      --surface: #ffffff;
      --surface2: #f1f5f9;
      --text: #0f172a;
      --muted: #64748b;
      --border: #e2e8f0;
      --primary: #0f766e;
      --primary2: #14b8a6;
      --orange: #f97316;
      --danger: #ef4444;
      --success: #16a34a;
      --blue: #2563eb;
      --soft: rgba(20,184,166,.13);
      --shadow: 0 20px 55px rgba(15,23,42,.09);
      --shadow2: 0 10px 28px rgba(15,23,42,.07);
      --radius: 22px;
      --container: 1220px;
      --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    [data-theme="dark"] {
      --bg: #07111f;
      --surface: #0f172a;
      --surface2: #111c31;
      --text: #e5edf7;
      --muted: #94a3b8;
      --border: #233047;
      --primary: #2dd4bf;
      --primary2: #5eead4;
      --orange: #fb923c;
      --soft: rgba(45,212,191,.14);
      --shadow: 0 20px 55px rgba(0,0,0,.35);
      --shadow2: 0 10px 28px rgba(0,0,0,.25);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      background: radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 34%), radial-gradient(circle at top left, rgba(249,115,22,.12), transparent 30%), var(--bg);
      color: var(--text);
      font-family: var(--font);
      line-height: 1.65;
    }
    body.modal-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    img { max-width: 100%; display: block; }
    .container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      backdrop-filter: blur(18px);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      border-bottom: 1px solid var(--border);
    }
    .nav {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), var(--orange));
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 950;
      box-shadow: var(--shadow2);
    }
    .brand strong { display: block; font-size: 1.12rem; letter-spacing: -.02em; }
    .brand span span { display: block; color: var(--muted); font-size: .82rem; margin-top: -4px; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px;
    }
    .nav-links a {
      color: var(--muted);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: .92rem;
      transition: .2s;
    }
    .nav-links a:hover, .nav-links a.active {
      color: var(--text);
      background: var(--surface);
      box-shadow: 0 6px 16px rgba(15,23,42,.06);
    }
    .nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .btn {
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color: white;
      padding: 11px 17px;
      cursor: pointer;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 13px 25px rgba(15,118,110,.22);
      transition: transform .2s, opacity .2s, box-shadow .2s;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 17px 34px rgba(15,118,110,.27); }
    .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
    .btn.secondary { background: linear-gradient(135deg, var(--orange), #facc15); box-shadow: 0 13px 25px rgba(249,115,22,.22); }
    .btn.danger { background: linear-gradient(135deg, var(--danger), var(--orange)); box-shadow: 0 13px 25px rgba(239,68,68,.22); }
    .btn.small { padding: 8px 12px; font-size: .86rem; }
    .btn.block { width: 100%; }
    .mobile-menu-btn { display: none; }
    .mobile-drawer { display: none; border-top: 1px solid var(--border); background: var(--surface); }
    .mobile-drawer.open { display: block; }
    .mobile-drawer a { display: block; padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--muted); }
    .hero { position: relative; isolation: isolate; overflow: hidden; padding: 66px 0 44px; }
    .hero:before {
      content: "";
      position: absolute;
      inset: 16px;
      z-index: -1;
      border-radius: 38px;
      background: linear-gradient(135deg, rgba(15,118,110,.95), rgba(17,24,39,.96)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80") center/cover;
      box-shadow: var(--shadow);
    }
    .hero-inner {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 26px;
      align-items: center;
      color: white;
    }
    .hero-kicker {
      display: inline-flex;
      padding: 8px 12px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
      border-radius: 999px;
      margin-bottom: 18px;
      color: rgba(255,255,255,.92);
      font-size: .92rem;
    }
    .hero h1 {
      max-width: 820px;
      font-size: clamp(2.1rem, 5vw, 4.9rem);
      line-height: 1.12;
      letter-spacing: -.055em;
      margin-bottom: 18px;
    }
    .hero p { max-width: 780px; color: rgba(255,255,255,.82); font-size: 1.08rem; margin-bottom: 24px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
    .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; }
    .hero-stat {
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.11);
      border-radius: 18px;
      padding: 14px;
      backdrop-filter: blur(14px);
    }
    .hero-stat strong { display: block; font-size: 1.45rem; line-height: 1.1; }
    .hero-stat span { display: block; color: rgba(255,255,255,.7); font-size: .85rem; margin-top: 4px; }
    .hero-card {
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.13);
      border-radius: 30px;
      padding: 18px;
      backdrop-filter: blur(18px);
      box-shadow: 0 25px 75px rgba(0,0,0,.18);
    }
    .hero-card-top { display: flex; justify-content: space-between; margin-bottom: 12px; color: rgba(255,255,255,.88); }
    .hero-card-top span { color: rgba(255,255,255,.65); font-size: .85rem; }
    .hero-mini-card { background: var(--surface); color: var(--text); border-radius: 24px; overflow: hidden; }
    .hero-mini-image { height: 190px; background: linear-gradient(135deg, var(--primary), var(--orange)); overflow: hidden; }
    .hero-mini-image img { width: 100%; height: 100%; object-fit: cover; }
    .hero-mini-body { padding: 17px; }
    .section { padding: 42px 0 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .section-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.035em; line-height: 1.2; }
    .section-head p { color: var(--muted); max-width: 820px; margin-top: 4px; }
    .panel, .side-card, .metric-card, .place-card, .review-card, .coupon-card, .insight-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
    }
    .filter-panel { padding: 18px; }
    .filter-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 12px; }
    .field { display: grid; gap: 7px; }
    .field label { color: var(--muted); font-size: .88rem; font-weight: 750; }
    .input, .select, .textarea {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      border-radius: 15px;
      padding: 12px 13px;
      outline: none;
      transition: .2s;
    }
    .textarea { min-height: 110px; resize: vertical; }
    .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--soft); }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .chip {
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--muted);
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 750;
      transition: .2s;
      font-size: .9rem;
    }
    .chip:hover, .chip.active { color: var(--text); background: var(--soft); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
    .dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .metric-card { padding: 18px; position: relative; overflow: hidden; }
    .metric-card:after { content: ""; position: absolute; width: 88px; height: 88px; border-radius: 999px; background: var(--soft); left: -22px; bottom: -26px; }
    .metric-icon { width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px; background: var(--surface2); }
    .metric-card strong { display: block; font-size: 1.65rem; line-height: 1.1; }
    .metric-card span { color: var(--muted); font-size: .9rem; }
    .content-layout {
      width: min(var(--container), calc(100% - 32px));
      margin: 28px auto 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 18px;
      align-items: start;
    }
    .cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .place-card { overflow: hidden; transition: .2s; position: relative; }
    .place-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
    .place-image { height: 190px; position: relative; background: linear-gradient(135deg, var(--primary), var(--orange)); overflow: hidden; }
    .place-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
    .place-card:hover .place-image img { transform: scale(1.04); }
    .place-badges { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.9);
      color: #0f172a;
      font-size: .78rem;
      font-weight: 850;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 22px rgba(15,23,42,.1);
    }
    .badge.dark { background: rgba(15,23,42,.78); color: white; }
    .place-body { padding: 16px; }
    .place-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
    .place-title-row h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.02em; }
    .rating-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #92400e;
      background: #fef3c7;
      border-radius: 999px;
      padding: 6px 10px;
      font-weight: 900;
      white-space: nowrap;
    }
    [data-theme="dark"] .rating-pill { color: #fde68a; background: rgba(245,158,11,.18); }
    .place-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; color: var(--muted); font-size: .9rem; }
    .meta-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--border); background: var(--surface2); border-radius: 999px; }
    .place-desc { color: var(--muted); font-size: .94rem; min-height: 48px; margin-bottom: 12px; }
    .trust-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 12px 0; }
    .trust-bar { height: 9px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
    .trust-bar i { display: block; height: 100%; width: var(--value); background: linear-gradient(90deg, var(--primary), var(--orange)); border-radius: inherit; }
    .card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .icon-btn {
      width: 39px;
      height: 39px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: .2s;
    }
    .icon-btn:hover, .icon-btn.active { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--soft); transform: translateY(-1px); }
    .sidebar { position: sticky; top: 94px; display: grid; gap: 14px; }
    .side-card { padding: 16px; }
    .side-card h3 { margin-bottom: 12px; letter-spacing: -.02em; }
    .leaderboard { display: grid; gap: 10px; }
    .leader-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      cursor: pointer;
    }
    .leader-rank { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--soft); color: var(--primary); font-weight: 900; }
    .leader-title { font-size: .94rem; font-weight: 850; line-height: 1.25; }
    .leader-meta { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
    .progress-list { display: grid; gap: 12px; }
    .progress-row { display: grid; gap: 6px; }
    .progress-info { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .86rem; }
    .progress-bar { height: 9px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
    .progress-bar i { display: block; height: 100%; width: var(--value); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--orange)); }
    .review-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .review-card { padding: 16px; }
    .review-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .avatar { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--orange)); color: white; font-weight: 900; }
    .review-card p { color: var(--muted); font-size: .94rem; }
    .review-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
    .admin-layout { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 16px; }
    .form-grid { display: grid; gap: 12px; }
    .two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .table-scroll { overflow: auto; padding: 0; }
    .admin-table { width: 100%; border-collapse: collapse; min-width: 820px; }
    .admin-table th, .admin-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; font-size: .92rem; }
    .admin-table th { color: var(--muted); font-size: .82rem; background: var(--surface2); position: sticky; top: 0; z-index: 1; }
    .admin-table tr:hover td { background: color-mix(in srgb, var(--soft) 70%, transparent); }
    .tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .tab-btn { border: 1px solid var(--border); background: var(--surface2); color: var(--muted); border-radius: 999px; padding: 9px 13px; cursor: pointer; font-weight: 800; }
    .tab-btn.active { background: var(--soft); color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
    .map-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
    .map-mock {
      min-height: 440px;
      border-radius: var(--radius);
      background: linear-gradient(90deg, rgba(15,118,110,.08) 1px, transparent 1px), linear-gradient(rgba(15,118,110,.08) 1px, transparent 1px), var(--surface);
      background-size: 38px 38px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow2);
    }
    .map-pin {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 34px;
      height: 34px;
      border-radius: 999px 999px 999px 6px;
      rotate: -45deg;
      background: linear-gradient(135deg, var(--primary), var(--orange));
      box-shadow: 0 12px 22px rgba(15,23,42,.18);
      cursor: pointer;
      border: 0;
    }
    .map-pin span { position: absolute; inset: 6px; border-radius: 999px; background: white; rotate: 45deg; display: grid; place-items: center; font-size: .75rem; }
    .compare-bar {
      position: fixed;
      right: 16px;
      left: 16px;
      bottom: 16px;
      z-index: 1500;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: 22px;
      padding: 13px;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .compare-bar.show { display: flex; }
    .compare-items { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .compare-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); font-size: .88rem; font-weight: 800; }
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(2,6,23,.64);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }
    .modal-overlay.show { display: flex; }
    .modal {
      width: min(920px, 100%);
      max-height: calc(100vh - 40px);
      overflow: auto;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 28px;
      box-shadow: var(--shadow);
    }
    .modal.sm { width: min(560px, 100%); }
    .modal.lg { width: min(1120px, 100%); }
    .modal-head {
      position: sticky;
      top: 0;
      z-index: 2;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 16px 18px;
      display: flex;
      justify-content: space-between;
      gap: 14px;
    }
    .modal-title strong { display: block; font-size: 1.2rem; letter-spacing: -.025em; }
    .modal-title span { color: var(--muted); font-size: .88rem; }
    .modal-body { padding: 18px; }
    .modal-close { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; display: grid; place-items: center; font-weight: 900; }
    .detail-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; }
    .detail-cover { height: 330px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--orange)); margin-bottom: 14px; }
    .detail-cover img { width: 100%; height: 100%; object-fit: cover; }
    .detail-info-list { display: grid; gap: 10px; }
    .info-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--border); background: var(--surface2); border-radius: 15px; }
    .star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 3px; }
    .star-input input { display: none; }
    .star-input label { cursor: pointer; font-size: 1.7rem; color: #cbd5e1; transition: .2s; }
    .star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #f59e0b; }
    .empty-state { border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; display: grid; place-items: center; text-align: center; color: var(--muted); min-height: 180px; background: var(--surface); }
    .toast-wrap { position: fixed; top: 88px; left: 18px; z-index: 3000; display: grid; gap: 10px; width: min(360px, calc(100% - 36px)); }
    .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-right: 5px solid var(--primary); box-shadow: var(--shadow); border-radius: 17px; padding: 12px 14px; display: grid; gap: 3px; animation: slideIn .2s ease; }
    .toast strong { font-size: .95rem; }
    .toast span { color: var(--muted); font-size: .86rem; }
    @keyframes slideIn { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .footer { margin-top: 54px; padding: 38px 0; border-top: 1px solid var(--border); background: var(--surface); }
    .footer-inner { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 20px; }
    .footer h4 { margin-bottom: 10px; letter-spacing: -.02em; }
    .footer p, .footer a { color: var(--muted); font-size: .92rem; }
    .footer-links { display: grid; gap: 8px; }
    .insight-grid, .coupon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .insight-card, .coupon-card { padding: 18px; position: relative; overflow: hidden; }
    .coupon-code { display: inline-flex; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--primary); color: var(--primary); background: var(--soft); font-weight: 900; letter-spacing: .06em; margin-top: 12px; cursor: pointer; }
    .faq-grid { display: grid; gap: 10px; }
    .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow2); }
    .faq-q { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 0; background: transparent; color: var(--text); padding: 15px 16px; cursor: pointer; font-weight: 900; text-align: right; }
    .faq-a { display: none; padding: 0 16px 15px; color: var(--muted); }
    .faq-item.open .faq-a { display: block; }
    .role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--soft); color: var(--primary); font-weight: 900; font-size: .84rem; }
    @media (max-width: 1080px) {
      .hero-inner, .content-layout, .admin-layout, .map-grid, .detail-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .cards-grid, .review-feed, .coupon-grid, .insight-grid { grid-template-columns: repeat(2, 1fr); }
      .filter-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-stats, .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 760px) {
      .nav-links { display: none; }
      .mobile-menu-btn { display: inline-flex; }
      .hero { padding-top: 34px; }
      .hero:before { inset: 0; border-radius: 0 0 32px 32px; }
      .hero h1 { font-size: 2.2rem; }
      .hero-stats, .dashboard-grid, .filter-grid, .cards-grid, .review-feed, .coupon-grid, .insight-grid, .two-col, .three-col, .footer-inner { grid-template-columns: 1fr; }
      .section-head { align-items: start; flex-direction: column; }
      .nav { min-height: 66px; }
      .brand span span { display: none; }
      .compare-bar { align-items: start; flex-direction: column; }
    }
    .u-gap-1 {
      gap: 1px;
    }
    .u-pad-1 {
      padding: 1px;
    }
    .u-radius-1 {
      border-radius: 1px;
    }
    .u-gap-2 {
      gap: 2px;
    }
    .u-pad-2 {
      padding: 2px;
    }
    .u-radius-2 {
      border-radius: 2px;
    }
    .u-gap-3 {
      gap: 3px;
    }
    .u-pad-3 {
      padding: 3px;
    }
    .u-radius-3 {
      border-radius: 3px;
    }
    .u-gap-4 {
      gap: 4px;
    }
    .u-pad-4 {
      padding: 4px;
    }
    .u-radius-4 {
      border-radius: 4px;
    }
    .u-gap-5 {
      gap: 5px;
    }
    .u-pad-5 {
      padding: 5px;
    }
    .u-radius-5 {
      border-radius: 5px;
    }
    .u-gap-6 {
      gap: 6px;
    }
    .u-pad-6 {
      padding: 6px;
    }
    .u-radius-6 {
      border-radius: 6px;
    }
    .u-gap-7 {
      gap: 7px;
    }
    .u-pad-7 {
      padding: 7px;
    }
    .u-radius-7 {
      border-radius: 7px;
    }
    .u-gap-8 {
      gap: 8px;
    }
    .u-pad-8 {
      padding: 8px;
    }
    .u-radius-8 {
      border-radius: 8px;
    }
    .u-gap-9 {
      gap: 9px;
    }
    .u-pad-9 {
      padding: 9px;
    }
    .u-radius-9 {
      border-radius: 9px;
    }
    .u-gap-10 {
      gap: 10px;
    }
    .u-pad-10 {
      padding: 10px;
    }
    .u-radius-10 {
      border-radius: 10px;
    }
    .u-gap-11 {
      gap: 11px;
    }
    .u-pad-11 {
      padding: 11px;
    }
    .u-radius-11 {
      border-radius: 11px;
    }
    .u-gap-12 {
      gap: 12px;
    }
    .u-pad-12 {
      padding: 12px;
    }
    .u-radius-12 {
      border-radius: 12px;
    }
    .u-gap-13 {
      gap: 13px;
    }
    .u-pad-13 {
      padding: 13px;
    }
    .u-radius-13 {
      border-radius: 13px;
    }
    .u-gap-14 {
      gap: 14px;
    }
    .u-pad-14 {
      padding: 14px;
    }
    .u-radius-14 {
      border-radius: 14px;
    }
    .u-gap-15 {
      gap: 15px;
    }
    .u-pad-15 {
      padding: 15px;
    }
    .u-radius-15 {
      border-radius: 15px;
    }
    .u-gap-16 {
      gap: 16px;
    }
    .u-pad-16 {
      padding: 16px;
    }
    .u-radius-16 {
      border-radius: 16px;
    }
    .u-gap-17 {
      gap: 17px;
    }
    .u-pad-17 {
      padding: 17px;
    }
    .u-radius-17 {
      border-radius: 17px;
    }
    .u-gap-18 {
      gap: 18px;
    }
    .u-pad-18 {
      padding: 18px;
    }
    .u-radius-18 {
      border-radius: 18px;
    }
    .u-gap-19 {
      gap: 19px;
    }
    .u-pad-19 {
      padding: 19px;
    }
    .u-radius-19 {
      border-radius: 19px;
    }
    .u-gap-20 {
      gap: 20px;
    }
    .u-pad-20 {
      padding: 20px;
    }
    .u-radius-20 {
      border-radius: 20px;
    }
    .u-gap-21 {
      gap: 21px;
    }
    .u-pad-21 {
      padding: 21px;
    }
    .u-radius-21 {
      border-radius: 21px;
    }
    .u-gap-22 {
      gap: 22px;
    }
    .u-pad-22 {
      padding: 22px;
    }
    .u-radius-22 {
      border-radius: 22px;
    }
    .u-gap-23 {
      gap: 23px;
    }
    .u-pad-23 {
      padding: 23px;
    }
    .u-radius-23 {
      border-radius: 23px;
    }
    .u-gap-24 {
      gap: 24px;
    }
    .u-pad-24 {
      padding: 24px;
    }
    .u-radius-24 {
      border-radius: 24px;
    }
    .u-gap-25 {
      gap: 25px;
    }
    .u-pad-25 {
      padding: 25px;
    }
    .u-radius-25 {
      border-radius: 25px;
    }
    .u-gap-26 {
      gap: 26px;
    }
    .u-pad-26 {
      padding: 26px;
    }
    .u-radius-26 {
      border-radius: 26px;
    }
    .u-gap-27 {
      gap: 27px;
    }
    .u-pad-27 {
      padding: 27px;
    }
    .u-radius-27 {
      border-radius: 27px;
    }
    .u-gap-28 {
      gap: 28px;
    }
    .u-pad-28 {
      padding: 28px;
    }
    .u-radius-28 {
      border-radius: 28px;
    }
    .u-gap-29 {
      gap: 29px;
    }
    .u-pad-29 {
      padding: 29px;
    }
    .u-radius-29 {
      border-radius: 29px;
    }
    .u-gap-30 {
      gap: 30px;
    }
    .u-pad-30 {
      padding: 30px;
    }
    .u-radius-30 {
      border-radius: 30px;
    }
    .u-gap-31 {
      gap: 31px;
    }
    .u-pad-31 {
      padding: 31px;
    }
    .u-radius-31 {
      border-radius: 31px;
    }
    .u-gap-32 {
      gap: 32px;
    }
    .u-pad-32 {
      padding: 32px;
    }
    .u-radius-32 {
      border-radius: 32px;
    }
    .u-gap-33 {
      gap: 33px;
    }
    .u-pad-33 {
      padding: 33px;
    }
    .u-radius-33 {
      border-radius: 33px;
    }
    .u-gap-34 {
      gap: 34px;
    }
    .u-pad-34 {
      padding: 34px;
    }
    .u-radius-34 {
      border-radius: 34px;
    }
    .u-gap-35 {
      gap: 35px;
    }
    .u-pad-35 {
      padding: 35px;
    }
    .u-radius-35 {
      border-radius: 35px;
    }
    .u-gap-36 {
      gap: 36px;
    }
    .u-pad-36 {
      padding: 36px;
    }
    .u-radius-36 {
      border-radius: 36px;
    }
    .u-gap-37 {
      gap: 37px;
    }
    .u-pad-37 {
      padding: 37px;
    }
    .u-radius-37 {
      border-radius: 37px;
    }
    .u-gap-38 {
      gap: 38px;
    }
    .u-pad-38 {
      padding: 38px;
    }
    .u-radius-38 {
      border-radius: 38px;
    }
    .u-gap-39 {
      gap: 39px;
    }
    .u-pad-39 {
      padding: 39px;
    }
    .u-radius-39 {
      border-radius: 39px;
    }
    .u-gap-40 {
      gap: 40px;
    }
    .u-pad-40 {
      padding: 40px;
    }
    .u-radius-40 {
      border-radius: 40px;
    }
    .u-gap-41 {
      gap: 41px;
    }
    .u-pad-41 {
      padding: 41px;
    }
    .u-radius-41 {
      border-radius: 41px;
    }
    .u-gap-42 {
      gap: 42px;
    }
    .u-pad-42 {
      padding: 42px;
    }
    .u-radius-42 {
      border-radius: 42px;
    }
    .u-gap-43 {
      gap: 43px;
    }
    .u-pad-43 {
      padding: 43px;
    }
    .u-radius-43 {
      border-radius: 43px;
    }
    .u-gap-44 {
      gap: 44px;
    }
    .u-pad-44 {
      padding: 44px;
    }
    .u-radius-44 {
      border-radius: 44px;
    }
    .u-gap-45 {
      gap: 45px;
    }
    .u-pad-45 {
      padding: 45px;
    }
    .u-radius-45 {
      border-radius: 45px;
    }
    .u-gap-46 {
      gap: 46px;
    }
    .u-pad-46 {
      padding: 46px;
    }
    .u-radius-46 {
      border-radius: 46px;
    }
    .u-gap-47 {
      gap: 47px;
    }
    .u-pad-47 {
      padding: 47px;
    }
    .u-radius-47 {
      border-radius: 47px;
    }
    .u-gap-48 {
      gap: 48px;
    }
    .u-pad-48 {
      padding: 48px;
    }
    .u-radius-48 {
      border-radius: 48px;
    }
    .u-gap-49 {
      gap: 49px;
    }
    .u-pad-49 {
      padding: 49px;
    }
    .u-radius-49 {
      border-radius: 49px;
    }
    .u-gap-50 {
      gap: 50px;
    }
    .u-pad-50 {
      padding: 50px;
    }
    .u-radius-50 {
      border-radius: 50px;
    }
    .u-gap-51 {
      gap: 51px;
    }
    .u-pad-51 {
      padding: 51px;
    }
    .u-radius-51 {
      border-radius: 51px;
    }
    .u-gap-52 {
      gap: 52px;
    }
    .u-pad-52 {
      padding: 52px;
    }
    .u-radius-52 {
      border-radius: 52px;
    }
    .u-gap-53 {
      gap: 53px;
    }
    .u-pad-53 {
      padding: 53px;
    }
    .u-radius-53 {
      border-radius: 53px;
    }
    .u-gap-54 {
      gap: 54px;
    }
    .u-pad-54 {
      padding: 54px;
    }
    .u-radius-54 {
      border-radius: 54px;
    }
    .u-gap-55 {
      gap: 55px;
    }
    .u-pad-55 {
      padding: 55px;
    }
    .u-radius-55 {
      border-radius: 55px;
    }
    .u-gap-56 {
      gap: 56px;
    }
    .u-pad-56 {
      padding: 56px;
    }
    .u-radius-56 {
      border-radius: 56px;
    }
    .u-gap-57 {
      gap: 57px;
    }
    .u-pad-57 {
      padding: 57px;
    }
    .u-radius-57 {
      border-radius: 57px;
    }
    .u-gap-58 {
      gap: 58px;
    }
    .u-pad-58 {
      padding: 58px;
    }
    .u-radius-58 {
      border-radius: 58px;
    }
    .u-gap-59 {
      gap: 59px;
    }
    .u-pad-59 {
      padding: 59px;
    }
    .u-radius-59 {
      border-radius: 59px;
    }
    .u-gap-60 {
      gap: 60px;
    }
    .u-pad-60 {
      padding: 60px;
    }
    .u-radius-60 {
      border-radius: 60px;
    }
    .u-gap-61 {
      gap: 61px;
    }
    .u-pad-61 {
      padding: 61px;
    }
    .u-radius-61 {
      border-radius: 61px;
    }
    .u-gap-62 {
      gap: 62px;
    }
    .u-pad-62 {
      padding: 62px;
    }
    .u-radius-62 {
      border-radius: 62px;
    }
    .u-gap-63 {
      gap: 63px;
    }
    .u-pad-63 {
      padding: 63px;
    }
    .u-radius-63 {
      border-radius: 63px;
    }
    .u-gap-64 {
      gap: 64px;
    }
    .u-pad-64 {
      padding: 64px;
    }
    .u-radius-64 {
      border-radius: 64px;
    }
    .u-gap-65 {
      gap: 65px;
    }
    .u-pad-65 {
      padding: 65px;
    }
    .u-radius-65 {
      border-radius: 65px;
    }
    .u-gap-66 {
      gap: 66px;
    }
    .u-pad-66 {
      padding: 66px;
    }
    .u-radius-66 {
      border-radius: 66px;
    }
    .u-gap-67 {
      gap: 67px;
    }
    .u-pad-67 {
      padding: 67px;
    }
    .u-radius-67 {
      border-radius: 67px;
    }
    .u-gap-68 {
      gap: 68px;
    }
    .u-pad-68 {
      padding: 68px;
    }
    .u-radius-68 {
      border-radius: 68px;
    }
    .u-gap-69 {
      gap: 69px;
    }
    .u-pad-69 {
      padding: 69px;
    }
    .u-radius-69 {
      border-radius: 69px;
    }
    .u-gap-70 {
      gap: 70px;
    }
    .u-pad-70 {
      padding: 70px;
    }
    .u-radius-70 {
      border-radius: 70px;
    }
    .u-gap-71 {
      gap: 71px;
    }
    .u-pad-71 {
      padding: 71px;
    }
    .u-radius-71 {
      border-radius: 71px;
    }
    .u-gap-72 {
      gap: 72px;
    }
    .u-pad-72 {
      padding: 72px;
    }
    .u-radius-72 {
      border-radius: 72px;
    }
    .u-gap-73 {
      gap: 73px;
    }
    .u-pad-73 {
      padding: 73px;
    }
    .u-radius-73 {
      border-radius: 73px;
    }
    .u-gap-74 {
      gap: 74px;
    }
    .u-pad-74 {
      padding: 74px;
    }
    .u-radius-74 {
      border-radius: 74px;
    }
    .u-gap-75 {
      gap: 75px;
    }
    .u-pad-75 {
      padding: 75px;
    }
    .u-radius-75 {
      border-radius: 75px;
    }
    .u-gap-76 {
      gap: 76px;
    }
    .u-pad-76 {
      padding: 76px;
    }
    .u-radius-76 {
      border-radius: 76px;
    }
    .u-gap-77 {
      gap: 77px;
    }
    .u-pad-77 {
      padding: 77px;
    }
    .u-radius-77 {
      border-radius: 77px;
    }
    .u-gap-78 {
      gap: 78px;
    }
    .u-pad-78 {
      padding: 78px;
    }
    .u-radius-78 {
      border-radius: 78px;
    }
    .u-gap-79 {
      gap: 79px;
    }
    .u-pad-79 {
      padding: 79px;
    }
    .u-radius-79 {
      border-radius: 79px;
    }
    .u-gap-80 {
      gap: 80px;
    }
    .u-pad-80 {
      padding: 80px;
    }
    .u-radius-80 {
      border-radius: 80px;
    }
    .u-gap-81 {
      gap: 81px;
    }
    .u-pad-81 {
      padding: 81px;
    }
    .u-radius-81 {
      border-radius: 81px;
    }
    .u-gap-82 {
      gap: 82px;
    }
    .u-pad-82 {
      padding: 82px;
    }
    .u-radius-82 {
      border-radius: 82px;
    }
    .u-gap-83 {
      gap: 83px;
    }
    .u-pad-83 {
      padding: 83px;
    }
    .u-radius-83 {
      border-radius: 83px;
    }
    .u-gap-84 {
      gap: 84px;
    }
    .u-pad-84 {
      padding: 84px;
    }
    .u-radius-84 {
      border-radius: 84px;
    }
    .u-gap-85 {
      gap: 85px;
    }
    .u-pad-85 {
      padding: 85px;
    }
    .u-radius-85 {
      border-radius: 85px;
    }
    .u-gap-86 {
      gap: 86px;
    }
    .u-pad-86 {
      padding: 86px;
    }
    .u-radius-86 {
      border-radius: 86px;
    }
    .u-gap-87 {
      gap: 87px;
    }
    .u-pad-87 {
      padding: 87px;
    }
    .u-radius-87 {
      border-radius: 87px;
    }
    .u-gap-88 {
      gap: 88px;
    }
    .u-pad-88 {
      padding: 88px;
    }
    .u-radius-88 {
      border-radius: 88px;
    }
    .u-gap-89 {
      gap: 89px;
    }
    .u-pad-89 {
      padding: 89px;
    }
    .u-radius-89 {
      border-radius: 89px;
    }
    .u-gap-90 {
      gap: 90px;
    }
    .u-pad-90 {
      padding: 90px;
    }
    .u-radius-90 {
      border-radius: 90px;
    }
    .u-gap-91 {
      gap: 91px;
    }
    .u-pad-91 {
      padding: 91px;
    }
    .u-radius-91 {
      border-radius: 91px;
    }
    .u-gap-92 {
      gap: 92px;
    }
    .u-pad-92 {
      padding: 92px;
    }
    .u-radius-92 {
      border-radius: 92px;
    }
    .u-gap-93 {
      gap: 93px;
    }
    .u-pad-93 {
      padding: 93px;
    }
    .u-radius-93 {
      border-radius: 93px;
    }
    .u-gap-94 {
      gap: 94px;
    }
    .u-pad-94 {
      padding: 94px;
    }
    .u-radius-94 {
      border-radius: 94px;
    }
    .u-gap-95 {
      gap: 95px;
    }
    .u-pad-95 {
      padding: 95px;
    }
    .u-radius-95 {
      border-radius: 95px;
    }
    .u-gap-96 {
      gap: 96px;
    }
    .u-pad-96 {
      padding: 96px;
    }
    .u-radius-96 {
      border-radius: 96px;
    }
    .u-gap-97 {
      gap: 97px;
    }
    .u-pad-97 {
      padding: 97px;
    }
    .u-radius-97 {
      border-radius: 97px;
    }
    .u-gap-98 {
      gap: 98px;
    }
    .u-pad-98 {
      padding: 98px;
    }
    .u-radius-98 {
      border-radius: 98px;
    }
    .u-gap-99 {
      gap: 99px;
    }
    .u-pad-99 {
      padding: 99px;
    }
    .u-radius-99 {
      border-radius: 99px;
    }
    .u-gap-100 {
      gap: 100px;
    }
    .u-pad-100 {
      padding: 100px;
    }
    .u-radius-100 {
      border-radius: 100px;
    }
    .u-gap-101 {
      gap: 101px;
    }
    .u-pad-101 {
      padding: 101px;
    }
    .u-radius-101 {
      border-radius: 101px;
    }
    .u-gap-102 {
      gap: 102px;
    }
    .u-pad-102 {
      padding: 102px;
    }
    .u-radius-102 {
      border-radius: 102px;
    }
    .u-gap-103 {
      gap: 103px;
    }
    .u-pad-103 {
      padding: 103px;
    }
    .u-radius-103 {
      border-radius: 103px;
    }
    .u-gap-104 {
      gap: 104px;
    }
    .u-pad-104 {
      padding: 104px;
    }
    .u-radius-104 {
      border-radius: 104px;
    }
    .u-gap-105 {
      gap: 105px;
    }
    .u-pad-105 {
      padding: 105px;
    }
    .u-radius-105 {
      border-radius: 105px;
    }
    .u-gap-106 {
      gap: 106px;
    }
    .u-pad-106 {
      padding: 106px;
    }
    .u-radius-106 {
      border-radius: 106px;
    }
    .u-gap-107 {
      gap: 107px;
    }
    .u-pad-107 {
      padding: 107px;
    }
    .u-radius-107 {
      border-radius: 107px;
    }
    .u-gap-108 {
      gap: 108px;
    }
    .u-pad-108 {
      padding: 108px;
    }
    .u-radius-108 {
      border-radius: 108px;
    }
    .u-gap-109 {
      gap: 109px;
    }
    .u-pad-109 {
      padding: 109px;
    }
    .u-radius-109 {
      border-radius: 109px;
    }
    .u-gap-110 {
      gap: 110px;
    }
    .u-pad-110 {
      padding: 110px;
    }
    .u-radius-110 {
      border-radius: 110px;
    }
    .u-gap-111 {
      gap: 111px;
    }
    .u-pad-111 {
      padding: 111px;
    }
    .u-radius-111 {
      border-radius: 111px;
    }
    .u-gap-112 {
      gap: 112px;
    }
    .u-pad-112 {
      padding: 112px;
    }
    .u-radius-112 {
      border-radius: 112px;
    }
    .u-gap-113 {
      gap: 113px;
    }
    .u-pad-113 {
      padding: 113px;
    }
    .u-radius-113 {
      border-radius: 113px;
    }
    .u-gap-114 {
      gap: 114px;
    }
    .u-pad-114 {
      padding: 114px;
    }
    .u-radius-114 {
      border-radius: 114px;
    }
    .u-gap-115 {
      gap: 115px;
    }
    .u-pad-115 {
      padding: 115px;
    }
    .u-radius-115 {
      border-radius: 115px;
    }
    .u-gap-116 {
      gap: 116px;
    }
    .u-pad-116 {
      padding: 116px;
    }
    .u-radius-116 {
      border-radius: 116px;
    }
    .u-gap-117 {
      gap: 117px;
    }
    .u-pad-117 {
      padding: 117px;
    }
    .u-radius-117 {
      border-radius: 117px;
    }
    .u-gap-118 {
      gap: 118px;
    }
    .u-pad-118 {
      padding: 118px;
    }
    .u-radius-118 {
      border-radius: 118px;
    }
    .u-gap-119 {
      gap: 119px;
    }
    .u-pad-119 {
      padding: 119px;
    }
    .u-radius-119 {
      border-radius: 119px;
    }
    .u-gap-120 {
      gap: 120px;
    }
    .u-pad-120 {
      padding: 120px;
    }
    .u-radius-120 {
      border-radius: 120px;
    }
    .u-gap-121 {
      gap: 121px;
    }
    .u-pad-121 {
      padding: 121px;
    }
    .u-radius-121 {
      border-radius: 121px;
    }
    .u-gap-122 {
      gap: 122px;
    }
    .u-pad-122 {
      padding: 122px;
    }
    .u-radius-122 {
      border-radius: 122px;
    }
    .u-gap-123 {
      gap: 123px;
    }
    .u-pad-123 {
      padding: 123px;
    }
    .u-radius-123 {
      border-radius: 123px;
    }
    .u-gap-124 {
      gap: 124px;
    }
    .u-pad-124 {
      padding: 124px;
    }
    .u-radius-124 {
      border-radius: 124px;
    }
    .u-gap-125 {
      gap: 125px;
    }
    .u-pad-125 {
      padding: 125px;
    }
    .u-radius-125 {
      border-radius: 125px;
    }
    .u-gap-126 {
      gap: 126px;
    }
    .u-pad-126 {
      padding: 126px;
    }
    .u-radius-126 {
      border-radius: 126px;
    }
    .u-gap-127 {
      gap: 127px;
    }
    .u-pad-127 {
      padding: 127px;
    }
    .u-radius-127 {
      border-radius: 127px;
    }
    .u-gap-128 {
      gap: 128px;
    }
    .u-pad-128 {
      padding: 128px;
    }
    .u-radius-128 {
      border-radius: 128px;
    }
    .u-gap-129 {
      gap: 129px;
    }
    .u-pad-129 {
      padding: 129px;
    }
    .u-radius-129 {
      border-radius: 129px;
    }
    .u-gap-130 {
      gap: 130px;
    }
    .u-pad-130 {
      padding: 130px;
    }
    .u-radius-130 {
      border-radius: 130px;
    }
    .u-gap-131 {
      gap: 131px;
    }
    .u-pad-131 {
      padding: 131px;
    }
    .u-radius-131 {
      border-radius: 131px;
    }
    .u-gap-132 {
      gap: 132px;
    }
    .u-pad-132 {
      padding: 132px;
    }
    .u-radius-132 {
      border-radius: 132px;
    }
    .u-gap-133 {
      gap: 133px;
    }
    .u-pad-133 {
      padding: 133px;
    }
    .u-radius-133 {
      border-radius: 133px;
    }
    .u-gap-134 {
      gap: 134px;
    }
    .u-pad-134 {
      padding: 134px;
    }
    .u-radius-134 {
      border-radius: 134px;
    }
    .u-gap-135 {
      gap: 135px;
    }
    .u-pad-135 {
      padding: 135px;
    }
    .u-radius-135 {
      border-radius: 135px;
    }
    .u-gap-136 {
      gap: 136px;
    }
    .u-pad-136 {
      padding: 136px;
    }
    .u-radius-136 {
      border-radius: 136px;
    }
    .u-gap-137 {
      gap: 137px;
    }
    .u-pad-137 {
      padding: 137px;
    }
    .u-radius-137 {
      border-radius: 137px;
    }
    .u-gap-138 {
      gap: 138px;
    }
    .u-pad-138 {
      padding: 138px;
    }
    .u-radius-138 {
      border-radius: 138px;
    }
    .u-gap-139 {
      gap: 139px;
    }
    .u-pad-139 {
      padding: 139px;
    }
    .u-radius-139 {
      border-radius: 139px;
    }
    .u-gap-140 {
      gap: 140px;
    }
    .u-pad-140 {
      padding: 140px;
    }
    .u-radius-140 {
      border-radius: 140px;
    }
    .u-gap-141 {
      gap: 141px;
    }
    .u-pad-141 {
      padding: 141px;
    }
    .u-radius-141 {
      border-radius: 141px;
    }
    .u-gap-142 {
      gap: 142px;
    }
    .u-pad-142 {
      padding: 142px;
    }
    .u-radius-142 {
      border-radius: 142px;
    }
    .u-gap-143 {
      gap: 143px;
    }
    .u-pad-143 {
      padding: 143px;
    }
    .u-radius-143 {
      border-radius: 143px;
    }
    .u-gap-144 {
      gap: 144px;
    }
    .u-pad-144 {
      padding: 144px;
    }
    .u-radius-144 {
      border-radius: 144px;
    }
    .u-gap-145 {
      gap: 145px;
    }
    .u-pad-145 {
      padding: 145px;
    }
    .u-radius-145 {
      border-radius: 145px;
    }
    .u-gap-146 {
      gap: 146px;
    }
    .u-pad-146 {
      padding: 146px;
    }
    .u-radius-146 {
      border-radius: 146px;
    }
    .u-gap-147 {
      gap: 147px;
    }
    .u-pad-147 {
      padding: 147px;
    }
    .u-radius-147 {
      border-radius: 147px;
    }
    .u-gap-148 {
      gap: 148px;
    }
    .u-pad-148 {
      padding: 148px;
    }
    .u-radius-148 {
      border-radius: 148px;
    }
    .u-gap-149 {
      gap: 149px;
    }
    .u-pad-149 {
      padding: 149px;
    }
    .u-radius-149 {
      border-radius: 149px;
    }
    .u-gap-150 {
      gap: 150px;
    }
    .u-pad-150 {
      padding: 150px;
    }
    .u-radius-150 {
      border-radius: 150px;
    }
    .u-gap-151 {
      gap: 151px;
    }
    .u-pad-151 {
      padding: 151px;
    }
    .u-radius-151 {
      border-radius: 151px;
    }
    .u-gap-152 {
      gap: 152px;
    }
    .u-pad-152 {
      padding: 152px;
    }
    .u-radius-152 {
      border-radius: 152px;
    }
    .u-gap-153 {
      gap: 153px;
    }
    .u-pad-153 {
      padding: 153px;
    }
    .u-radius-153 {
      border-radius: 153px;
    }
    .u-gap-154 {
      gap: 154px;
    }
    .u-pad-154 {
      padding: 154px;
    }
    .u-radius-154 {
      border-radius: 154px;
    }
    .u-gap-155 {
      gap: 155px;
    }
    .u-pad-155 {
      padding: 155px;
    }
    .u-radius-155 {
      border-radius: 155px;
    }
    .u-gap-156 {
      gap: 156px;
    }
    .u-pad-156 {
      padding: 156px;
    }
    .u-radius-156 {
      border-radius: 156px;
    }
    .u-gap-157 {
      gap: 157px;
    }
    .u-pad-157 {
      padding: 157px;
    }
    .u-radius-157 {
      border-radius: 157px;
    }
    .u-gap-158 {
      gap: 158px;
    }
    .u-pad-158 {
      padding: 158px;
    }
    .u-radius-158 {
      border-radius: 158px;
    }
    .u-gap-159 {
      gap: 159px;
    }
    .u-pad-159 {
      padding: 159px;
    }
    .u-radius-159 {
      border-radius: 159px;
    }
    .u-gap-160 {
      gap: 160px;
    }
    .u-pad-160 {
      padding: 160px;
    }
    .u-radius-160 {
      border-radius: 160px;
    }
    .u-gap-161 {
      gap: 161px;
    }
    .u-pad-161 {
      padding: 161px;
    }
    .u-radius-161 {
      border-radius: 161px;
    }
    .u-gap-162 {
      gap: 162px;
    }
    .u-pad-162 {
      padding: 162px;
    }
    .u-radius-162 {
      border-radius: 162px;
    }
    .u-gap-163 {
      gap: 163px;
    }
    .u-pad-163 {
      padding: 163px;
    }
    .u-radius-163 {
      border-radius: 163px;
    }
    .u-gap-164 {
      gap: 164px;
    }
    .u-pad-164 {
      padding: 164px;
    }
    .u-radius-164 {
      border-radius: 164px;
    }
    .u-gap-165 {
      gap: 165px;
    }
    .u-pad-165 {
      padding: 165px;
    }
    .u-radius-165 {
      border-radius: 165px;
    }
    .u-gap-166 {
      gap: 166px;
    }
    .u-pad-166 {
      padding: 166px;
    }
    .u-radius-166 {
      border-radius: 166px;
    }
    .u-gap-167 {
      gap: 167px;
    }
    .u-pad-167 {
      padding: 167px;
    }
    .u-radius-167 {
      border-radius: 167px;
    }
    .u-gap-168 {
      gap: 168px;
    }
    .u-pad-168 {
      padding: 168px;
    }
    .u-radius-168 {
      border-radius: 168px;
    }
    .u-gap-169 {
      gap: 169px;
    }
    .u-pad-169 {
      padding: 169px;
    }
    .u-radius-169 {
      border-radius: 169px;
    }
    .u-gap-170 {
      gap: 170px;
    }
    .u-pad-170 {
      padding: 170px;
    }
    .u-radius-170 {
      border-radius: 170px;
    }
    .u-gap-171 {
      gap: 171px;
    }
    .u-pad-171 {
      padding: 171px;
    }
    .u-radius-171 {
      border-radius: 171px;
    }
    .u-gap-172 {
      gap: 172px;
    }
    .u-pad-172 {
      padding: 172px;
    }
    .u-radius-172 {
      border-radius: 172px;
    }
    .u-gap-173 {
      gap: 173px;
    }
    .u-pad-173 {
      padding: 173px;
    }
    .u-radius-173 {
      border-radius: 173px;
    }
    .u-gap-174 {
      gap: 174px;
    }
    .u-pad-174 {
      padding: 174px;
    }
    .u-radius-174 {
      border-radius: 174px;
    }
    .u-gap-175 {
      gap: 175px;
    }
    .u-pad-175 {
      padding: 175px;
    }
    .u-radius-175 {
      border-radius: 175px;
    }
    .u-gap-176 {
      gap: 176px;
    }
    .u-pad-176 {
      padding: 176px;
    }
    .u-radius-176 {
      border-radius: 176px;
    }
    .u-gap-177 {
      gap: 177px;
    }
    .u-pad-177 {
      padding: 177px;
    }
    .u-radius-177 {
      border-radius: 177px;
    }
    .u-gap-178 {
      gap: 178px;
    }
    .u-pad-178 {
      padding: 178px;
    }
    .u-radius-178 {
      border-radius: 178px;
    }
    .u-gap-179 {
      gap: 179px;
    }
    .u-pad-179 {
      padding: 179px;
    }
    .u-radius-179 {
      border-radius: 179px;
    }
    .u-gap-180 {
      gap: 180px;
    }
    .u-pad-180 {
      padding: 180px;
    }
    .u-radius-180 {
      border-radius: 180px;
    }
    .u-gap-181 {
      gap: 181px;
    }
    .u-pad-181 {
      padding: 181px;
    }
    .u-radius-181 {
      border-radius: 181px;
    }
    .u-gap-182 {
      gap: 182px;
    }
    .u-pad-182 {
      padding: 182px;
    }
    .u-radius-182 {
      border-radius: 182px;
    }
    .u-gap-183 {
      gap: 183px;
    }
    .u-pad-183 {
      padding: 183px;
    }
    .u-radius-183 {
      border-radius: 183px;
    }
    .u-gap-184 {
      gap: 184px;
    }
    .u-pad-184 {
      padding: 184px;
    }
    .u-radius-184 {
      border-radius: 184px;
    }
    .u-gap-185 {
      gap: 185px;
    }
    .u-pad-185 {
      padding: 185px;
    }
    .u-radius-185 {
      border-radius: 185px;
    }
    .u-gap-186 {
      gap: 186px;
    }
    .u-pad-186 {
      padding: 186px;
    }
    .u-radius-186 {
      border-radius: 186px;
    }
    .u-gap-187 {
      gap: 187px;
    }
    .u-pad-187 {
      padding: 187px;
    }
    .u-radius-187 {
      border-radius: 187px;
    }
    .u-gap-188 {
      gap: 188px;
    }
    .u-pad-188 {
      padding: 188px;
    }
    .u-radius-188 {
      border-radius: 188px;
    }
    .u-gap-189 {
      gap: 189px;
    }
    .u-pad-189 {
      padding: 189px;
    }
    .u-radius-189 {
      border-radius: 189px;
    }
    .u-gap-190 {
      gap: 190px;
    }
    .u-pad-190 {
      padding: 190px;
    }
    .u-radius-190 {
      border-radius: 190px;
    }
    .u-gap-191 {
      gap: 191px;
    }
    .u-pad-191 {
      padding: 191px;
    }
    .u-radius-191 {
      border-radius: 191px;
    }
    .u-gap-192 {
      gap: 192px;
    }
    .u-pad-192 {
      padding: 192px;
    }
    .u-radius-192 {
      border-radius: 192px;
    }
    .u-gap-193 {
      gap: 193px;
    }
    .u-pad-193 {
      padding: 193px;
    }
    .u-radius-193 {
      border-radius: 193px;
    }
    .u-gap-194 {
      gap: 194px;
    }
    .u-pad-194 {
      padding: 194px;
    }
    .u-radius-194 {
      border-radius: 194px;
    }
    .u-gap-195 {
      gap: 195px;
    }
    .u-pad-195 {
      padding: 195px;
    }
    .u-radius-195 {
      border-radius: 195px;
    }
    .u-gap-196 {
      gap: 196px;
    }
    .u-pad-196 {
      padding: 196px;
    }
    .u-radius-196 {
      border-radius: 196px;
    }
    .u-gap-197 {
      gap: 197px;
    }
    .u-pad-197 {
      padding: 197px;
    }
    .u-radius-197 {
      border-radius: 197px;
    }
    .u-gap-198 {
      gap: 198px;
    }
    .u-pad-198 {
      padding: 198px;
    }
    .u-radius-198 {
      border-radius: 198px;
    }
    .u-gap-199 {
      gap: 199px;
    }
    .u-pad-199 {
      padding: 199px;
    }
    .u-radius-199 {
      border-radius: 199px;
    }
    .u-gap-200 {
      gap: 200px;
    }
    .u-pad-200 {
      padding: 200px;
    }
    .u-radius-200 {
      border-radius: 200px;
    }
    .u-gap-201 {
      gap: 201px;
    }
    .u-pad-201 {
      padding: 201px;
    }
    .u-radius-201 {
      border-radius: 201px;
    }
    .u-gap-202 {
      gap: 202px;
    }
    .u-pad-202 {
      padding: 202px;
    }
    .u-radius-202 {
      border-radius: 202px;
    }
    .u-gap-203 {
      gap: 203px;
    }
    .u-pad-203 {
      padding: 203px;
    }
    .u-radius-203 {
      border-radius: 203px;
    }
    .u-gap-204 {
      gap: 204px;
    }
    .u-pad-204 {
      padding: 204px;
    }
    .u-radius-204 {
      border-radius: 204px;
    }
    .u-gap-205 {
      gap: 205px;
    }
    .u-pad-205 {
      padding: 205px;
    }
    .u-radius-205 {
      border-radius: 205px;
    }
    .u-gap-206 {
      gap: 206px;
    }
    .u-pad-206 {
      padding: 206px;
    }
    .u-radius-206 {
      border-radius: 206px;
    }
    .u-gap-207 {
      gap: 207px;
    }
    .u-pad-207 {
      padding: 207px;
    }
    .u-radius-207 {
      border-radius: 207px;
    }
    .u-gap-208 {
      gap: 208px;
    }
    .u-pad-208 {
      padding: 208px;
    }
    .u-radius-208 {
      border-radius: 208px;
    }
    .u-gap-209 {
      gap: 209px;
    }
    .u-pad-209 {
      padding: 209px;
    }
    .u-radius-209 {
      border-radius: 209px;
    }
    .u-gap-210 {
      gap: 210px;
    }
    .u-pad-210 {
      padding: 210px;
    }
    .u-radius-210 {
      border-radius: 210px;
    }
    .u-gap-211 {
      gap: 211px;
    }
    .u-pad-211 {
      padding: 211px;
    }
    .u-radius-211 {
      border-radius: 211px;
    }
    .u-gap-212 {
      gap: 212px;
    }
    .u-pad-212 {
      padding: 212px;
    }
    .u-radius-212 {
      border-radius: 212px;
    }
    .u-gap-213 {
      gap: 213px;
    }
    .u-pad-213 {
      padding: 213px;
    }
    .u-radius-213 {
      border-radius: 213px;
    }
    .u-gap-214 {
      gap: 214px;
    }
    .u-pad-214 {
      padding: 214px;
    }
    .u-radius-214 {
      border-radius: 214px;
    }
    .u-gap-215 {
      gap: 215px;
    }
    .u-pad-215 {
      padding: 215px;
    }
    .u-radius-215 {
      border-radius: 215px;
    }
    .u-gap-216 {
      gap: 216px;
    }
    .u-pad-216 {
      padding: 216px;
    }
    .u-radius-216 {
      border-radius: 216px;
    }
    .u-gap-217 {
      gap: 217px;
    }
    .u-pad-217 {
      padding: 217px;
    }
    .u-radius-217 {
      border-radius: 217px;
    }
    .u-gap-218 {
      gap: 218px;
    }
    .u-pad-218 {
      padding: 218px;
    }
    .u-radius-218 {
      border-radius: 218px;
    }
    .u-gap-219 {
      gap: 219px;
    }
    .u-pad-219 {
      padding: 219px;
    }
    .u-radius-219 {
      border-radius: 219px;
    }
    .u-gap-220 {
      gap: 220px;
    }
    .u-pad-220 {
      padding: 220px;
    }
    .u-radius-220 {
      border-radius: 220px;
    }

/* ---------------------------------------------------------------------------
   STEP 1: Professional Header + Navigation
   Files changed in this step: index.html + style.css
--------------------------------------------------------------------------- */

.nav-announcement {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.nav-announcement-inner {
  width: min(var(--container), calc(100% - 32px));
  min-height: 36px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: .86rem;
  font-weight: 800;
}

.nav-announcement-inner span:nth-child(2) {
  color: rgba(255, 255, 255, .82);
  font-weight: 650;
}

.nav-announcement-inner a {
  color: white;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .12);
  padding: 4px 10px;
  border-radius: 999px;
  transition: .2s;
}

.nav-announcement-inner a:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}

.enhanced-nav {
  min-height: 78px;
}

.enhanced-brand {
  min-width: 210px;
}

.enhanced-brand-mark {
  position: relative;
  overflow: hidden;
}

.enhanced-brand-mark:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: -3px;
  bottom: -3px;
  border-radius: 999px;
  border: 3px solid var(--surface);
  background: var(--success);
}

.brand-copy {
  display: grid;
  line-height: 1.2;
}

.enhanced-nav-links {
  padding: 5px;
  gap: 3px;
}

.enhanced-nav-links a {
  position: relative;
  padding: 9px 13px;
  font-weight: 800;
}

.enhanced-nav-links a:after {
  content: "";
  position: absolute;
  right: 13px;
  left: 13px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s;
}

.enhanced-nav-links a:hover:after,
.enhanced-nav-links a.active:after {
  transform: scaleX(1);
}

.enhanced-nav-actions {
  gap: 7px;
}

.nav-icon-btn {
  width: 39px;
  padding-inline: 0;
}

.nav-claim-btn {
  box-shadow: 0 12px 24px rgba(15, 118, 110, .22);
}

.enhanced-mobile-drawer {
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.mobile-drawer-head strong {
  display: block;
  letter-spacing: -.02em;
}

.mobile-drawer-head span {
  display: block;
  color: var(--muted);
  font-size: .86rem;
  margin-top: 2px;
}

.mobile-nav-list {
  display: grid;
  gap: 7px;
}

.mobile-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 15px;
  padding: 12px 13px;
  color: var(--text);
  font-weight: 800;
}

.mobile-nav-list a:after {
  content: "›";
  color: var(--muted);
  font-weight: 900;
}

.mobile-drawer-actions {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1180px) {
  .enhanced-brand {
    min-width: auto;
  }

  .enhanced-nav-links a {
    padding-inline: 10px;
    font-size: .88rem;
  }

  .nav-claim-btn {
    display: none;
  }
}

@media (max-width: 920px) {
  .enhanced-nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .nav-announcement-inner {
    justify-content: space-between;
  }

  .nav-announcement-inner span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 640px) {
  .nav-announcement-inner {
    min-height: 34px;
    font-size: .78rem;
    gap: 8px;
  }

  .enhanced-nav {
    min-height: 66px;
  }

  .brand-copy span {
    display: none;
  }

  .enhanced-nav-actions .btn:not(.mobile-menu-btn):not(.nav-icon-btn) {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .enhanced-brand-mark {
    width: 42px;
    height: 42px;
  }
}

/* ---------------------------------------------------------------------------
   STEP 2: Homepage / Hero Section Upgrade
   Files changed in this step: index.html + style.css
--------------------------------------------------------------------------- */

.hero-v2 {
  padding: 54px 0 42px;
}

.hero-v2:before {
  inset: 14px;
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(7, 45, 52, .96), rgba(15, 23, 42, .94)),
    radial-gradient(circle at 80% 20%, rgba(45, 212, 191, .28), transparent 34%),
    radial-gradient(circle at 15% 15%, rgba(249, 115, 22, .24), transparent 32%),
    url("https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1800&q=80") center/cover;
}

.hero-v2-inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: 30px;
}

.hero-content {
  position: relative;
}

.hero-v2-kicker {
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px;
  background: rgba(255, 255, 255, .1);
}

.hero-v2-kicker span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
}

.hero-v2 h1 {
  max-width: 780px;
  font-size: clamp(2.25rem, 5vw, 5.25rem);
  letter-spacing: -.065em;
}

.hero-lead {
  max-width: 760px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .84);
}

.hero-search-box {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .95);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
  border-radius: 999px;
  padding: 8px;
  margin: 20px 0 16px;
}

.hero-search-box > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f5f9;
}

.hero-search-box input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 750;
}

.hero-search-box input::placeholder {
  color: #64748b;
  font-weight: 650;
}

.hero-v2-actions {
  margin-top: 14px;
  margin-bottom: 14px;
}

.hero-white-btn {
  color: white;
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.hero-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .1);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 800;
}

.hero-v2-stats {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.hero-showcase {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .12);
  border-radius: 32px;
  padding: 16px;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .22);
  position: relative;
  overflow: hidden;
}

.hero-showcase:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: rgba(45, 212, 191, .16);
  left: -80px;
  top: -80px;
}

.hero-showcase-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  color: white;
  margin-bottom: 12px;
}

.hero-showcase-top strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
}

.showcase-label {
  display: block;
  color: rgba(255, 255, 255, .68);
  font-size: .84rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.showcase-badge {
  display: inline-flex;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .12);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .82rem;
}

.hero-v2-mini-card {
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

.hero-v2-mini-card .hero-mini-image {
  height: 210px;
}

.hero-floating-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.hero-floating-card {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .1);
  color: white;
  border-radius: 18px;
  padding: 13px;
}

.hero-floating-card strong {
  display: block;
  font-size: .95rem;
}

.hero-floating-card span {
  display: block;
  color: rgba(255, 255, 255, .68);
  font-size: .82rem;
  margin-top: 3px;
}

@media (max-width: 1080px) {
  .hero-v2-inner {
    grid-template-columns: 1fr;
  }

  .hero-showcase {
    max-width: 680px;
  }
}

@media (max-width: 760px) {
  .hero-v2 {
    padding-top: 32px;
  }

  .hero-v2:before {
    inset: 0;
    border-radius: 0 0 34px 34px;
  }

  .hero-v2 h1 {
    font-size: 2.45rem;
  }

  .hero-search-box {
    grid-template-columns: auto 1fr;
    border-radius: 22px;
    padding: 10px;
  }

  .hero-search-box button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hero-v2-stats,
  .hero-floating-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .hero-v2-stats,
  .hero-floating-grid {
    grid-template-columns: 1fr;
  }

  .hero-v2-kicker span {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   STEP 3: About RastReview Section
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.about-section {
  scroll-margin-top: 110px;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 16px;
  align-items: stretch;
}

.about-main-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, var(--primary-soft), transparent 38%),
    linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.about-main-card:after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: var(--secondary-soft);
  left: -86px;
  bottom: -96px;
}

.about-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 900;
  font-size: .82rem;
  margin-bottom: 14px;
}

.about-main-card h3 {
  position: relative;
  z-index: 1;
  max-width: 780px;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.22;
  letter-spacing: -.045em;
  margin-bottom: 12px;
}

.about-main-card p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  max-width: 840px;
  font-size: 1rem;
}

.about-highlight-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.about-highlight-list div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 16px;
  padding: 13px;
}

.about-highlight-list strong {
  color: var(--text);
}

.about-highlight-list span {
  color: var(--muted);
  font-size: .92rem;
}

.about-side-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.about-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.about-feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: var(--shadow);
}

.about-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--primary-soft);
  font-size: 1.35rem;
  margin-bottom: 13px;
}

.about-feature-card h3 {
  margin-bottom: 7px;
  letter-spacing: -.02em;
}

.about-feature-card p {
  color: var(--muted);
  font-size: .92rem;
}

.about-mission-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.about-mission-item {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.about-mission-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
}

.about-mission-item span {
  display: block;
  color: var(--muted);
  font-size: .92rem;
}

@media (max-width: 1080px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-side-grid,
  .about-mission-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-mission-item:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .about-side-grid,
  .about-mission-row {
    grid-template-columns: 1fr;
  }

  .about-main-card {
    padding: 18px;
  }
}

/* ---------------------------------------------------------------------------
   STEP 4: How It Works Section
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.how-section {
  scroll-margin-top: 110px;
}

.how-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.how-step-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  min-height: 325px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.how-step-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: var(--shadow);
}

.how-step-card:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -54px;
  bottom: -58px;
}

.how-step-number {
  position: absolute;
  top: 14px;
  left: 16px;
  color: color-mix(in srgb, var(--primary) 32%, transparent);
  font-weight: 950;
  font-size: 2.2rem;
  line-height: 1;
}

.how-step-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 1.45rem;
  box-shadow: 0 14px 28px rgba(15, 118, 110, .18);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.how-step-card:nth-child(even) .how-step-icon {
  background: linear-gradient(135deg, var(--secondary), #facc15);
  box-shadow: 0 14px 28px rgba(249, 115, 22, .18);
}

.how-step-card h3 {
  position: relative;
  z-index: 1;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}

.how-step-card p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: .94rem;
  margin-bottom: 14px;
  flex: 1;
}

.how-step-card .btn {
  position: relative;
  z-index: 1;
}

.how-path-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.how-path-card {
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 38%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.how-path-highlight {
  background:
    radial-gradient(circle at top right, var(--secondary-soft), transparent 38%),
    var(--surface);
}

.how-path-card h3 {
  font-size: 1.22rem;
  letter-spacing: -.025em;
  margin-bottom: 12px;
}

.how-check-list {
  display: grid;
  gap: 8px;
}

.how-check-list span {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}

@media (max-width: 1080px) {
  .how-flow,
  .how-path-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .how-flow,
  .how-path-layout {
    grid-template-columns: 1fr;
  }

  .how-step-card {
    min-height: auto;
  }
}

/* ---------------------------------------------------------------------------
   STEP 5: Places / Businesses Section Upgrade
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.places-section-v2 {
  scroll-margin-top: 110px;
}

.places-eyebrow {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 6px 11px;
  font-size: .8rem;
  font-weight: 950;
  margin-bottom: 8px;
}

.places-head-v2 {
  align-items: center;
}

.places-head-actions,
.places-results-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.places-toolbar {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.places-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.places-search-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 8px 12px;
}

.places-search-main > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.places-search-input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  box-shadow: none;
  border-radius: 0;
}

.places-search-input:focus {
  box-shadow: none;
}

.places-view-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.places-filter-grid {
  grid-template-columns: repeat(4, 1fr);
}

.places-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
  font-size: .9rem;
}

.switch-pill input {
  accent-color: var(--primary);
}

.switch-pill:has(input:checked) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--primary-soft);
}

.places-content-v2 {
  align-items: start;
}

.places-grid-v2 {
  transition: .2s;
}

.places-grid-v2.list-view {
  grid-template-columns: 1fr;
}

.place-card-v2 {
  isolation: isolate;
}

.place-card-v2 .place-image {
  height: 205px;
}

.place-card-v2.list-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.place-card-v2.list-card .place-image {
  height: 100%;
  min-height: 250px;
}

.place-card-v2 .place-body {
  display: grid;
  gap: 10px;
}

.place-card-v2 .place-title-row {
  margin-bottom: 0;
}

.place-owner-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: .86rem;
}

.place-owner-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.place-score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}

.place-score-text {
  display: grid;
  gap: 2px;
}

.place-score-text strong {
  font-size: .9rem;
}

.place-score-text span {
  color: var(--muted);
  font-size: .78rem;
}

.place-actions-v2 {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.place-save-btn.active {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.place-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.place-small-badge {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 800;
  font-size: .78rem;
}

.no-results-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .places-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .place-card-v2.list-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .places-head-v2,
  .places-results-head {
    align-items: start;
  }

  .places-search-row,
  .places-filter-grid {
    grid-template-columns: 1fr;
  }

  .places-view-actions {
    justify-content: center;
    width: fit-content;
  }

  .place-card-v2.list-card {
    grid-template-columns: 1fr;
  }

  .place-card-v2.list-card .place-image {
    height: 205px;
    min-height: auto;
  }

  .places-toggle-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   STEP 6: Business Details Modal Upgrade
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.business-detail-v2 {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
}

.detail-media-panel,
.detail-content-panel {
  display: grid;
  gap: 14px;
}

.detail-cover-v2 {
  position: relative;
  height: 360px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: var(--shadow-soft);
}

.detail-cover-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-cover-overlay {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 1;
}

.detail-gallery-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.detail-gallery-thumb {
  height: 76px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}

.detail-gallery-thumb:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.detail-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-title-block {
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 38%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
}

.detail-title-block h2 {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.detail-title-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: .9rem;
}

.detail-title-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}

.detail-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.detail-score-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.detail-score-card strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
}

.detail-score-card span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  margin-top: 3px;
}

.detail-info-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-info-card {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 17px;
  padding: 13px;
  box-shadow: var(--shadow-soft);
}

.detail-info-card span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.detail-info-card strong {
  color: var(--text);
  font-size: .95rem;
  word-break: break-word;
}

.detail-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.detail-section-card h3 {
  margin-bottom: 10px;
  letter-spacing: -.025em;
}

.detail-description {
  color: var(--muted);
}

.detail-actions-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-coupon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-coupon-card {
  position: relative;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  background:
    radial-gradient(circle at top left, var(--primary-soft), transparent 42%),
    var(--surface-2);
  border-radius: 18px;
  padding: 13px;
}

.detail-coupon-card strong {
  display: block;
  margin-bottom: 4px;
}

.detail-coupon-code {
  display: inline-flex;
  margin-top: 9px;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--primary);
  border: 1px dashed var(--primary);
  font-weight: 950;
  letter-spacing: .04em;
  cursor: pointer;
}

.detail-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-amenity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  font-weight: 850;
  font-size: .88rem;
}

.detail-rating-breakdown {
  display: grid;
  gap: 8px;
}

.rating-break-row {
  display: grid;
  grid-template-columns: 46px 1fr 36px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}

.rating-break-bar {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.rating-break-bar i {
  display: block;
  height: 100%;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.detail-reviews-list {
  display: grid;
  gap: 10px;
}

.detail-review-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 13px;
}

.detail-review-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.detail-review-user {
  display: flex;
  align-items: center;
  gap: 9px;
}

.detail-review-card p {
  color: var(--muted);
  font-size: .93rem;
}

.detail-business-reply {
  margin-top: 10px;
  border-right: 4px solid var(--primary);
  background: var(--surface);
  border-radius: 14px;
  padding: 10px;
}

.detail-business-reply strong {
  display: block;
  margin-bottom: 3px;
  color: var(--primary);
}

.detail-owner-tools {
  display: grid;
  gap: 10px;
}

.detail-owner-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-empty-mini {
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .business-detail-v2 {
    grid-template-columns: 1fr;
  }

  .detail-cover-v2 {
    height: 320px;
  }
}

@media (max-width: 700px) {
  .detail-score-grid,
  .detail-info-grid-v2,
  .detail-coupon-grid {
    grid-template-columns: 1fr;
  }

  .detail-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-cover-v2 {
    height: 250px;
  }

  .detail-actions-v2 {
    display: grid;
    grid-template-columns: 1fr;
  }

  .detail-actions-v2 .btn,
  .detail-owner-tool-row .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   STEP 7: Review System Upgrade
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.review-form-v2 {
  display: grid;
  gap: 14px;
}

.review-target-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 10px;
}

.review-target-image {
  width: 82px;
  height: 82px;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.review-target-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-target-card h3 {
  line-height: 1.2;
  margin-bottom: 4px;
}

.review-target-card p {
  color: var(--muted);
  font-size: .9rem;
}

.review-rating-panel {
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 42%),
    var(--surface);
  border-radius: 20px;
  padding: 14px;
}

.review-rating-panel > label {
  display: block;
  color: var(--muted);
  font-weight: 850;
  margin-bottom: 8px;
}

.star-input-v2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
}

.star-input-v2 input {
  display: none;
}

.star-input-v2 label {
  cursor: pointer;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: #cbd5e1;
  font-size: 1.45rem;
  transition: transform .2s, color .2s, background .2s, border-color .2s;
}

.star-input-v2 input:checked ~ label,
.star-input-v2 label:hover,
.star-input-v2 label:hover ~ label {
  color: #f59e0b;
  background: #fef3c7;
  border-color: #f59e0b;
  transform: translateY(-1px);
}

[data-theme="dark"] .star-input-v2 input:checked ~ label,
[data-theme="dark"] .star-input-v2 label:hover,
[data-theme="dark"] .star-input-v2 label:hover ~ label {
  background: rgba(245, 158, 11, .16);
}

.review-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--muted);
  font-weight: 850;
  font-size: .88rem;
  cursor: pointer;
}

.review-tag-option input {
  accent-color: var(--primary);
}

.review-tag-option:has(input:checked) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--primary-soft);
}

.review-check-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.review-check-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 11px;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.review-check-card input {
  accent-color: var(--primary);
  margin-inline-end: 6px;
}

.review-check-card:has(input:checked) {
  background: var(--primary-soft);
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.review-card-v2 {
  position: relative;
  overflow: hidden;
}

.review-card-v2.reported {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background:
    radial-gradient(circle at top left, var(--danger-soft), transparent 40%),
    var(--surface);
}

.review-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}

.review-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.review-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.review-mini-tag {
  display: inline-flex;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 4px 8px;
  font-weight: 900;
  font-size: .74rem;
}

.review-quality-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.review-quality-score .trust-bar {
  margin: 0;
}

.report-form-v2 {
  display: grid;
  gap: 12px;
}

.business-reply-v2 {
  display: grid;
  gap: 12px;
}

.reply-preview-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 13px;
}

.reply-preview-card p {
  color: var(--muted);
  font-size: .93rem;
  margin-top: 5px;
}

.review-center-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.review-center-toolbar .input {
  min-width: 0;
}

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

.review-status-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: .75rem;
  font-weight: 900;
}

.review-status-badge.good {
  background: rgba(22, 163, 74, .12);
  color: var(--success);
}

.review-status-badge.warn {
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
}

@media (max-width: 760px) {
  .review-target-card,
  .review-check-row,
  .review-center-toolbar,
  .review-center-grid {
    grid-template-columns: 1fr;
  }

  .review-target-image {
    width: 100%;
    height: 160px;
  }

  .star-input-v2 label {
    width: 38px;
    height: 38px;
  }
}

/* ---------------------------------------------------------------------------
   STEP 8: Business Owner Permission / Dashboard
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.owner-dashboard-section {
  scroll-margin-top: 110px;
}

.owner-dashboard-head {
  align-items: center;
}

.owner-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-access-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 38%),
    var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.owner-access-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 1.45rem;
  box-shadow: 0 14px 28px rgba(15, 118, 110, .18);
}

.owner-access-panel h3 {
  letter-spacing: -.02em;
  margin-bottom: 3px;
}

.owner-access-panel p {
  color: var(--muted);
}

.owner-access-panel.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}

.owner-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.owner-metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.owner-metric-card:after {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -28px;
  bottom: -32px;
}

.owner-metric-card span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--surface-2);
  margin-bottom: 12px;
}

.owner-metric-card strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
}

.owner-metric-card p {
  color: var(--muted);
  font-size: .9rem;
}

.owner-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr);
  gap: 14px;
}

.owner-panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.owner-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.owner-panel-head h3 {
  letter-spacing: -.02em;
}

.owner-panel-head p {
  color: var(--muted);
  font-size: .9rem;
}

.owner-business-list,
.owner-review-queue {
  display: grid;
  gap: 10px;
}

.owner-business-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 10px;
}

.owner-business-thumb {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.owner-business-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-business-main {
  min-width: 0;
}

.owner-business-main h4 {
  line-height: 1.2;
  margin-bottom: 5px;
}

.owner-business-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .8rem;
}

.owner-business-meta span {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 7px;
}

.owner-business-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.owner-review-item {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.owner-review-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.owner-review-top strong {
  line-height: 1.2;
}

.owner-review-item p {
  color: var(--muted);
  font-size: .9rem;
}

.owner-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.owner-guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.owner-guide-card span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 950;
  margin-bottom: 12px;
}

.owner-guide-card h3 {
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.owner-guide-card p {
  color: var(--muted);
  font-size: .9rem;
}

.owner-empty-state {
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
}

.owner-lock-note {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--secondary-soft);
  color: var(--secondary);
  font-weight: 900;
  font-size: .82rem;
  margin-top: 8px;
}

@media (max-width: 1080px) {
  .owner-metrics-grid,
  .owner-guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .owner-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .owner-access-panel,
  .owner-metrics-grid,
  .owner-guide-grid,
  .owner-business-item {
    grid-template-columns: 1fr;
  }

  .owner-business-thumb {
    width: 100%;
    height: 170px;
  }

  .owner-dashboard-actions,
  .owner-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-dashboard-actions .btn,
  .owner-panel-head .btn,
  .owner-business-actions .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   STEP 9: Claim Business System
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.claim-system-section {
  scroll-margin-top: 110px;
}

.claim-system-head {
  align-items: center;
}

.claim-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.claim-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.claim-workflow-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
  min-height: 210px;
}

.claim-workflow-card:after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -34px;
  bottom: -40px;
}

.claim-workflow-card span {
  display: inline-flex;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  margin-bottom: 12px;
}

.claim-workflow-card h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.claim-workflow-card p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: .92rem;
}

.claim-dashboard-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 14px;
  align-items: start;
}

.claim-panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.claim-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.claim-panel-head h3 {
  letter-spacing: -.02em;
}

.claim-panel-head p {
  color: var(--muted);
  font-size: .9rem;
}

.claim-large-action {
  width: 100%;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 42%),
    var(--surface-2);
  color: var(--text);
  border-radius: 22px;
  padding: 22px;
  cursor: pointer;
  text-align: center;
  display: grid;
  gap: 7px;
  place-items: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.claim-large-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--primary);
}

.claim-large-action span {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 1.6rem;
}

.claim-large-action strong {
  font-size: 1.1rem;
}

.claim-large-action small {
  color: var(--muted);
  font-weight: 700;
}

.claim-request-list {
  display: grid;
  gap: 10px;
}

.claim-request-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.claim-request-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

.claim-request-top h4 {
  line-height: 1.25;
  margin-bottom: 4px;
}

.claim-status-badge {
  display: inline-flex;
  width: fit-content;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .76rem;
  font-weight: 950;
}

.claim-status-badge.pending {
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}

.claim-status-badge.approved {
  background: rgba(22, 163, 74, .14);
  color: var(--success);
}

.claim-status-badge.rejected {
  background: rgba(239, 68, 68, .14);
  color: var(--danger);
}

.claim-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .8rem;
  margin: 8px 0;
}

.claim-request-meta span {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 7px;
}

.claim-request-note {
  color: var(--muted);
  font-size: .9rem;
  margin-top: 7px;
}

.claim-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.claim-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.claim-status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.claim-status-card:after {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--secondary-soft);
  left: -30px;
  bottom: -34px;
}

.claim-status-card span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--surface-2);
  margin-bottom: 12px;
}

.claim-status-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
}

.claim-status-card p {
  color: var(--muted);
  font-size: .9rem;
}

.claim-form-v2 {
  display: grid;
  gap: 12px;
}

.claim-place-preview {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.claim-place-preview strong {
  display: block;
}

.claim-place-preview span {
  color: var(--muted);
  font-size: .88rem;
}

.claim-admin-note {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

@media (max-width: 1080px) {
  .claim-workflow-grid,
  .claim-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .claim-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .claim-workflow-grid,
  .claim-status-grid {
    grid-template-columns: 1fr;
  }

  .claim-panel-head,
  .claim-system-head,
  .claim-request-top {
    align-items: stretch;
    flex-direction: column;
  }

  .claim-head-actions .btn,
  .claim-panel-head .btn,
  .claim-request-actions .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   STEP 11: Coupons / Offers Section
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.coupons-section-v2 {
  scroll-margin-top: 110px;
}

.coupons-head-v2 {
  align-items: center;
}

.coupon-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.coupons-toolbar {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.coupons-search-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 8px 12px;
}

.coupons-search-main span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.coupons-search-main .input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  box-shadow: none;
}

.coupons-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.coupon-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 14px 0;
}

.coupon-metric-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
}

.coupon-metric-card:after {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--secondary-soft);
  left: -30px;
  bottom: -36px;
}

.coupon-metric-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--surface-2);
  margin-bottom: 11px;
}

.coupon-metric-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
}

.coupon-metric-card p {
  color: var(--muted);
  font-size: .9rem;
}

.coupons-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.coupons-result-head {
  padding: 0;
}

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

.coupon-card-v2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 42%),
    var(--surface);
  border: 1px dashed color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.coupon-card-v2:before,
.coupon-card-v2:after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--bg);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
}

.coupon-card-v2:before {
  right: -18px;
}

.coupon-card-v2:after {
  left: -18px;
}

.coupon-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.coupon-business {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.coupon-business-thumb {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  flex: 0 0 auto;
}

.coupon-business-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coupon-business h3 {
  line-height: 1.18;
  margin-bottom: 4px;
}

.coupon-business p {
  color: var(--muted);
  font-size: .84rem;
}

.coupon-type-badge {
  display: inline-flex;
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--secondary-soft);
  color: var(--secondary);
  font-size: .78rem;
  font-weight: 950;
}

.coupon-card-v2 h4 {
  font-size: 1.22rem;
  line-height: 1.25;
  margin-bottom: 6px;
}

.coupon-card-v2 .coupon-desc {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 12px;
}

.coupon-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px dashed var(--primary);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 8px;
  margin: 12px 0;
}

.coupon-code-text {
  color: var(--primary);
  font-weight: 950;
  letter-spacing: .08em;
  padding-inline: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.coupon-meta-pill {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 850;
  font-size: .78rem;
}

.coupon-owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.coupons-sidebar {
  display: grid;
  gap: 14px;
}

.coupon-form-v2 {
  display: grid;
  gap: 12px;
}

.coupon-empty-state {
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--muted);
  grid-column: 1 / -1;
}

@media (max-width: 1080px) {
  .coupons-layout-v2 {
    grid-template-columns: 1fr;
  }

  .coupon-metrics-grid,
  .coupons-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coupons-sidebar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .coupon-head-actions,
  .coupon-card-top,
  .coupon-owner-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .coupon-head-actions .btn,
  .coupon-owner-actions .btn,
  .coupon-code-row .btn {
    width: 100%;
  }

  .coupon-metrics-grid,
  .coupons-filter-grid,
  .coupons-grid-v2,
  .coupons-sidebar {
    grid-template-columns: 1fr;
  }

  .coupon-code-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   STEP 12: Trust & Safety Section
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.safety-section-v2 {
  scroll-margin-top: 110px;
}

.safety-head-v2 {
  align-items: center;
}

.safety-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.safety-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.safety-metric-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
}

.safety-metric-card:after {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -30px;
  bottom: -36px;
}

.safety-metric-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--surface-2);
  margin-bottom: 11px;
  font-size: 1.2rem;
}

.safety-metric-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
}

.safety-metric-card p {
  color: var(--muted);
  font-size: .9rem;
}

.safety-control-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.safety-control-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.safety-control-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}

.safety-control-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 1.35rem;
  margin-bottom: 13px;
}

.safety-control-card:nth-child(even) .safety-control-icon {
  background: linear-gradient(135deg, var(--secondary), #facc15);
}

.safety-control-card h3 {
  margin-bottom: 7px;
  letter-spacing: -.02em;
}

.safety-control-card p {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 12px;
}

.safety-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  gap: 14px;
  align-items: start;
}

.safety-panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.safety-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.safety-panel-head h3 {
  letter-spacing: -.02em;
}

.safety-panel-head p {
  color: var(--muted);
  font-size: .9rem;
}

.safety-list {
  display: grid;
  gap: 10px;
}

.safety-place-item,
.safety-review-item {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.safety-place-top,
.safety-review-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

.safety-place-top h4,
.safety-review-top h4 {
  line-height: 1.25;
  margin-bottom: 4px;
}

.safety-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .8rem;
  margin: 8px 0;
}

.safety-meta-row span {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 7px;
}

.safety-score-badge {
  display: inline-flex;
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 950;
  font-size: .8rem;
}

.safety-score-badge.warn {
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
}

.safety-score-badge.good {
  background: rgba(22, 163, 74, .12);
  color: var(--success);
}

.safety-review-item p {
  color: var(--muted);
  font-size: .9rem;
}

.safety-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.safety-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.safety-policy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.safety-policy-card span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 950;
  margin-bottom: 12px;
}

.safety-policy-card h3 {
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.safety-policy-card p {
  color: var(--muted);
  font-size: .9rem;
}

.safety-form-v2 {
  display: grid;
  gap: 12px;
}

.trust-formula-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.trust-formula-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 10px;
}

.trust-formula-row span {
  color: var(--muted);
  font-weight: 850;
}

.trust-formula-row strong {
  color: var(--primary);
}

@media (max-width: 1080px) {
  .safety-metrics-grid,
  .safety-control-grid,
  .safety-policy-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .safety-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .safety-metrics-grid,
  .safety-control-grid,
  .safety-policy-grid,
  .trust-formula-row {
    grid-template-columns: 1fr;
  }

  .safety-head-actions,
  .safety-panel-head,
  .safety-place-top,
  .safety-review-top,
  .safety-item-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .safety-head-actions .btn,
  .safety-panel-head .btn,
  .safety-item-actions .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   STEP 13: Contact / Support Section
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.contact-section-v2 {
  scroll-margin-top: 110px;
}

.contact-head-v2 {
  align-items: center;
}

.contact-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.contact-metric-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
}

.contact-metric-card:after {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -30px;
  bottom: -36px;
}

.contact-metric-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--surface-2);
  margin-bottom: 11px;
  font-size: 1.2rem;
}

.contact-metric-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
}

.contact-metric-card p {
  color: var(--muted);
  font-size: .9rem;
}

.contact-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.contact-panel-card,
.contact-quick-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.contact-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-panel-head h3 {
  letter-spacing: -.02em;
}

.contact-panel-head p {
  color: var(--muted);
  font-size: .9rem;
}

.contact-form-v2,
.support-form-v2 {
  display: grid;
  gap: 12px;
}

.contact-sidebar-v2 {
  display: grid;
  gap: 14px;
}

.contact-quick-actions {
  display: grid;
  gap: 10px;
}

.contact-action-btn {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: right;
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.contact-action-btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: var(--shadow-soft);
}

.contact-action-btn > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 1.25rem;
}

.contact-action-btn strong,
.contact-action-btn small {
  display: block;
}

.contact-action-btn small {
  color: var(--muted);
  margin-top: 3px;
  font-weight: 650;
}

.support-info-list {
  display: grid;
  gap: 10px;
}

.support-info-list div {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 11px;
}

.support-info-list strong {
  display: block;
  margin-bottom: 3px;
}

.support-info-list span {
  display: block;
  color: var(--muted);
  font-size: .88rem;
}

.support-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
  gap: 14px;
  margin-top: 14px;
}

.support-request-list {
  display: grid;
  gap: 10px;
}

.support-ticket-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.support-ticket-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

.support-ticket-top h4 {
  line-height: 1.25;
  margin-bottom: 4px;
}

.support-status-badge {
  display: inline-flex;
  width: fit-content;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .76rem;
  font-weight: 950;
}

.support-status-badge.open {
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}

.support-status-badge.closed {
  background: rgba(22, 163, 74, .14);
  color: var(--success);
}

.support-status-badge.high,
.support-status-badge.urgent {
  background: rgba(239, 68, 68, .14);
  color: var(--danger);
}

.support-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .8rem;
  margin: 8px 0;
}

.support-meta-row span {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 7px;
}

.support-ticket-card p {
  color: var(--muted);
  font-size: .9rem;
}

.support-ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.suggest-place-preview {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.suggest-place-preview strong {
  display: block;
}

.suggest-place-preview span {
  color: var(--muted);
  font-size: .88rem;
}

@media (max-width: 1080px) {
  .contact-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-layout-v2,
  .support-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .contact-sidebar-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .contact-metrics-grid,
  .contact-sidebar-v2 {
    grid-template-columns: 1fr;
  }

  .contact-head-actions,
  .contact-panel-head,
  .support-ticket-top,
  .support-ticket-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-head-actions .btn,
  .contact-panel-head .btn,
  .support-ticket-actions .btn {
    width: 100%;
  }

  .contact-action-btn {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .contact-action-btn > span {
    margin: 0 auto;
  }
}

/* ---------------------------------------------------------------------------
   STEP 14: FAQ Section
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.faq-section-v2 {
  scroll-margin-top: 110px;
}

.faq-head-v2 {
  align-items: center;
}

.faq-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.faq-toolbar {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.faq-search-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 8px 12px;
}

.faq-search-main span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.faq-search-main .input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  box-shadow: none;
}

.faq-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-category-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: .2s;
}

.faq-category-btn:hover,
.faq-category-btn.active {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}

.faq-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 14px 0;
}

.faq-metric-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-soft);
}

.faq-metric-card:after {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -30px;
  bottom: -36px;
}

.faq-metric-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--surface-2);
  margin-bottom: 11px;
  font-size: 1.2rem;
}

.faq-metric-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
}

.faq-metric-card p {
  color: var(--muted);
  font-size: .9rem;
}

.faq-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.faq-result-head {
  padding: 0;
}

.faq-list-v2 {
  display: grid;
  gap: 10px;
}

.faq-item-v2 {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.faq-question-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: right;
  padding: 15px;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font: inherit;
}

.faq-question-btn strong {
  display: block;
  letter-spacing: -.02em;
}

.faq-question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.faq-question-meta span {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 7px;
  font-size: .76rem;
  font-weight: 850;
}

.faq-toggle-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 950;
  transition: transform .2s, background .2s, color .2s;
}

.faq-item-v2.open .faq-toggle-icon {
  transform: rotate(45deg);
  background: var(--primary-soft);
  color: var(--primary);
}

.faq-answer {
  display: none;
  padding: 0 15px 15px;
  color: var(--muted);
  line-height: 1.8;
}

.faq-item-v2.open .faq-answer {
  display: block;
}

.faq-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.faq-sidebar-v2 {
  display: grid;
  gap: 14px;
}

.faq-help-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.faq-help-card h3 {
  margin-bottom: 7px;
}

.faq-help-card p {
  color: var(--muted);
  margin-bottom: 12px;
}

.faq-quick-links {
  display: grid;
  gap: 8px;
}

.faq-quick-links button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: right;
  cursor: pointer;
  font-weight: 850;
}

.ask-question-form {
  display: grid;
  gap: 12px;
}

.faq-empty-state {
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .faq-layout-v2 {
    grid-template-columns: 1fr;
  }

  .faq-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-sidebar-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .faq-head-actions,
  .faq-answer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .faq-head-actions .btn,
  .faq-answer-actions .btn {
    width: 100%;
  }

  .faq-metrics-grid,
  .faq-sidebar-v2 {
    grid-template-columns: 1fr;
  }

  .faq-question-btn {
    grid-template-columns: 1fr;
  }

  .faq-toggle-icon {
    justify-self: start;
  }
}

/* ---------------------------------------------------------------------------
   STEP 15: Complete Footer
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

.footer-v2 {
  margin-top: 42px;
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, .18), transparent 34%),
    linear-gradient(135deg, #082f36, #0f172a);
  color: white;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-cta {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  transform: translateY(-26px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, .22), transparent 34%),
    rgba(255,255,255,.1);
  border-radius: 30px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
}

.footer-eyebrow {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 11px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight: 950;
  font-size: .78rem;
  margin-bottom: 10px;
}

.footer-cta h2 {
  color: white;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.footer-cta p {
  color: rgba(255,255,255,.72);
  max-width: 820px;
}

.footer-cta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-light-btn {
  color: white;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

.footer-grid-v2 {
  padding-top: 6px;
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(150px, .7fr)) minmax(260px, 1fr);
  gap: 22px;
}

.footer-brand-card {
  display: grid;
  gap: 14px;
}

.footer-brand {
  color: white;
  align-items: center;
}

.footer-brand small {
  display: block;
  color: rgba(255,255,255,.64);
  font-weight: 750;
  margin-top: 2px;
}

.footer-brand-card p,
.footer-newsletter p {
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  font-size: .94rem;
}

.footer-col h4 {
  color: white;
  margin-bottom: 12px;
  letter-spacing: -.015em;
}

.footer-v2 .footer-links {
  display: grid;
  gap: 9px;
}

.footer-v2 .footer-links a {
  color: rgba(255,255,255,.68);
  width: fit-content;
  transition: .2s;
}

.footer-v2 .footer-links a:hover {
  color: white;
  transform: translateX(-2px);
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-socials a {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: white;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: .84rem;
  font-weight: 850;
  transition: .2s;
}

.footer-socials a:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.footer-newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 12px 0;
}

.footer-newsletter-form .input {
  background: rgba(255,255,255,.1);
  color: white;
  border-color: rgba(255,255,255,.16);
}

.footer-newsletter-form .input::placeholder {
  color: rgba(255,255,255,.48);
}

.footer-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.footer-mini-actions button,
.footer-bottom-links a {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.76);
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: .2s;
}

.footer-mini-actions button:hover,
.footer-bottom-links a:hover {
  color: white;
  background: rgba(255,255,255,.14);
}

.footer-bottom-v2 {
  width: min(var(--container), calc(100% - 32px));
  margin: 20px auto 0;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.62);
  font-size: .9rem;
}

.footer-bottom-v2 strong {
  color: white;
}

.footer-bottom-v2 > div:first-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-bottom-links {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  .footer-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand-card,
  .footer-newsletter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .footer-cta {
    grid-template-columns: 1fr;
    transform: translateY(-18px);
    border-radius: 24px;
  }

  .footer-cta-actions,
  .footer-newsletter-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .footer-cta-actions .btn,
  .footer-newsletter-form .btn {
    width: 100%;
  }

  .footer-grid-v2 {
    grid-template-columns: 1fr;
  }

  .footer-brand-card,
  .footer-newsletter {
    grid-column: auto;
  }

  .footer-bottom-v2 {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   STEP 16: Mobile Responsive Polish
   Full version package includes: index.html + style.css + app.js
--------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 92px;
}

body {
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.input,
.select,
.textarea,
button,
.btn {
  font-size: 16px;
}

.mobile-menu-btn {
  display: none;
}

.mobile-drawer {
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card {
  max-height: min(88dvh, 900px);
  overflow: hidden;
}

.modal-body {
  max-height: calc(88dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  min-width: 760px;
}

@media (max-width: 1180px) {
  .container,
  .footer-inner,
  .nav,
  .hero-inner,
  .footer-cta,
  .footer-bottom-v2 {
    width: min(100% - 24px, var(--container));
  }

  .content-layout,
  .places-content-v2,
  .admin-layout,
  .business-detail-v2,
  .contact-layout-v2,
  .support-dashboard-layout,
  .safety-dashboard-layout,
  .claim-dashboard-layout,
  .owner-dashboard-layout,
  .coupons-layout-v2,
  .faq-layout-v2 {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .coupons-sidebar,
  .contact-sidebar-v2,
  .faq-sidebar-v2 {
    position: static;
    top: auto;
  }
}

@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .nav {
    min-height: 68px;
    padding-inline: 0;
  }

  .nav-actions {
    gap: 6px;
  }

  .nav-actions .btn:not(.mobile-menu-btn) {
    display: none;
  }

  .brand {
    min-width: 0;
  }

  .brand strong,
  .brand small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero {
    padding-top: 98px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 9vw, 3.35rem);
  }

  .hero-actions,
  .hero-search {
    grid-template-columns: 1fr;
  }

  .hero-actions .btn,
  .hero-search .btn {
    width: 100%;
  }

  .hero-stats,
  .dashboard-grid,
  .metric-row,
  .owner-metrics-grid,
  .claim-status-grid,
  .safety-metrics-grid,
  .contact-metrics-grid,
  .faq-metrics-grid,
  .coupon-metrics-grid,
  .about-side-grid,
  .about-mission-row,
  .how-flow,
  .how-path-layout,
  .owner-guide-grid,
  .claim-workflow-grid,
  .safety-control-grid,
  .safety-policy-grid,
  .filter-grid,
  .places-filter-grid,
  .coupons-filter-grid,
  .cards-grid,
  .places-grid-v2,
  .coupons-grid-v2,
  .review-center-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand-card,
  .footer-newsletter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --radius: 18px;
  }

  body {
    font-size: 15px;
  }

  .container,
  .footer-inner,
  .hero-inner,
  .footer-bottom-v2 {
    width: calc(100% - 18px);
  }

  .section {
    margin-block: 28px;
    scroll-margin-top: 90px;
  }

  .section-head,
  .places-head-v2,
  .coupons-head-v2,
  .safety-head-v2,
  .contact-head-v2,
  .faq-head-v2,
  .claim-system-head,
  .owner-dashboard-head,
  .footer-bottom-v2 {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }

  .section-head h2 {
    font-size: clamp(1.55rem, 7vw, 2.2rem);
  }

  .nav {
    width: calc(100% - 18px);
    min-height: 66px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    font-size: .9rem;
  }

  .brand small {
    max-width: 150px;
  }

  .mobile-drawer {
    width: calc(100% - 18px);
    right: 9px;
    left: 9px;
    top: 76px;
    border-radius: 22px;
  }

  .mobile-drawer a,
  .mobile-drawer button,
  a,
  button,
  .btn,
  .icon-btn,
  .chip,
  .faq-category-btn,
  .switch-pill {
    min-height: 44px;
  }

  .hero {
    min-height: auto;
    padding: 94px 0 34px;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-stats,
  .dashboard-grid,
  .metric-row,
  .owner-metrics-grid,
  .claim-status-grid,
  .safety-metrics-grid,
  .contact-metrics-grid,
  .faq-metrics-grid,
  .coupon-metrics-grid,
  .about-side-grid,
  .about-mission-row,
  .how-flow,
  .how-path-layout,
  .owner-guide-grid,
  .claim-workflow-grid,
  .safety-control-grid,
  .safety-policy-grid,
  .filter-grid,
  .places-filter-grid,
  .coupons-filter-grid,
  .cards-grid,
  .places-grid-v2,
  .coupons-grid-v2,
  .review-center-grid,
  .footer-grid-v2,
  .footer-cta,
  .detail-score-grid,
  .detail-info-grid-v2,
  .detail-coupon-grid,
  .review-check-row,
  .two-col,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-card,
  .panel,
  .side-card,
  .about-main-card,
  .about-feature-card,
  .how-step-card,
  .place-card,
  .review-card,
  .owner-panel-card,
  .claim-panel-card,
  .safety-panel-card,
  .contact-panel-card,
  .faq-help-card,
  .footer-cta {
    border-radius: 18px;
  }

  .places-search-row,
  .places-search-main,
  .coupons-search-main,
  .faq-search-main,
  .place-card-v2.list-card,
  .owner-business-item,
  .review-target-card {
    grid-template-columns: 1fr;
  }

  .places-search-main > span,
  .coupons-search-main span,
  .faq-search-main span {
    display: none;
  }

  .places-view-actions {
    width: 100%;
    justify-content: stretch;
  }

  .places-view-actions .icon-btn {
    flex: 1;
  }

  .places-toggle-row,
  .chips,
  .faq-category-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chip,
  .switch-pill,
  .faq-category-btn {
    justify-content: center;
    text-align: center;
  }

  .place-card-v2 .place-image,
  .place-card-v2.list-card .place-image {
    height: 210px;
    min-height: auto;
  }

  .owner-business-thumb,
  .review-target-image {
    width: 100%;
    height: 170px;
  }

  .place-title-row,
  .coupon-card-top,
  .detail-review-top,
  .owner-review-top,
  .claim-request-top,
  .safety-place-top,
  .safety-review-top,
  .support-ticket-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rating-pill,
  .coupon-type-badge,
  .claim-status-badge,
  .safety-score-badge,
  .support-status-badge {
    justify-self: start;
  }

  .card-actions,
  .place-actions-v2,
  .detail-actions-v2,
  .owner-business-actions,
  .claim-request-actions,
  .safety-item-actions,
  .support-ticket-actions,
  .faq-answer-actions,
  .footer-cta-actions,
  .contact-head-actions,
  .faq-head-actions,
  .safety-head-actions,
  .claim-head-actions,
  .owner-dashboard-actions,
  .coupon-head-actions,
  .places-head-actions,
  .places-results-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .card-actions .btn,
  .place-actions-v2 .btn,
  .detail-actions-v2 .btn,
  .owner-business-actions .btn,
  .claim-request-actions .btn,
  .safety-item-actions .btn,
  .support-ticket-actions .btn,
  .faq-answer-actions .btn,
  .footer-cta-actions .btn,
  .contact-head-actions .btn,
  .faq-head-actions .btn,
  .safety-head-actions .btn,
  .claim-head-actions .btn,
  .owner-dashboard-actions .btn,
  .coupon-head-actions .btn,
  .places-head-actions .btn,
  .places-results-actions .btn,
  .btn.block {
    width: 100%;
  }

  .business-detail-v2 {
    gap: 12px;
  }

  .detail-cover-v2 {
    height: 240px;
    border-radius: 18px;
  }

  .detail-gallery-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal {
    padding: 10px;
    align-items: end;
  }

  .modal-card {
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
  }

  .modal-head {
    padding: 14px;
  }

  .modal-body {
    padding: 14px;
    max-height: calc(92dvh - 84px);
  }

  .footer-cta {
    transform: translateY(-16px);
    width: calc(100% - 18px);
    padding: 18px;
  }

  .footer-newsletter-form {
    grid-template-columns: 1fr;
  }

  .footer-socials,
  .footer-mini-actions,
  .footer-bottom-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .nav {
    width: calc(100% - 12px);
  }

  .brand small {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .place-card-v2 .place-image,
  .place-card-v2.list-card .place-image,
  .detail-cover-v2 {
    height: 200px;
  }

  .input,
  .select,
  .textarea {
    min-height: 44px;
  }

  .textarea {
    min-height: 120px;
  }

  .footer-socials,
  .footer-mini-actions,
  .footer-bottom-links {
    grid-template-columns: 1fr;
  }

  .admin-table {
    min-width: 680px;
    font-size: .84rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .place-card:hover,
  .how-step-card:hover,
  .about-feature-card:hover,
  .safety-control-card:hover,
  .coupon-card-v2:hover,
  .contact-action-btn:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   STEP 17: Code Cleaning Notes
   - Cleaned spacing/trailing whitespace.
   - Kept visual design unchanged.
   - Responsive rules from Step 16 remain active.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   STEP 10: Admin Panel Upgrade
   Added after Step 17 Code Cleaning so latest features stay intact.
--------------------------------------------------------------------------- */

.admin-section-v2 {
  scroll-margin-top: 110px;
}

.admin-head-v2 {
  align-items: center;
}

.admin-head-actions,
.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-access-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 38%),
    var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.admin-access-card.is-admin {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}

.admin-access-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 1.45rem;
  box-shadow: 0 14px 28px rgba(15, 118, 110, .18);
}

.admin-access-card h3 {
  margin-bottom: 3px;
  letter-spacing: -.02em;
}

.admin-access-card p {
  color: var(--muted);
}

.admin-metrics-grid-v2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.admin-metric-card-v2 {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.admin-metric-card-v2:after {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: var(--primary-soft);
  left: -28px;
  bottom: -34px;
}

.admin-metric-card-v2 span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--surface-2);
  margin-bottom: 10px;
}

.admin-metric-card-v2 strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
}

.admin-metric-card-v2 p {
  color: var(--muted);
  font-size: .85rem;
}

.admin-tabs-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 22px;
  padding: 8px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}

.admin-v2-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: .2s;
}

.admin-v2-tab:hover,
.admin-v2-tab.active {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.admin-v2-panel {
  display: none;
}

.admin-v2-panel.active {
  display: block;
}

.admin-overview-grid-v2,
.admin-data-grid-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 14px;
}

.admin-panel-card-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.admin-panel-head-v2 {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-panel-head-v2 h3 {
  letter-spacing: -.02em;
}

.admin-panel-head-v2 p {
  color: var(--muted);
  font-size: .9rem;
}

.admin-toolbar-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(150px, .55fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-table-wrap-v2 {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.admin-table-v2 {
  width: 100%;
  min-width: 980px;
}

.admin-table-v2 td,
.admin-table-v2 th {
  vertical-align: middle;
}

.admin-business-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.admin-business-thumb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  flex: 0 0 auto;
}

.admin-business-cell strong,
.admin-business-cell span {
  display: block;
}

.admin-business-cell span {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}

.admin-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-status-pill {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 7px;
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-status-pill.good {
  background: rgba(22, 163, 74, .12);
  color: var(--success);
  border-color: rgba(22, 163, 74, .22);
}

.admin-status-pill.warn {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border-color: rgba(245, 158, 11, .22);
}

.admin-health-list,
.admin-activity-list,
.admin-moderation-list-v2,
.admin-claim-list-v2,
.admin-support-list-v2 {
  display: grid;
  gap: 10px;
}

.admin-health-item,
.admin-action-card-v2 {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.admin-health-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-health-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.admin-health-item strong,
.admin-action-card-v2 strong {
  display: block;
}

.admin-health-item p,
.admin-action-card-v2 p {
  color: var(--muted);
  font-size: .88rem;
  margin-top: 2px;
}

.admin-action-top-v2 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-action-meta-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .8rem;
  margin: 8px 0;
}

.admin-action-meta-v2 span {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 7px;
}

.admin-action-buttons-v2,
.admin-data-actions-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.admin-note-v2 {
  margin-top: 12px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}

.admin-note-v2 p {
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 1180px) {
  .admin-metrics-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-overview-grid-v2,
  .admin-data-grid-v2 {
    grid-template-columns: 1fr;
  }

  .admin-toolbar-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-access-card,
  .admin-metrics-grid-v2,
  .admin-toolbar-v2 {
    grid-template-columns: 1fr;
  }

  .admin-tabs-v2 {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-v2-tab {
    width: 100%;
  }

  .admin-panel-head-v2,
  .admin-action-top-v2 {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-head-actions,
  .admin-inline-actions,
  .admin-action-buttons-v2,
  .admin-data-actions-v2 {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .admin-head-actions .btn,
  .admin-inline-actions .btn,
  .admin-action-buttons-v2 .btn,
  .admin-data-actions-v2 .btn,
  .admin-access-card .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   STEP 18.1: Places Pagination / Product Browsing
   Adds page buttons so the long website does not show every business at once.
--------------------------------------------------------------------------- */

.pagination-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.pagination-info {
  color: var(--muted);
  font-weight: 700;
  font-size: .83rem;
  white-space: nowrap;
}

.pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.page-btn,
.page-ellipsis {
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
}

.page-btn {
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.page-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: var(--shadow-soft);
}

.page-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent);
}

.page-btn.next,
.page-btn.prev {
  padding: 0 10px;
  min-width: 34px;
  width: auto;
  font-size: 1rem;
}

.page-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.page-ellipsis {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
}

/* Jump to page */
.page-jump-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 2px;
  border-right: 1px solid var(--border);
  padding-right: 8px;
}

.page-jump-input {
  width: 48px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  outline: none;
  transition: border-color .15s;
  -moz-appearance: textfield;
}

.page-jump-input::-webkit-outer-spin-button,
.page-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-jump-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.page-jump-btn {
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background .15s, border-color .15s, transform .15s;
}

.page-jump-btn:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  border-color: var(--primary);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .pagination-wrap {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 10px 12px;
    margin-top: 12px;
    gap: 8px;
  }

  .pagination-controls {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .page-jump-wrap {
    border-right: none;
    border-top: 1px solid var(--border);
    padding-right: 0;
    padding-top: 8px;
    margin-right: 0;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .page-btn,
  .page-ellipsis {
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: .8rem;
  }

  .page-jump-input {
    width: 42px;
    height: 30px;
  }

  .page-jump-btn {
    height: 30px;
    min-width: 30px;
  }
}

/* Compact polish update: makes the landing page shorter and cleaner without removing core features. */
.nav-announcement-inner { padding-block: 8px; }
.enhanced-nav { min-height: 68px; }
.section { padding-top: 30px; }
.section-head { margin-bottom: 14px; }
.hero-v2 { padding-block: 46px 34px; }
.hero-v2-inner { gap: 22px; }
.hero-lead { max-width: 680px; }
.hero-trust-row,
.hero-v2-stats,
.about-highlight-list,
.about-mission-row,
.how-flow,
.footer-grid-v2 { gap: 12px; }
.how-step-card,
.about-main-card,
.about-feature-card,
.side-card,
.metric-card { padding: 16px; }
.footer-cta { padding: 24px; }
.footer-inner { padding-block: 28px; }
@media (max-width: 760px) {
  .section { padding-top: 22px; }
  .hero-v2 { padding-block: 34px 24px; }
  .hero-actions { gap: 8px; }
}