/* Local design layer. Core type, header, cards and CTA come from landing/. */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.site-header .header-inner { gap: 28px; }
.site-header .header-nav { gap: clamp(17px, 2.5vw, 36px); }
.site-header .header-nav a { font-family: Nohemi, Inter, sans-serif; letter-spacing: 0; }
.site-header .header-nav a[aria-current="page"]::after { display: none; }
.site-header .header-nav a[aria-current="page"] { color: var(--pm-color-ink); }
.site-header .header-cta { width: auto; min-width: 118px; }
.site-header .menu-toggle { margin-left: 0; }
.site-header .menu-toggle:focus-visible, button:focus-visible { outline: 3px solid rgba(52,120,246,.55); outline-offset: 3px; }
.site-footer { margin-top: 0; }
.page-hero { min-height: 0; }
.page-hero .hero-links { align-items: center; }
.product-hero{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:clamp(30px,5vw,75px);align-items:center}
.product-hero-image{margin:0;padding:12px;border:1px solid var(--pm-color-line);border-radius:var(--pm-radius-card);background:var(--pm-color-wash);box-shadow:0 16px 42px rgba(22,26,29,.06)}
.product-hero-image img{display:block;width:100%;height:auto;border-radius:12px}
.product-hero-image figcaption{margin:10px 5px 2px;color:var(--pm-color-quiet);font:400 12px/1.4 var(--pm-font-body)}
.page-section { border-top: 1px solid var(--pm-color-line); }
.page-section.alt { border-top: 0; }
.page-cta-wrap { padding-top: 28px; }
.page-cta .site-pill-cta { min-height: 48px; padding-inline: 25px; }
.product-card.wide.reverse .product-media { order: 0; }
.product-card.wide.reverse .product-copy { order: 1; }
.product-media.live img { object-position: center; object-fit: contain; }
.product-media.portfolio img { object-position: center top; object-fit: contain; }
.product-card .text-action { color: var(--pm-color-blue); }
.product-card .text-action:hover { color: var(--pm-color-ink); }
.inline-paths { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.inline-paths a { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 220px; border: 1px solid #e0e6e1; border-radius: 13px; padding: 17px 19px; font-size: 14px; font-weight: 700; }
.inline-paths a:hover { border-color: #a9bbac; background: #f7faf7; }
.inline-paths span { color: var(--pm-color-blue); font-size: 21px; line-height: 1; }
.resource-end { margin: 26px 0 0; }
.resource-list small:first-child { margin-bottom: 10px; color: #4e8560; text-transform: uppercase; letter-spacing: var(--pm-tracking-body); font-size: 11px; font-weight: 700; }
.docs-callout { border: 0; border-radius: 13px; background: #f3f7ff; }
.docs-product-shot { max-width: 780px; margin: 28px 0 0; }
.docs-product-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--pm-color-line); border-radius: 17px; }
.docs-product-shot figcaption { margin-top: 9px; color: #858d90; font-size: 12px; line-height: 1.5; }
.method-list { max-width: 870px; border-top: 1px solid var(--pm-color-line); }
.method-list p { display: grid; grid-template-columns: 200px 1fr; gap: 25px; margin: 0; padding: 25px 0; border-bottom: 1px solid var(--pm-color-line); color: var(--pm-color-muted); font-size: 16px; line-height: 1.6; }
.method-list strong { color: var(--pm-color-ink); font-family: Nohemi, Inter, sans-serif; font-size: 19px; letter-spacing: 0; }
.blog-draft-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 32px; }
.blog-draft-heading h2 { margin: 0; }
.blog-draft-heading > p { max-width: 390px; margin: 0; color: var(--pm-color-muted); font-size: 15px; line-height: 1.6; }
.topic-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 33px; }
.topic-filters button { min-height: 39px; padding: 0 16px; border: 1px solid #dce3dd; border-radius: 999px; background: #fff; color: #54615b; font: 600 13px/1 Nohemi, Inter, sans-serif; letter-spacing: 0; cursor: pointer; }
.topic-filters button[aria-pressed="true"] { border-color: var(--pm-color-ink); background: var(--pm-color-ink); color: #fff; }
.topic-filters button:hover:not([aria-pressed="true"]) { border-color: #9fb4a4; color: var(--pm-color-ink); }
.blog-draft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.blog-draft-card[hidden] { display: none; }
.blog-draft-card a { display: block; height: 100%; }
.blog-draft-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: #edf1ee; }
.blog-draft-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.blog-draft-meta { display: block; margin: 21px 0 13px; color: #7d8585; font-size: 12px; font-weight: 700; }
.blog-draft-card h2 { margin: 0 0 11px; font-size: 25px; line-height: 1.16; }
.blog-draft-card p { margin: 0 0 14px; color: var(--pm-color-muted); font-size: 14px; line-height: 1.55; }
.blog-draft-card .text-action { color: var(--pm-color-blue); }
.blog-draft-card a:hover h2, .blog-draft-card a:hover .text-action { color: var(--pm-color-blue); }
@media (max-width: 1000px) {
  .site-header .header-nav { gap: 16px; }
  .site-header .header-inner { gap: 18px; }
  .site-header .wordmark { width: 150px; }
  .blog-draft-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .site-header .menu-toggle { display: inline-flex; }
  .site-header .header-nav { gap: 0; }
  .site-header .header-cta { margin-left: auto; min-width: 0; }
  .page-hero { min-height: 0; padding-top: 48px; padding-bottom: 60px; }
  .product-hero{display:block}
  .product-hero-image{margin-top:42px;padding:7px;border-radius:16px}
  .blog-draft-heading { display: block; }
  .blog-draft-heading > p { margin-top: 17px; }
  .blog-draft-grid { grid-template-columns: 1fr; gap: 42px; }
  .method-list p { display: block; }
  .method-list strong { display: block; margin-bottom: 7px; }
}
@media (max-width: 380px) {
  .site-header .wordmark { width: 118px; }
  .site-header .header-cta { padding-inline: 12px; font-size: 12px; }
  .site-header .menu-toggle { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }