/* ── Product-page section backgrounds: three tones, not eleven ──────────────
   Loaded only by product pages (layouts/partials/product/product-css.html),
   after the per-section stylesheets. A product page used to stack five navy
   bands (hero, comparison, install, integrations, pricing) with cream, pink,
   green, grey and lavender blocks between them. The palette is now:
     white   #ffffff
     soft    #f5f6fc  (the lavender family the logo strip and FAQ already use)
     navy    #0c093a  kept only where the page leads with it (dark hero) and
                      for the pricing block — the one section meant to stop you.
   Every rule is `main .section` so it outranks the one-class rules in
   product-extra.css, calendar.css, catalog.css and the templates' inline
   <style> blocks regardless of load order. */

/* soft */
main .product-overview,
main .product-one-license,
main .product-install,
main .catalog-integrations,
main .support-section,
main .product-faq { background: #f5f6fc; background-image: none; }

/* white */
main .product-comparison,
main .product-technical { background: #ffffff; background-image: none; }

/* text that was white on navy */
main .product-overview__title,
main .product-comparison__title,
main .product-comparison__cta-heading,
main .product-install__title,
main .catalog-integrations__title { color: #0c093a; }
main .product-overview__text,
main .product-comparison__subtitle,
main .product-comparison__cta p,
main .product-install__text,
main .catalog-integrations__subtitle { color: #434343; }

/* the comparison table sat on navy as a white card; on white it needs an edge */
main .product-comparison__table { border: 1px solid #e6e9f5; box-shadow: 0 4px 20px rgba(12, 9, 58, .06); }
/* white cards on the soft background keep a visible edge */
main .product-faq__item { border: 1px solid #e6e9f5; }
main .catalog-integrations__grid img { box-shadow: 0 1px 4px rgba(12, 9, 58, .08); }

/* the hero rating links here; keep the block clear of the sticky header */
main #reviews { scroll-margin-top: 120px; }