/* pitch.dog global nav. Edit nav/pd-nav.css, never the copy in apps/main-site/assets/pd-nav/.
   Every rule is scoped to .pdn*, so host pages cannot restyle it and it cannot restyle them.
   The only things it exports are --pdn-h and a default scroll-padding-top. */
@font-face { font-family: "PDN Body"; src: url("/assets/type/assets/fonts/pd-body-roman.woff2") format("woff2"); font-weight: 100 900; font-display: optional; }
@font-face { font-family: "PDN Head"; src: url("/assets/type/assets/fonts/pd-head.woff2") format("woff2"); font-weight: 265 900; font-display: swap; }

/* :where() keeps this at zero specificity, so a host's own html { scroll-padding-top } (the blog's
   reading offset) still wins. */
:root { --pdn-h: 56px; }
:where(html) { scroll-padding-top: var(--pdn-h); }

.pdn {
  --pdn-bg: #f6f5f8; --pdn-panel: #fffdfb; --pdn-ink: #0e0e0f; --pdn-muted: #5d5e66; --pdn-rule: rgb(14 14 15 / .14);
  --pdn-rule-strong: rgb(14 14 15 / .28); --pdn-control: rgb(14 14 15 / .45); --pdn-hover: rgb(14 14 15 / .06); --pdn-cta-bg: #0e0e0f; --pdn-cta-ink: #fffdfb;
  --pdn-cta-hover: #2a2a2e; --pdn-focus: #0450d4; --pdn-accent: #b8321b; --pdn-scrim: rgb(14 14 15 / .42);
  --pdn-shadow: 8px 8px 0 rgb(4 80 212 / .10), 0 18px 48px rgb(0 0 0 / .14);
  --pdn-font: "PDN Body", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pdn-head: "PDN Head", Georgia, "Times New Roman", serif;
  --pdn-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pdn-ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-resolved-theme="light"]) .pdn {
    --pdn-bg: #111113; --pdn-panel: #18181b; --pdn-ink: #f1f0ed; --pdn-muted: #a6a7af; --pdn-rule: rgb(241 240 237 / .15);
    --pdn-rule-strong: rgb(241 240 237 / .30); --pdn-control: rgb(241 240 237 / .40); --pdn-hover: rgb(241 240 237 / .08); --pdn-cta-bg: #f1f0ed; --pdn-cta-ink: #111113;
    --pdn-cta-hover: #ffffff; --pdn-focus: #8ab4ff; --pdn-accent: #ff8a6b; --pdn-scrim: rgb(0 0 0 / .6);
    --pdn-shadow: 0 18px 48px rgb(0 0 0 / .5); color-scheme: dark;
  }
}
html[data-resolved-theme="dark"] .pdn {
  --pdn-bg: #111113; --pdn-panel: #18181b; --pdn-ink: #f1f0ed; --pdn-muted: #a6a7af; --pdn-rule: rgb(241 240 237 / .15);
  --pdn-rule-strong: rgb(241 240 237 / .30); --pdn-control: rgb(241 240 237 / .40); --pdn-hover: rgb(241 240 237 / .08); --pdn-cta-bg: #f1f0ed; --pdn-cta-ink: #111113;
  --pdn-cta-hover: #ffffff; --pdn-focus: #8ab4ff; --pdn-accent: #ff8a6b; --pdn-scrim: rgb(0 0 0 / .6);
  --pdn-shadow: 0 18px 48px rgb(0 0 0 / .5); color-scheme: dark;
}

