/* ==========================================================================
   Urban Haul — shared layout for standalone landing pages
   (/become-a-vendor/, /drivers/). Layout only: every colour, radius,
   shadow, font size and easing comes from styles.css tokens, so these
   pages follow light/dark mode and any future token change automatically.
   ========================================================================== */
/* Page-scoped layout only. All colour, type, radius, shadow and motion
     come from assets/css/styles.css tokens, so light/dark mode follows the site. */
  .pg-hero { padding-top: clamp(6rem, 12vw, 9rem); background: var(--hero-bg); }
  .pg-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
    grid-template-columns: 1fr; }
  @media (min-width: 900px) { .pg-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
  .pg-hero h1 { font-size: var(--fs-display-lg); line-height: 1.08; margin: var(--space-4) 0 0; }
  .pg-lede { font-size: var(--fs-body-lg); margin-top: var(--space-4); max-width: 56ch; }
  .pg-support { color: var(--color-on-surface-variant); margin-top: var(--space-3); max-width: 60ch; }
  .pg-note { color: var(--color-on-surface-variant); font-size: var(--fs-body-sm); margin-top: var(--space-4); }
  .pg-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .pg-actions--center { justify-content: center; }
  .pg-center { text-align: center; }

  /* Hero ecosystem visual */
  .pg-visual { display: grid; place-items: center; }
  .pg-orbit { position: relative; width: min(100%, 420px); aspect-ratio: 1;
    display: grid; place-items: center; }
  .pg-core { display: grid; place-items: center; gap: 6px; width: 132px; height: 132px;
    border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary);
    box-shadow: var(--color-shadow-primary); }
  .pg-core svg { width: 30px; height: 30px; }
  .pg-core small { font-weight: 700; font-size: var(--fs-body-sm); }
  .pg-node { position: absolute; padding: 9px 15px; border-radius: var(--radius-full);
    background: var(--color-card-bg); border: 1px solid var(--color-card-border);
    box-shadow: var(--color-shadow-card); font-size: var(--fs-body-sm); font-weight: 600;
    white-space: nowrap; }
  .pg-node--1 { top: 4%; left: 50%; transform: translateX(-50%); }
  .pg-node--2 { top: 50%; right: 0; transform: translateY(-50%); }
  .pg-node--3 { bottom: 4%; left: 50%; transform: translateX(-50%); }
  .pg-node--4 { top: 50%; left: 0; transform: translateY(-50%); }

  /* Card grids */
  .pg-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .pg-grid--3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { .pg-grid--3 { grid-template-columns: repeat(3, 1fr); } }
  .pg-card { padding: var(--space-6); border-radius: var(--radius-lg);
    background: var(--color-card-bg); border: 1px solid var(--color-card-border);
    box-shadow: var(--color-shadow-card);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
  .pg-card:hover { transform: translateY(-3px); box-shadow: var(--color-shadow-lg); }
  .pg-card__ico { display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--radius-md); background: var(--color-primary-container);
    color: var(--color-primary-dark); margin-bottom: var(--space-4); }
  .pg-card__ico svg { width: 22px; height: 22px; }
  .pg-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
  .pg-card p { color: var(--color-on-surface-variant); }

  /* Category chips */
  .pg-cats { list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
  .pg-cat { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
    border-radius: var(--radius-full); background: var(--color-card-bg);
    border: 1px solid var(--color-card-border); font-weight: 600;
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
  .pg-cat:hover { transform: translateY(-2px); border-color: var(--color-primary); }
  .pg-cat__ico { display: grid; place-items: center; color: var(--color-primary-dark); }
  .pg-cat__ico svg { width: 20px; height: 20px; }

  /* Steps */
  .pg-steps { list-style: none; margin: 0 0 var(--space-10); padding: 0;
    display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: none; }
  @media (min-width: 700px) { .pg-steps { grid-template-columns: repeat(4, 1fr); } }
  .pg-step { padding: var(--space-6); border-radius: var(--radius-lg);
    background: var(--color-card-bg); border: 1px solid var(--color-card-border); }
  .pg-step__num { display: block; font-weight: 800; font-size: var(--fs-body-sm);
    color: var(--color-primary); letter-spacing: 0.08em; margin-bottom: var(--space-3); }
  .pg-step h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
  .pg-step p { color: var(--color-on-surface-variant); font-size: var(--fs-body-sm); }

  /* Download block */
  .pg-dl { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
    grid-template-columns: 1fr; }
  @media (min-width: 820px) { .pg-dl { grid-template-columns: 1.3fr 0.7fr; } }
  .pg-qr { text-align: center; }
  .pg-qr__box { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto;
    border-radius: var(--radius-lg); background: var(--color-card-bg);
    border: 1px dashed var(--color-outline-strong); color: var(--color-on-surface-variant); }
  .pg-qr__box svg { width: 74px; height: 74px; }

  /* Flow */
  .pg-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-4); margin-bottom: var(--space-8); }
  .pg-flow__node { padding: 14px 22px; border-radius: var(--radius-full);
    background: var(--color-card-bg); border: 1px solid var(--color-card-border);
    font-weight: 700; box-shadow: var(--color-shadow-card); }
  .pg-flow__node--core { background: var(--color-primary); color: var(--color-on-primary);
    border-color: transparent; box-shadow: var(--color-shadow-primary); }
  .pg-flow__arrow { color: var(--color-on-surface-variant); font-size: 1.4rem; }

  .pg-final h2 { font-size: var(--fs-display-lg); line-height: 1.1; }
  .pg-final .pg-lede { margin-inline: auto; }

  @media (prefers-reduced-motion: reduce) {
    .pg-card:hover, .pg-cat:hover { transform: none; }
  }