@font-face { font-family: Manrope; src: url('/marketing/20260930/assets/manrope-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('/marketing/20260930/assets/manrope-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('/marketing/20260930/assets/manrope-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
.marketing-catalog { --paper: #fff; --muted: #475569; --ink: #111827; background: #fff; color: #111827; font-family: Manrope, system-ui, sans-serif; font-size: 1rem; line-height: 1.65; }
.marketing-catalog h1 { font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3.5rem); overflow-wrap: anywhere; }
.marketing-catalog .info h2 { font-family: inherit; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.2; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.marketing-catalog .description, .marketing-catalog .included ul, .marketing-catalog .step p, .marketing-catalog .pilot p { font-size: 1rem; color: #475569; }
.marketing-catalog :is(.eyebrow, .collection-label, .tag, .included h3, .button, .caption, .footer, .sample-description, .sample-badge, .sample-links, .sample-pill, .sample-tile span, .browser-bar span, .forma-links, .forma-kicker, .forma-description, .forma-cta, .forma-category span, .step-number, .pilot a, .forma-categories-title) { font-size: 0.875rem; }
.marketing-catalog :is(.eyebrow, .collection-label, .tag, .included h3, .caption, .footer, .sample-description, .sample-badge, .sample-links, .browser-bar span, .forma-links, .forma-kicker, .forma-description) { color: #475569; }
.marketing-catalog .intro-copy { font-size: 1rem; line-height: 1.7; }
.marketing-catalog .step h3, .marketing-catalog .pilot h2 { font-size: 1.25rem; line-height: 1.35; }
.marketing-catalog .header { height: auto; min-height: 82px; flex-wrap: wrap; padding-block: 18px; }
.marketing-catalog .nav, .marketing-catalog .forma-nav { flex-wrap: wrap; min-width: 0; }
.marketing-catalog .pilot a { white-space: normal; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.marketing-catalog a.button, .marketing-catalog .login, .marketing-catalog .nav a, .marketing-catalog .footer a { min-height: 44px; font-size: 1rem; }
.marketing-catalog .nav a, .marketing-catalog .footer a { display: inline-flex; align-items: center; }
.marketing-catalog .sample-nav, .marketing-catalog .sample-links, .marketing-catalog .forma-links { flex-wrap: wrap; }
.marketing-catalog .sample-title, .marketing-catalog .forma-title { letter-spacing: -0.04em; overflow-wrap: anywhere; line-height: 1.2; }
.marketing-catalog .info, .marketing-catalog .visual, .marketing-catalog .sample-copy, .marketing-catalog .forma-copy, .marketing-catalog .step, .marketing-catalog .step > div { min-width: 0; }
.marketing-catalog .included, .marketing-catalog .caption, .marketing-catalog .step, .marketing-catalog .pilot, .marketing-catalog .footer { overflow-wrap: anywhere; }
.marketing-catalog .step-number { color: #245c83; }
.marketing-catalog .button-primary { color: #fff; background: #215b83; border-color: #215b83; }
.marketing-catalog .button-primary:hover { background: #16466a; }
@media (max-width: 760px) {
  .marketing-catalog .header { height: auto; min-height: 82px; padding-block: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .marketing-catalog .header .login { grid-row: 1; grid-column: 2; }
  .marketing-catalog .nav { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; gap: 12px 24px; }
  .marketing-catalog .intro { padding-top: 48px; }
  .marketing-catalog .info { padding: 24px; }
  .marketing-catalog .sample-hero, .marketing-catalog .forma-hero { grid-template-columns: minmax(0, 1fr); }
  .marketing-catalog .sample-copy { padding-bottom: 18px; }
  .marketing-catalog .forma-copy { padding: 24px; }
  .marketing-catalog .forma-hero > img { min-height: 220px; height: 220px; }
  .marketing-catalog .sample-description, .marketing-catalog .forma-description { margin-top: 16px; }
  .marketing-catalog .visual { padding: 18px; }
  .marketing-catalog .button { font-size: 1rem; }
  .marketing-catalog .collection-label { gap: 16px; flex-wrap: wrap; }
}