/* "Works where you write" (views/partials/pm-surfaces.ejs), /humanmail, Oct 26. Same family as product-inside.css: one lined panel, brand tokens only.
   Ink #110A33, slate #5B6478, lavender #DDD6FF hairlines, mist #F6F4FF, white. Mist band gets a white panel, white band gets a mist panel. */
html body .psf { padding: var(--hx-sec-y, 60px) 0; background: #fff; }
html body .psf--mist { background: #F6F4FF; }
html body .psf .section-header { margin-bottom: var(--hx-head-gap, 32px); }
html body .psf__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; overflow: hidden; border: 1px solid #DDD6FF; border-radius: 24px; background: #fff; box-shadow: 0 2px 8px rgba(17, 10, 51, .08); }
html body .psf--white .psf__list { background: #F6F4FF; box-shadow: none; }
html body .psf__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 16px 32px; margin: 0; padding: 20px 32px; border-top: 1px solid #DDD6FF; min-width: 0; }
html body .psf__row:first-child { border-top: 0; }
html body .psf__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-width: 0; }
html body .psf__tool { display: inline-flex; align-items: center; gap: 12px; font: 700 18px/1.2 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #110A33; white-space: nowrap; }
html body .psf__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #DDD6FF; background: #fff; }
html body .psf__logo img { display: block; width: 24px; height: 24px; object-fit: contain; }
html body .psf__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html body .psf__txt b { font: 700 var(--hx-h3-size, 20px)/var(--hx-h3-lh, 1.3) "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #110A33; }
html body .psf__txt span { font: 400 var(--hx-body-size, 16px)/var(--hx-body-lh, 1.5) Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; text-wrap: pretty; }
@media (max-width: 1023px) {
  html body .psf__row { gap: 12px 24px; padding: 16px 24px; }
}
@media (max-width: 767px) {
  html body .psf { padding: 32px 0; }
  html body .psf .section-header { margin-bottom: 16px; }
  html body .psf__list { border-radius: 20px; }
  html body .psf__row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 20px; }
  html body .psf__tool { font-size: 16px; gap: 8px; }
  html body .psf__logo { width: 40px; height: 40px; border-radius: 10px; }
  html body .psf__txt b { font-size: 17px; }
  html body .psf__txt span { font-size: 15px; line-height: 1.45; }
}