/* Reset: host CSS often styles header, nav, ul, a, button and img by element. */
.pdn, .pdn * { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; text-shadow: none; list-style: none; background: none; color: inherit; float: none; min-width: 0; max-width: none; }
.pdn { position: sticky; top: 0; z-index: var(--pdn-z, 1000); display: block; inline-size: 100%; block-size: var(--pdn-h); background: var(--pdn-bg); color: var(--pdn-ink); border-block-end: 1px solid var(--pdn-rule); font: 500 15px/1.2 var(--pdn-font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-align: left; }
.pdn-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.pdn svg.pdn-i { display: block; inline-size: 18px; block-size: 18px; flex: none; fill: currentColor; }
.pdn :focus-visible { outline: 3px solid var(--pdn-focus); outline-offset: 2px; border-radius: 2px; }

.pdn-skip { position: fixed; z-index: calc(var(--pdn-z, 1000) + 2); inset-block-start: 6px; inset-inline-start: 8px; padding: 12px 16px; background: #0e0e0f; color: #fffdfb; font: 600 15px/1 "PDN Body", system-ui, sans-serif; text-decoration: none; transform: translateY(-200%); }
.pdn-skip:focus { transform: none; outline: 3px solid #8ab4ff; outline-offset: 2px; }

.pdn-bar { block-size: calc(var(--pdn-h) - 1px); max-inline-size: 1600px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 4px; }
@media (min-width: 45em) { .pdn-bar { padding-inline: clamp(16px, 3.2vw, 48px); } }

.pdn-brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; margin-inline-end: auto; padding-inline-end: 6px; color: var(--pdn-ink); font-weight: 700; font-size: 17px; letter-spacing: -.035em; white-space: nowrap; }
.pdn-brand img { display: block; inline-size: 32px; block-size: 32px; max-width: none; }

.pdn-links { display: flex; align-items: center; gap: 2px; }
.pdn-link { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px; border-radius: 2px; color: var(--pdn-ink); white-space: nowrap; cursor: pointer; transition: background-color 160ms ease; }
.pdn-link:hover, .pdn-more[open] > .pdn-link { background: var(--pdn-hover); }
.pdn-link[aria-current], .pdn-link[data-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }

.pdn-more { position: relative; }
.pdn-more > summary { list-style: none; user-select: none; -webkit-user-select: none; }
.pdn-more > summary::-webkit-details-marker { display: none; }
.pdn-caret { inline-size: 14px !important; block-size: 14px !important; transition: transform 240ms var(--pdn-ease); }
.pdn-more[open] .pdn-caret { transform: rotate(180deg); }
.pdn-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 1; inline-size: max-content; min-inline-size: 300px; padding: 8px; display: grid; gap: 2px; background: var(--pdn-panel); border: 1px solid var(--pdn-rule-strong); box-shadow: var(--pdn-shadow); animation: pdn-drop 220ms var(--pdn-ease) both; }
.pdn-menu a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid transparent; color: var(--pdn-ink); line-height: 1.25; transition: background-color 140ms ease; }
.pdn-menu a strong { font-weight: 600; font-size: 16px; }
.pdn-menu a span { color: var(--pdn-muted); font-size: 13.5px; font-weight: 450; }
.pdn-menu a:hover { background: var(--pdn-hover); }
.pdn-menu a[aria-current] { border-color: var(--pdn-rule-strong); }
@keyframes pdn-drop { from { opacity: 0; transform: translateY(-6px); } }

