.hero-art { height: 420px; border-radius: 28px; background: var(--hp-yellow-pale); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
      .hero-art .shot { width: 74%; border-radius: 12px; box-shadow: 0 18px 50px rgba(28,52,107,.2); background: #fff; }
      .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
      .cats .c { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px; }
      .cats h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--hp-ink); }
      .cats p { margin: 0 0 8px; font-size: 13px; line-height: 19px; color: var(--hp-body); }
      .cats .ct { font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--hp-muted); font-weight: 700; }
      .toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
      .tool { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: #fff; color: var(--hp-body); box-shadow: var(--ring-hairline); }
      .tool.on { background: var(--hp-coral); color: #fff; box-shadow: none; }
      .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
      .flow .f { background: #fff; border-radius: 22px; box-shadow: var(--shadow-card); padding: 26px; }
      .flow .step { font-family: var(--font-display); font-size: 34px; color: var(--hp-coral); line-height: 1; }
      .flow h3 { margin: 10px 0 6px; font-size: 17px; font-weight: 600; color: var(--hp-ink); }
      .flow p { margin: 0; font-size: 13px; line-height: 20px; color: var(--hp-body); }
      .prev-cards .th { aspect-ratio: 3/4; }
      @media (max-width:900px){ .cats { grid-template-columns: 1fr 1fr; } }
      @media (max-width:900px){ .flow { grid-template-columns: 1fr; } }
      @media (max-width:600px){ .cats { grid-template-columns: 1fr; } }