/* Shared navigation and inner-page styles for the PaperMantis marketing site. */
.site-header .header-nav a[aria-current="page"] { color: var(--pm-color-ink); }
.site-header .header-nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: var(--pm-color-focus); }
.menu-toggle { display: none; }
.site-header .wordmark { margin-right: 0; }
.site-footer .footer-links { flex-wrap: wrap; }
.site-footer .footer-links a { white-space: nowrap; }

.page-hero { padding-top: 40px; padding-bottom: 64px; }
.page-hero .hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-hero .text-action, .text-action { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 3px; color: var(--pm-color-ink); font: 600 14px/1 Nohemi, Inter, sans-serif; letter-spacing: 0; }
.text-action:hover { color: var(--pm-color-focus); }
.text-action span { font-size: 18px; line-height: 1; }
.page-rule { border-top: 1px solid var(--pm-color-line); }
.page-section { padding-top: 104px; padding-bottom: 112px; }
.page-section.alt { background: var(--pm-color-wash); }
.page-section .section-heading { max-width: 760px; margin-bottom: var(--pm-space-6); }
.page-section .section-heading h2 { margin: 0 0 15px; font-size: clamp(38px, 4.8vw, 60px); line-height: 1.07; letter-spacing: 0; }
.page-section .section-heading p:last-child { margin: 0; max-width: 680px; color: var(--pm-color-muted); font-size: 17px; line-height: 1.6; }
.page-section .section-label { margin-bottom: 15px; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--pm-color-line); border-radius: var(--pm-radius-card); background: var(--pm-color-surface); }
.product-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 43% 57%; min-height: 410px; }
.product-card.wide.reverse { grid-template-columns: 57% 43%; }
.product-card.wide.reverse .product-media { order: 0; }
.product-card.wide.reverse .product-copy { order: 1; }
.product-copy { padding: 34px 37px 37px; }
.product-card.wide .product-copy { display: flex; flex-direction: column; justify-content: center; padding: 52px 58px; }
.product-copy .card-overline { display: block; margin-bottom: 26px; color: #818a8c; font-size: 12px; font-weight: 700; letter-spacing: var(--pm-tracking-body); text-transform: uppercase; }
.product-copy h3 { margin: 0 0 12px; font-size: clamp(27px, 2.6vw, 35px); line-height: 1.13; }
.product-card.wide .product-copy h3 { max-width: 470px; font-size: clamp(33px, 3.6vw, 48px); }
.product-copy p { max-width: 490px; margin: 0 0 22px; color: var(--pm-color-muted); font-size: 15px; line-height: 1.62; }
.product-copy .text-action { margin-top: auto; width: max-content; }
.product-media { display: flex; align-items: center; justify-content: center; min-height: 280px; margin: 12px; overflow: hidden; border-radius: 16px; background: #f5f7f6; }
.product-card.wide .product-media { min-height: 385px; margin-left: 0; }
.product-card.wide.reverse .product-media { margin-left: 12px; margin-right: 0; }
.product-media img { display: block; width: 100%; height: 100%; max-height: 440px; object-fit: cover; object-position: left top; }
.product-media.builder img, .product-media.discover img { object-fit: contain; object-position: center top; }
.product-media.builder { background: #f0f3f1; }
.product-media.discover { background: #f0f4f1; }
.product-media.portfolio { background: #f4f6f4; }
.product-card.compact { min-height: 270px; }
.product-card.compact .product-copy { display: flex; flex-direction: column; height: 100%; padding: 35px 37px; }
.product-card.compact .product-copy .card-overline { margin-bottom: 41px; }

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 46px; }
.comparison article { padding: 36px 38px; border: 1px solid var(--pm-color-line); border-radius: 22px; background: #fff; }
.comparison .comparison-num { display: block; margin-bottom: 44px; color: #7f888a; font-size: 13px; font-weight: 700; }
.comparison h3 { margin: 0 0 12px; font-size: 30px; }
.comparison p { margin: 0; color: var(--pm-color-muted); font-size: 15px; line-height: 1.62; }
.comparison .comparison-foot { display: block; margin-top: 26px; color: var(--pm-color-focus); font-size: 13px; font-weight: 700; }

.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.resource-card { display: flex; flex-direction: column; min-height: 300px; padding: 32px; border: 1px solid var(--pm-color-line); border-radius: var(--pm-radius-card); background: var(--pm-color-surface); transition: border-color .2s, transform .2s; }
.resource-card:hover { border-color: #bfc9d9; transform: translateY(-2px); }
.resource-card .resource-type { display: block; margin-bottom: auto; color: #818a8c; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--pm-tracking-body); }
.resource-card h3 { margin: 52px 0 10px; font-size: 29px; line-height: 1.13; }
.resource-card p { margin: 0 0 26px; color: var(--pm-color-muted); font-size: 14px; line-height: 1.62; }
.resource-card .resource-arrow { margin-top: auto; color: var(--pm-color-focus); font-size: 21px; font-weight: 700; }
.resource-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--pm-color-line); }
.resource-list a { display: flex; justify-content: space-between; gap: 25px; padding: 25px 14px 25px 0; border-bottom: 1px solid var(--pm-color-line); }
.resource-list a:nth-child(odd) { margin-right: 28px; }
.resource-list a:nth-child(even) { margin-left: 28px; }
.resource-list strong { display: block; margin-bottom: 7px; font: 600 20px/1.2 Nohemi, Inter, sans-serif; letter-spacing: 0; }
.resource-list small { display: block; color: var(--pm-color-muted); font-size: 13px; line-height: 1.5; }
.resource-list .list-arrow { color: var(--pm-color-focus); font-size: 20px; }
.resource-list a:hover strong { color: var(--pm-color-focus); }

.docs-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 76px; align-items: start; }
.docs-toc { position: sticky; top: 106px; display: grid; gap: 5px; padding: 21px 0; border-top: 1px solid var(--pm-color-line); }
.docs-toc strong { margin-bottom: 11px; color: #858d90; font-size: 12px; text-transform: uppercase; letter-spacing: var(--pm-tracking-body); }
.docs-toc a { padding: 9px 0; color: var(--pm-color-muted); font-size: 14px; font-weight: 600; }
.docs-toc a:hover, .docs-toc a:focus-visible { color: var(--pm-color-focus); }
.docs-content section { scroll-margin-top: 112px; padding: 0 0 64px; margin-bottom: 64px; border-bottom: 1px solid var(--pm-color-line); }
.docs-content section:last-child { border-bottom: 0; margin-bottom: 0; }
.docs-content h2 { margin: 0 0 17px; font-size: clamp(32px, 3.7vw, 45px); }
.docs-content h3 { margin: 32px 0 9px; font-size: 23px; }
.docs-content p, .docs-content li { max-width: 760px; color: #525b5f; font-size: 16px; line-height: 1.72; }
.docs-content ul, .docs-content ol { padding-left: 22px; }
.docs-content li { padding-left: 5px; margin: 8px 0; }
.docs-content a:not(.site-pill-cta) { color: var(--pm-color-blue); text-decoration: underline; text-underline-offset: 3px; }
.docs-callout { margin: 28px 0; padding: 24px 27px; border-left: 3px solid var(--pm-color-focus); border-radius: 0 12px 12px 0; background: #f3f7ff; }
.docs-callout p { margin: 0; }
.docs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.docs-steps article { min-height: 180px; padding: 23px; border: 1px solid var(--pm-color-line); border-radius: 17px; }
.docs-steps span { color: var(--pm-color-focus); font-size: 13px; font-weight: 700; }
.docs-steps h3 { margin: 27px 0 7px; font-size: 21px; }
.docs-steps p { margin: 0; font-size: 14px; line-height: 1.55; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fact-card { min-height: 220px; padding: 29px; border: 1px solid var(--pm-color-line); border-radius: var(--pm-radius-card); background: var(--pm-color-surface); }
.fact-card span { display: block; margin-bottom: 42px; color: #858d90; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--pm-tracking-body); }
.fact-card h3 { margin: 0 0 10px; font-size: 24px; }
.fact-card p { margin: 0; color: var(--pm-color-muted); font-size: 14px; line-height: 1.58; }
.page-cta { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 60px 64px; border-radius: 24px; background: var(--pm-color-green-wash); }
.page-cta h2 { max-width: 620px; margin: 0 0 13px; font-size: clamp(34px, 4.5vw, 54px); }
.page-cta p { max-width: 560px; margin: 0; color: var(--pm-color-muted); font-size: 16px; line-height: 1.6; }
.page-cta .site-pill-cta { flex: none; }
.page-cta-wrap { padding-top: 30px; padding-bottom: 112px; }

@media (max-width: 900px) {
  .site-header .header-nav { gap: 18px; }
  .site-header .header-inner { gap: 18px; }
  .product-card.wide .product-copy { padding: 38px; }
  .docs-layout { gap: 40px; grid-template-columns: 170px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .site-header .header-inner { position: relative; }
  .site-header .header-cta { margin-left: auto; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--pm-color-line); border-radius: 50%; background: #fff; color: var(--pm-color-ink); cursor: pointer; }
  .menu-toggle::before { content: "☰"; font-size: 19px; line-height: 1; }
  .menu-toggle[aria-expanded="true"]::before { content: "×"; font-size: 28px; }
  .site-header .header-nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 25; margin: 0; padding: 12px; border: 1px solid var(--pm-color-line); border-radius: 0 0 18px 18px; background: #fff; box-shadow: 0 20px 30px rgba(22,26,29,.08); }
  .site-header .header-nav[data-open="true"] { display: grid; gap: 0; }
  .site-header .header-nav a { padding: 13px 10px; font-size: 16px; }
  .site-header .header-nav a[aria-current="page"]::after { display: none; }
  .page-hero { padding-top: 48px; padding-bottom: 60px; }
  .page-section { padding-top: 78px; padding-bottom: 82px; }
  .product-grid, .resource-grid, .comparison, .facts-grid { grid-template-columns: 1fr; }
  .product-card.wide, .product-card.wide.reverse { display: flex; grid-column: auto; min-height: 0; }
  .product-card.wide.reverse .product-copy { order: 0; }
  .product-card.wide.reverse .product-media { order: 1; }
  .product-card.wide .product-copy, .product-copy { padding: 30px; }
  .product-card.wide .product-media, .product-card.wide.reverse .product-media { min-height: 250px; margin: 0 10px 10px; }
  .product-card.wide .product-copy h3 { font-size: 34px; }
  .product-card.compact { min-height: 250px; }
  .comparison { margin-top: 30px; }
  .comparison article { padding: 29px; }
  .resource-card { min-height: 250px; }
  .resource-card h3 { margin-top: 32px; }
  .resource-list { grid-template-columns: 1fr; }
  .resource-list a:nth-child(n) { margin: 0; }
  .docs-layout { display: block; }
  .docs-toc { position: static; display: flex; gap: 10px; overflow-x: auto; white-space: nowrap; padding: 0 0 18px; margin-bottom: 44px; }
  .docs-toc strong { display: none; }
  .docs-toc a { padding: 9px 14px; border: 1px solid var(--pm-color-line); border-radius: 99px; }
  .docs-content section { padding-bottom: 48px; margin-bottom: 48px; }
  .docs-steps { grid-template-columns: 1fr; }
  .docs-steps article { min-height: 0; }
  .docs-steps h3 { margin-top: 15px; }
  .page-cta { display: block; padding: 38px 30px; }
  .page-cta .site-pill-cta { margin-top: 24px; }
  .page-cta-wrap { padding-bottom: 85px; }
}
@media (max-width: 380px) {
  .site-header .header-inner { gap: 8px; }
  .site-header .wordmark { width: 120px; }
  .site-header .header-cta { padding-inline: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .resource-card { transition: none; }
  .resource-card:hover { transform: none; }
}