.pdn-theme { display: none; align-items: center; gap: 7px; min-block-size: 44px; padding-inline: 12px; margin-inline-start: 6px; border: 1px solid var(--pdn-control); border-radius: 2px; color: var(--pdn-ink); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pdn-theme:hover { background: var(--pdn-hover); }
.pdn .pdn-theme svg.pdn-i, .pdn-tl { display: none; }
html:not([data-theme="light"]):not([data-theme="dark"]) .pdn-theme .pdn-ti-auto, html:not([data-theme="light"]):not([data-theme="dark"]) .pdn-tl-auto,
html[data-theme="light"] .pdn-theme .pdn-ti-light, html[data-theme="light"] .pdn-tl-light,
html[data-theme="dark"] .pdn-theme .pdn-ti-dark, html[data-theme="dark"] .pdn-tl-dark { display: block; }

.pdn-cta { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 16px; margin-inline-start: 6px; border-radius: 2px; background: var(--pdn-cta-bg); color: var(--pdn-cta-ink); font-weight: 600; white-space: nowrap; transition: background-color 160ms ease; }
.pdn-cta:hover { background: var(--pdn-cta-hover); }

.pdn-menu-btn, .pdn-close { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; border: 1px solid var(--pdn-control); border-radius: 2px; color: var(--pdn-ink); cursor: pointer; }
.pdn-menu-btn:hover, .pdn-close:hover { background: var(--pdn-hover); }
.pdn-menu-btn .pdn-i, .pdn-close .pdn-i { inline-size: 21px; block-size: 21px; }

/* Desktop: the full row. Mobile: brand, Book a call, menu. One switch, in em so text zoom moves it. */
@media (min-width: 45em) {
  .pdn-menu-btn { display: none; }
  html.pdn-js .pdn-theme { display: inline-flex; }
}
@media (max-width: 44.99em) {
  .pdn-links { display: none; }
  .pdn-cta { min-block-size: 44px; padding-inline: 14px; font-size: 14.5px; margin-inline-end: 6px; }
}
@media (max-width: 21.99em) { /* under 352px: keep the wordmark, tighten the gaps */
  .pdn-brand { gap: 8px; font-size: 16px; padding-inline-end: 2px; }
  .pdn-brand img { inline-size: 30px; block-size: 30px; }
  .pdn-cta { padding-inline: 11px; margin-inline-end: 4px; font-size: 14px; }
  .pdn-bar { gap: 2px; padding-inline: 12px; }
}

/* The sheet: a popover, so it opens, closes on Escape and outside tap, and sits in the top layer
   without JavaScript. JavaScript adds scroll lock, focus and closing on navigation. */
.pdn-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; inline-size: min(440px, calc(100vw - 32px)); block-size: 100dvh; max-block-size: 100dvh; padding: 0; border: 0; border-inline-start: 1px solid var(--pdn-rule-strong); background: var(--pdn-panel); color: var(--pdn-ink); overflow: hidden auto; overscroll-behavior: contain; font: 500 16px/1.2 var(--pdn-font); box-shadow: -24px 0 60px rgb(0 0 0 / .18); }
.pdn-sheet { display: none; }
.pdn-sheet:popover-open { display: block; animation: pdn-in 300ms var(--pdn-ease); }
.pdn-sheet.pdn-sheet-open { display: block; z-index: 2147483000; } /* browsers without popover */
.pdn-sheet::backdrop { background: rgb(14 14 15 / .42); background: var(--pdn-scrim, rgb(14 14 15 / .42)); }
@keyframes pdn-in { from { transform: translateX(24px); opacity: 0; } }
.pdn-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; align-items: center; block-size: calc(var(--pdn-h) - 1px); padding-inline: 16px max(16px, env(safe-area-inset-right)); background: var(--pdn-panel); border-block-end: 1px solid var(--pdn-rule); }
.pdn-sheet-body { padding: 20px 24px calc(28px + env(safe-area-inset-bottom)); }
.pdn-eyebrow { margin-block: 8px 12px; color: var(--pdn-accent); font: 600 12px/1.2 var(--pdn-mono); letter-spacing: .14em; text-transform: uppercase; }
.pdn-bigs { margin-block-end: 28px; border-block-start: 1px solid var(--pdn-rule); }
.pdn-bigs a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; min-block-size: 76px; border-block-end: 1px solid var(--pdn-rule); color: var(--pdn-ink); }
.pdn-num { color: var(--pdn-muted); font: 500 11px/1 var(--pdn-mono); letter-spacing: .08em; }
.pdn-big { font: 400 clamp(34px, 9.5vw, 46px)/1 var(--pdn-head); letter-spacing: -.035em; }
.pdn-bigs .pdn-i, .pdn-smalls .pdn-i { inline-size: 20px; block-size: 20px; color: var(--pdn-focus); }
.pdn-smalls { margin-block-end: 28px; border-block-start: 1px solid var(--pdn-rule); }
.pdn-smalls a { display: flex; align-items: center; justify-content: space-between; min-block-size: 52px; border-block-end: 1px solid var(--pdn-rule); color: var(--pdn-ink); font-size: 18px; font-weight: 550; }
.pdn-bigs a[aria-current], .pdn-smalls a[aria-current] { color: var(--pdn-muted); }
.pdn-bigs a[aria-current] .pdn-big::after, .pdn-smalls a[aria-current] .pdn-s::after { content: ""; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-start: 10px; vertical-align: middle; border-radius: 50%; background: var(--pdn-accent); }
.pdn-seg { display: none; grid-template-columns: repeat(3, 1fr); margin-block-end: 24px; border: 1px solid var(--pdn-rule-strong); }
html.pdn-js .pdn-seg { display: grid; }
.pdn-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-block-size: 44px; color: var(--pdn-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.pdn-seg button + button { border-inline-start: 1px solid var(--pdn-rule-strong); }
.pdn-seg button[aria-pressed="true"] { background: var(--pdn-ink); color: var(--pdn-panel); }
.pdn-note { color: var(--pdn-muted); font-size: 13px; line-height: 1.5; }
@media (max-height: 720px) {
  .pdn-bigs a { min-block-size: 58px; }
  .pdn-big { font-size: clamp(28px, 8vw, 34px); }
  .pdn-smalls a { min-block-size: 48px; font-size: 17px; }
}

/* Scroll lock. :has() makes it work before (and without) JavaScript; pd-nav.js adds the class for Lenis pages. */
html:has(.pdn-sheet:popover-open) { overflow: hidden; }
html.pdn-locked { overflow: hidden; }
html.pdn-locked.pdn-gutter { scrollbar-gutter: stable; } /* only when a classic scrollbar was showing */

@media (prefers-reduced-motion: reduce) {
  .pdn *, .pdn-sheet { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .pdn { border-block-end: 1px solid CanvasText; }
  .pdn-cta, .pdn-seg button[aria-pressed="true"] { border: 1px solid ButtonText; }
}
@media print { .pdn, .pdn-skip { display: none !important; } }