@layer views {
  .hero { padding-top: var(--space-7); padding-bottom: var(--space-4); }
  .hero-head { display: flex; align-items: center; gap: var(--space-3); }
  .hero-lumi { flex: none; width: 56px; height: 56px; }
  .hero h1 { font: var(--fs-hero); letter-spacing: var(--track-tight); max-width: 760px; text-wrap: balance; }
  .hero-search { height: 56px; max-width: 760px; margin-top: var(--space-5); padding-inline: var(--space-5); gap: var(--space-3); }
  .hero-search .icon { width: 22px; height: 22px; }
  .hero-search input { font-size: 17px; }
  .hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 760px; margin-top: var(--space-4); }
  .home-sec { margin-top: var(--space-8); }
  .home-sec > h2 { margin-bottom: var(--space-4); }
  .home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .home-tiles .ptile { flex-direction: column; align-items: flex-start; gap: var(--space-2); border-radius: var(--radius-2xl); }
  .home-tiles .ptile small { margin-left: 0; }
  .steps { list-style: none; counter-reset: step; display: grid; gap: var(--space-3); max-width: 760px; }
  .steps li { counter-increment: step; display: flex; align-items: center; gap: var(--space-3); font-size: 17px; }
  .steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); font: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .alerts-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-2xl); background: var(--surface-2); }
  .alerts-text { flex: 1 1 220px; }
  .alerts-text p { color: var(--text-2); margin-top: var(--space-1); }
  .alerts-lumi { flex: none; width: 48px; height: 48px; }


  @media (min-width: 720px) {
    .hero { padding-top: var(--space-9); }
    .hero-head { gap: var(--space-5); }
    .hero-lumi { width: 72px; height: 72px; }
    .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-tiles .ptile { flex-direction: row; align-items: center; gap: var(--space-3); }
    .home-tiles .ptile small { margin-left: auto; }
  }
}
