/* Page-specific extensions */
    .product-hero {
      padding: 80px 0 96px;
      position: relative;
      overflow: hidden clip;
      background: linear-gradient(180deg, var(--tw-bg) 0%, var(--tw-bg-2) 100%);
    }
    .product-hero::before {
      content: '';
      position: absolute;
      top: -200px; right: -200px;
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(43,123,240,0.10), transparent 60%);
      pointer-events: none;
    }
    .product-hero::after {
      content: '';
      position: absolute;
      bottom: -300px; left: -200px;
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(243,179,0,0.10), transparent 60%);
      pointer-events: none;
    }
    .product-hero .container { position: relative; }
    .crumbs {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--tw-fg-3); margin-bottom: 28px;
    }
    .crumbs a { color: var(--tw-fg-3); }
    .crumbs a:hover { color: var(--tw-navy); }
    .crumbs .sep { color: var(--tw-fg-4); }
    .crumbs .here { color: var(--tw-navy); font-weight: 700; }

    .product-mark {
      display: inline-flex; align-items: baseline; gap: 12px;
      padding-bottom: 4px;
      margin-bottom: 28px;
      border-bottom: 1px solid var(--tw-border);
    }
    .product-mark img { height: 28px; }
    .product-mark .tag {
      font-size: 12px; font-weight: 800; letter-spacing: var(--tw-tracking-caps);
      color: var(--tw-navy);
    }

    .ph-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .ph-grid h1 {
      font-size: clamp(30px, 5vw, 68px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--tw-navy);
      margin: 0 0 20px;
      text-wrap: balance;
      overflow-wrap: anywhere;
    }
    .ph-grid p.lede {
      font-size: 19px;
      line-height: 1.55;
      color: var(--tw-fg-2);
      font-weight: 350;
      margin: 0 0 32px;
      max-width: 560px;
    }
    .ph-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .ph-bullets {
      list-style: none; padding: 0; margin: 32px 0 0;
      display: grid; gap: 12px;
    }
    .ph-bullets li {
      display: grid; grid-template-columns: 22px 1fr; gap: 10px;
      align-items: start;
      font-size: 14px; color: var(--tw-fg-1);
    }
    .ph-bullets li::before {
      content: '';
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--tw-success-tint);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B9E5A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
      background-size: 11px;
      background-position: center;
      background-repeat: no-repeat;
      margin-top: 2px;
    }

    /* Mock dealer-portal screen for hero */
    .ph-mock {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--tw-shadow-4), 0 40px 80px rgba(15,23,42,0.18);
      transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
      background: #fff;
      border: 1px solid var(--tw-border);
    }
    .ph-mock .browser {
      background: #f3f5f9;
      padding: 10px 14px;
      display: flex; gap: 8px; align-items: center;
      border-bottom: 1px solid var(--tw-border);
    }
    .ph-mock .browser .dot { width: 10px; height: 10px; border-radius: 50%; }
    .ph-mock .browser .dot.r { background: #ff5f57; }
    .ph-mock .browser .dot.y { background: #febc2e; }
    .ph-mock .browser .dot.g { background: #28c840; }
    .ph-mock .browser .url {
      margin-left: 16px;
      flex: 1;
      background: #fff;
      border: 1px solid var(--tw-border);
      border-radius: 6px;
      font-size: 11px;
      padding: 4px 10px;
      color: var(--tw-fg-3);
    }
    .ph-mock .app {
      display: grid;
      grid-template-columns: 180px 1fr;
      height: 380px;
    }
    .ph-mock .sidebar {
      background: var(--tw-navy-900);
      color: #fff;
      padding: 14px 0;
    }
    .ph-mock .sidebar .brand {
      padding: 4px 16px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 10px;
    }
    .ph-mock .sidebar .brand img { height: 18px; filter: brightness(1.1); }
    .ph-mock .sidebar a {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 16px;
      color: var(--tw-navy-300);
      font-size: 11px;
      font-weight: 500;
      border-left: 2px solid transparent;
    }
    .ph-mock .sidebar a.active { color: #fff; background: var(--tw-navy-800); border-left-color: var(--tw-gold); }
    .ph-mock .sidebar a svg { width: 12px; height: 12px; }
    .ph-mock .canvas { background: #fff; }
    .ph-mock .topbar {
      background: var(--tw-bg-darkbar);
      color: #fff;
      padding: 6px 12px;
      display: flex; align-items: center; gap: 10px;
      font-size: 11px;
    }
    .ph-mock .topbar .modify {
      background: var(--tw-action);
      color: #fff;
      padding: 4px 10px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 700;
    }
    .ph-mock .topbar .stat { color: var(--tw-fg-onDark-2); margin-left: auto; }
    .ph-mock .topbar .stat b { color: #fff; }
    .ph-mock table { width: 100%; border-collapse: collapse; font-size: 11px;}
    .ph-mock thead th {
      text-align: left;
      padding: 8px 10px;
      font-size: 10px;
      color: var(--tw-navy);
      font-weight: 700;
      border-bottom: 1px solid var(--tw-border);
      background: #fff;
    }
    .ph-mock thead th.num { text-align: right; }
    .ph-mock tbody td {
      padding: 8px 10px;
      border-bottom: 1px solid #EEF2F8;
      font-size: 11px;
      color: var(--tw-fg-1);
    }
    .ph-mock tbody td.num { text-align: right; font-variant-numeric: tabular-nums;}
    .ph-mock tbody td .pill {
      display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 9px;
      font-weight: 700; color: #fff; background: var(--tw-navy);
    }
    .ph-mock .green { color: var(--tw-success); font-weight: 700; }
    .ph-mock .red { color: var(--tw-price); font-weight: 700; }
    .ph-mock .muted { color: var(--tw-fg-4); }

    /* metric badges floating around mock */
    .ph-badge {
      position: absolute;
      background: #fff;
      border: 1px solid var(--tw-border);
      border-radius: 10px;
      box-shadow: var(--tw-shadow-3);
      padding: 10px 14px;
      font-size: 11px;
      z-index: 4;
    }
    .ph-badge .top { display: flex; align-items: center; gap: 8px; color: var(--tw-fg-3); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;}
    .ph-badge .top .pulse {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--tw-success);
      box-shadow: 0 0 0 0 rgba(27,158,90,0.5);
      animation: pulse 1.6s infinite;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(27,158,90,0.5); }
      70% { box-shadow: 0 0 0 8px rgba(27,158,90,0); }
      100% { box-shadow: 0 0 0 0 rgba(27,158,90,0); }
    }
    .ph-badge .v { font-size: 16px; font-weight: 800; color: var(--tw-navy); line-height: 1;}
    .ph-badge.b1 { top: 30px; left: -28px; }
    .ph-badge.b2 { bottom: 40px; right: -32px; }

    /* Capability grid */
    .cap-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }
    .cap {
      background: #fff;
      border: 1px solid var(--tw-border);
      border-radius: var(--tw-radius-4);
      padding: 28px 24px;
      transition: all var(--tw-dur-base) var(--tw-ease);
    }
    .cap:hover {
      border-color: var(--tw-navy-300);
      transform: translateY(-2px);
      box-shadow: var(--tw-shadow-3);
    }
    .cap .ic {
      width: 40px; height: 40px;
      border-radius: 8px;
      background: var(--tw-navy-050);
      color: var(--tw-navy);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .cap .ic svg { width: 20px; height: 20px; }
    .cap h4 { font-size: 17px; font-weight: 700; color: var(--tw-navy); margin: 0 0 6px;}
    .cap p { font-size: 14px; color: var(--tw-fg-2); line-height: 1.5; margin: 0; }

    /* Workflow */
    .workflow {
      background: var(--tw-navy-900);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .workflow .container { position: relative; }
    .workflow .eyebrow { color: var(--tw-gold); }
    .workflow h2 { color: #fff; }
    .workflow .section-lede { color: var(--tw-fg-onDark-2); }

    .flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 56px;
      position: relative;
    }
    .flow::before {
      content: '';
      position: absolute;
      top: 32px; left: 12%; right: 12%;
      height: 2px;
      background: linear-gradient(90deg, var(--tw-gold) 0%, rgba(243,179,0,0.2) 100%);
      z-index: 0;
    }
    .step {
      position: relative; z-index: 1;
      text-align: center;
      padding: 0 16px;
    }
    .step .n {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: var(--tw-navy);
      border: 2px solid var(--tw-gold);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      font-weight: 800;
      color: var(--tw-gold);
      margin: 0 auto 20px;
    }
    .step h4 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 8px; }
    .step p { font-size: 14px; line-height: 1.5; color: var(--tw-fg-onDark-2); margin: 0; }

    /* Comparison */
    .compare {
      background: #fff;
      border: 1px solid var(--tw-border);
      border-radius: var(--tw-radius-6);
      overflow: hidden;
      margin-top: 48px;
    }
    .compare table { width: 100%; border-collapse: collapse; font-size: 14px;}
    .compare th, .compare td { padding: 16px 20px; text-align: left; }
    .compare thead th {
      background: var(--tw-navy);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: var(--tw-tracking-caps);
      text-transform: uppercase;
    }
    .compare thead th:first-child { background: transparent; color: var(--tw-fg-3); text-align: left;}
    .compare tbody tr { border-top: 1px solid var(--tw-border); }
    .compare tbody td { color: var(--tw-fg-1); }
    .compare tbody td:first-child { font-weight: 700; color: var(--tw-navy); }
    .compare tbody td.tw { background: rgba(243,179,0,0.05); }
    .compare .yes { color: var(--tw-success); font-weight: 700;}
    .compare .no { color: var(--tw-fg-4); }

    @media (max-width: 1100px) {
      .ph-grid { grid-template-columns: 1fr; }
      .ph-mock { transform: none; }
      .cap-grid { grid-template-columns: 1fr 1fr; }
      .flow { grid-template-columns: 1fr 1fr; gap: 32px; }
      .flow::before { display: none; }
    }
    @media (max-width: 720px) {
      .cap-grid { grid-template-columns: 1fr; }
      .flow { grid-template-columns: 1fr; }
      .compare { overflow-x: auto; }
      .compare table { min-width: 640px; }
      .ph-grid { gap: 32px; }
      .ph-grid h1 { font-size: 32px; }
    }
    @media (max-width: 480px) {
      .ph-grid h1 { font-size: 28px; }
      .ph-mock { transform: none; max-width: 100%; }
      .ph-mock .app { grid-template-columns: 120px 1fr; height: 320px; }
      .ph-mock table { font-size: 10px; }
      .ph-mock thead th, .ph-mock tbody td { padding: 6px 8px; }
    }
/* ---- Download demo app section ---- */
.download-app {
  background: linear-gradient(135deg, var(--tw-navy) 0%, #0a1d3f 100%);
  border-radius: var(--tw-radius-4);
  padding: 56px 48px;
  color: #fff;
  box-shadow: var(--tw-shadow-3);
}
.download-app .eyebrow { color: var(--tw-gold); }
.download-app h2 { color: #fff; margin: 8px 0 12px; }
.download-app p { color: rgba(255,255,255,0.78); max-width: 640px; margin-bottom: 28px; }
.store-badges { display: flex; flex-wrap: wrap; gap: 16px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}
.store-badge:hover { transform: translateY(-2px); background: #1a1a1a; }
.store-badge svg { flex-shrink: 0; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge__text small { font-size: 10px; letter-spacing: 0.04em; opacity: 0.85; }
.store-badge__text strong { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }

@media (max-width: 720px) {
  .download-app { padding: 40px 28px; }
  .store-badges { gap: 12px; }
  .store-badge { padding: 10px 18px; }
  .store-badge__text strong { font-size: 16px; }
}

/* ---- Customer logo wall ---- */
.section-sub { color: var(--tw-fg-2); max-width: 640px; margin: 12px auto 0; }
.section-head.center .section-sub { text-align: center; }
.customer-logos {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.customer-logos li { display: flex; justify-content: center; }
.customer-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.customer-logos a:hover {
  transform: translateY(-2px);
  border-color: var(--tw-navy);
  box-shadow: var(--tw-shadow-2);
}
.customer-logos img {
  max-width: 100%;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .customer-logos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .customer-logos a { min-height: 120px; padding: 18px 20px; }
  .customer-logos img { max-height: 80px; }
}
@media (max-width: 600px) {
  .customer-logos { grid-template-columns: repeat(2, 1fr); }
  .customer-logos a { min-height: 110px; padding: 16px 18px; }
  .customer-logos img { max-height: 72px; }
}